Html derslerimizin altıncısı olan form oluşturma işlemleri ile devam ediyoruz. Eğer önceki dersleri takip etmek istiyorsanız html dersleri linkinden faydalanabilirsiniz. Formlar kullanıcının web sitesiyle etkileşime girmesi açısından önemlidir. Etkileşime girmek derken site içerisinde arama yapma, yazılara yorum ekleme, kullanıcı girişi yapma, resim veya dosya ekleme gibi işlemlere diyoruz. Formlar olmasaydı sayfalar sadece statik öğelerden oluşmuş olacaktı, formlar ile sayfalarımız artık dinamik bir yapıya kavuşacak. Tabi şunu belirtmekte fayda var sadece html form öğelerini bilmek bu yukarıdaki saydığımız işlemleri gerçekleştirmek için yeterli olmayacak.
Basit bir form oluşturma
Bütün form öğeleri mutlaka <form> ….</form> öğeleri arasına yazılır. Aşağıdaki örnekte bir text kutusu ve bir butondan oluşan basit bir form tasarlanmıştır.
1 2 3 4 5 |
<form action="" method="" > Adınız:<input type="text" name="txtIsim"> <br><br> <input type="submit" name="btnGonder"> </form> |
Dikkat ettiyseniz form öğesinin 2 adet parametre aldığı görülüyor. Bunlar action ve method parametreleri.
- Action parametresi: form öğesinin olmazsa olmaz parametrelerinden biridir. Kullanıcının girdiği verilerin hangi sayfada işleneceğini gösterir. Örneğin çift tırnak arasına kayit.php yazılırsa girilen veriler bu sayfada işlenmek için oraya postalanır.
- Method parametresi: Verilerin postalanma biçimini belirtmek için kullanılır. Genellikle get veya post parametreleri kullanılır. Örneğin get ile bir arama yaptığınızda adres çubuğunda aramanızla ilgili bilgilerin yer aldığını görürsünüz. Bu nedenle şifre gibi gizli bilgiler bu metotla kullanılmaz. Post ise daha güvenli bir veri gönderim tekniğidir.
Şimdide <form> etiketleri içerisindeki öğeleri inceleyelim.
1-Input Text: Bu klasik içerisine bir şeyler yazmamızı sağlayan dikdörtgen şeklindeki form öğesidir. Metin kutusu, textbox veya textfield diye adlandırabiliriz.
1 |
Adınız:<input type="text" name="txtIsim"> |
2-Input Submit: Bu kontrol öğesi girilen verileri form action ve post öğesinde belirtilen yere göndermeye yarar.
1 |
<input type="submit" name="btnGonder"> |
3-Input Password: Şifrelerinizi girerken bunları gizleyerek ekrana bakan kişilerden gizleyen, text öğesinin benzeri bir kontroldür.
1 |
Şifreniz:<input type="password" name="txtŞifre"> |
Gelişmiş Formlar Oluşturma
Şimdide biraz daha kompleks formlar oluşturalım. Aşağıdaki örnekte diğer form öğelerinin de yer aldığı basit bir üye kayıt formu yer alıyor.
Formu oluşturmak için gerekli kodlar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<form action="" method="" > Adınız:<input type="text" name="txtIsim"> <br><br> Şifreniz:<input type="password" name="txtSifre"> <br><br> Cinsiyetiniz:<input type="radio" name="cinsiyet">Erkek <input type="radio" name="cinsiyet">Bayan <br><br> Bildiğiniz Diller:<input type="checkbox" name="dil1">İngilizce <input type="checkbox" name="dil2">Almanca <br><br> Yaşadığınız İl:<select> <option>İstanbul</option> <option>Ankara</option> <option>İzmir</option> </select> <br><br> Açık Adresiniz:<br> <textarea rows="5" cols="30"></textarea> <br><br> <input type="submit" name="btnGonder" value="Gönder"> <input type="reset" name="btnTemizle" value="Temizle"> </form> |
4-Input radio: Radio öğesi birden fazla seçenek arasından bir tanesini seçmek için kullanılır. Dikkat etmeniz gereken kısım ilişkili radio öğelerinin adları aynı olmalıdır.
1 |
Cinsiyetiniz:<input type="radio" name="cinsiyet">Erkek <input type="radio" name="cinsiyet">Bayan |
5-Input Checkbox: Checkbox birden fazla seçenek arasından bir veya daha fazlasını seçmek için kullanılır. Örnek olarak dilleri verdim. Bir kişi birden fazla dil bilebilir.
1 |
Bildiğiniz Diller:<input type="checkbox" name="dil1">İngilizce <input type="checkbox" name="dil2">Almanca |
6-Select: Önceden tanımlanmış seçenekler arasından bir tanesini seçmek için kullanılır. Örnek olarak yaşadığınız il güzel bir örnek.
1 2 3 4 5 |
Yaşadığınız İl:<select> <option>İstanbul</option> <option>Ankara</option> <option>İzmir</option> </select> |
7- Textarea: Text kutusunun daha büyük ve çok satırlı biçimidir. Satır ve sütün sayısı değiştirilerek büyüklüğü ayarlanabilir.
1 |
Adresiniz:<textarea rows="5" cols="30"></textarea> |
8-Input reset: Bu kontrol ise formu göndermek için değil içerisindeki verileri temizlemek için kullanılır.
1 |
<input type="reset" name="btnTemizle" value="Temizle"> |
En çok gereksinim duyulan form öğelerini basit şekilde anlatmaya çalıştım. Daha farklı form kontrolleri ve bunların değişik parametreleri de mevcut fakat başlangıç aşaması için yukarıdaki öğeler size yeterde artar bile. Html ile form oluşturma dersim burada sona eriyor, bir sonraki derste buluşmak üzere kolay gelsin.
üstad derslerin devamı ne zaman gelir acaba?
Derslerin devamını sabırsızlıkla bekliyoruz…Gerçekten güzel anlatıyorsunuz her anlattığınızı tek tek yapıyorum.Bir tek kafama bir şey takıldı,Yazdığımız kodların hepsi index’imizin en soluna yapışıyor.Ortaları ve sağ tarafı boş. kodu sayesinde alta ine ine devam ediyorum ama yan tarafa doğru gidemiyorum.Bu konuya da açıklık getirirseniz sevinirim.
başka yerden öğrendiğim kadarıyla metin tagini kullanarak yazıyı ortaya alabilirsin.
Derslerin devamını da yazar mısınız?
Sanırım artık bu anlattıklarınızı sayfanın içinde farklı yerlere yerleştirmek var sırada.
Devamı gelirse güzel olur