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> |
1 |
Cinsiyetiniz:<input type="radio" name="cinsiyet">Erkek <input type="radio" name="cinsiyet">Bayan |
1 |
Bildiğiniz Diller:<input type="checkbox" name="dil1">İngilizce <input type="checkbox" name="dil2">Almanca |
1 2 3 4 5 |
Yaşadığınız İl:<select> <option>İstanbul</option> <option>Ankara</option> <option>İzmir</option> </select> |
1 |
Adresiniz:<textarea rows="5" cols="30"></textarea> |
1 |
<input type="reset" name="btnTemizle" value="Temizle"> |
ü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