Bu yazımızda HTML‘ de Form elemanlarını görerek Form etiketlerinin kullanımı ile ilgili bazı örnekler gerçekleştireceğiz. HTML‘ de kullanıcıdan giriş almak için kullanılan formları oluşturmak için aşağıdaki etiketleri kullanırız.
<form> Etiketi :
<form> etiketi kullanıcıdan bilgi toplamak için kullanacağımız formu tanımlamak için kullanılmaktadır.
|
1 2 3 4 5 6 7 |
<form> . form elemanları . </form> |
<input> Etiketi :
<input> etiketi en önemli Form etiketidir. <input> etiketi , tür özelliğine bağlı olarak çeşitli şekillerde görüntülenebilir.
<input> etiketinin type özelliğine göre bazı örnek kullanımları aşağıdaki gibidir.
| Type | Açıklama |
| <input type=”text”> | Tek satırlık bir metin girişi alanı tanımlar. |
| <input type=”radio”> | Bir çok seçenekten birini seçmek için bir radyo düğmesi tanımlar. |
| <input type=”submit”> | Formu göndermek için bir gönder düğmesi tanımlar. |
Şimdi bu türleri açıklayalım.
Text Girişi <input type=”text”> :
Metin girişi için tek satırlık bir giriş alanı tanımlar.
Örnek:
|
1 2 3 4 5 6 7 8 |
<form> Adı:<br> <input type="text" name="ad"><br> Soyadı:<br> <input type="text" name="soyad"> </form> |
Ekran Çıktısı:
Yukarıdaki örneği incelediğimizde input etiketinin type özelliğinin text olarak ayarlandığını, yani kullanıcıya tek satırlık bir veri girişi yapma imkanı sağlandığını görmekteyiz. name özelliği önemlidir. Her girdi alanının gönderilmesi gereken bir ad özniteliğine sahip olması gerekir. Yani bir isim vermek gerekir. Name özniteliği atlanırsa, o girdi alanının verileri gönderilemeyecektir.
Şifre Girişi <input type=”password”> :
<input type=”password”> şifre giriş alanı oluşturmak için kullanılır.
|
1 2 3 4 5 6 7 8 9 |
<form action=""> Kullanıcı:<br> <input type="text" name="kadi"> <br> Şifre:<br> <input type="password" name="sifre"> </form> |
Ekran Çıktısı:
Radio Button Girişi <input type=”radio”> :
Radyo düğmeleri, bir kullanıcının sınırlı sayıda seçimden birini seçmesine izin verir. Aşağıdaki örneği ve ekran çıktısını inceleyelim.
|
1 2 3 4 5 6 |
<form> <input type="radio" name="cinsiyet" value="erkek" checked> Erkek<br> <input type="radio" name="cinsiyet" value="kadin"> Kadın<br> </form> |
Ekran Çıktısı :
CheckBox Girişi <input type=”checkbox”> :
Radio Button öğesinden farklı olarak birden fazla seçim yapılabilmesi gereken durumlarda kullanılmaktadır. Kullanımı ile ilgili kodlar ve ekran çıktısı aşağıdadır.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="/action_page.php"> <input type="checkbox" name="dil1" value="ing">İngilizce <br> <input type="checkbox" name="dil2" value="fr">Fransızca <br> <input type="checkbox" name="dil3" value="alm">Almanca <br><br> <input type="submit"> </form> |
Button <input type=”button”> :
Buton oluşturmak için kullanılır.
|
1 2 3 |
<input type="button" onclick="alert('www.yazilimkodlama.com')" value="TIKLA!"> |
Aşağıdaki butona tıklayarak yukarıdaki kod satırının ne işe yaradığını görebilirsiniz.
Gönder (Submit) Butonu <input type=”submit”> :
Verilerin işleneceği sunucu sayfasına verileri göndermek amacıyla kullanılır. Formun işleneceği sayfa Form etiketinde action özelliğinde belirtilmelidir. Aşağıda Submit butonunun kullanımını gösteren bir örnek ve aekran çıktısı bulunmaktadır.
|
1 2 3 4 5 6 7 8 9 |
<form action="action_page.php"> Ad:<br> <input type="text" name="ad" value="Ahmet"><br> Soyad:<br> <input type="text" name="soyad" value="Cansever"><br><br> <input type="submit" value="GÖNDER"> </form> |
Ekran Çıktısı:
Reset Butonu <input type=”reset”> :
<input type=”reset”> tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar.
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action="/action_page.php"> Ad:<br> <input type="text" name="ad" value="Mickey"> <br> Soyad:<br> <input type="text" name="soyad" value="Mouse"> <br><br> <input type="submit" value="Gönder"> <input type="reset"> </form> |
Ekran Çıktısı:
<form> etiketinin alabileceği bazı özellikleri inceleyelim.
Action özelliği :
<form action=”/action_page.php“>
Action özniteliği, form gönderilirken yapılacak işlemi tanımlar.
Normal olarak, kullanıcı, gönder düğmesini tıklattığında form verisi sunucu üzerindeki bir web sayfasına gönderilir.
Yukarıdaki örnekte, form verileri sunucudaki ‘/action_page.php’ adlı bir sayfaya gönderilir. Bu sayfa, form verilerini işleyen bir sunucu tarafı komut dosyası içerir.
Method Özelliği :
Method özniteliği, form verilerini gönderirken kullanılacak HTTP yöntemini belirtir. Bu yöntem GET yada POST olabilir.
|
1 2 3 |
<form action="/action_page.php" method="get"> |
|
1 2 3 |
<form action="/action_page.php" method="post"> |
Get ve Post Farkı Nedir ?
Form verisi gönderirken varsayılan yöntem GET’tir.
Ancak, GET kullanıldığında, gönderilen form verileri sayfa adres alanına görünür. Bu yüzden Hassas bilgileri gönderirken GET kullanılmamalıdır!
GET, boyut sınırlamaları da olduğu için kısa, hassas olmayan, miktarda veri için uygundur.
Form verileri hassas veya kişisel bilgiler içeriyorsa daima POST kullanılmalıdır. POST yöntemi, gönderilen form verilerini sayfa adresi alanına görüntülemez. Ayrıca POST hiçbir boyut sınırlamasına sahip değildir ve büyük miktarda veri göndermek için kullanılabilir.
Form Verilerini Gruplama <fieldset> :
Form içindeki elemanları gruplamak için kullanılır.
<fieldset> etiketi ilgili verileri bir formda gruplamak için kullanılır.
<legend> etiketi ise <fieldset> öğesi için bir başlık tanımlar.
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action="/action_page.php"> <fieldset> <legend>Personel Bilgileri :</legend> Adı:<br> <input type="text" name="ad" ><br> Soyadı:<br> <input type="text" name="soyad" ><br><br> <input type="submit" value="Gönder"> </fieldset> </form> |
Ekran Çıktısı:
Select Etiketi <select>:
<select> etiketi açılır liste kutusu oluşturmak için kullanılır. kullanımı aşağıdaki gibidir.
|
1 2 3 4 5 6 7 8 |
<select name="dersler"> <option value="web">Web Tasarım</option> <option value="veri">Veri Tabanı</option> <option value="grafik">Grafik Animasyon</option> <option value="protem">Programlama Temelleri</option> </select> |
Yukarıdaki HTML kodlarını yazıp sayfamızı görüntülediğimizde aşağıdaki ekran çıktısı oluşacaktır.
Kodları inceleyelim.
<option> etiketi seçim yapılabilecek elemanları tanımlamak için kullanılır.
Önceden seçilmiş bir seçeneği tanımlamak için, selected özelliği kullanılır. Yani yukarıdaki örnekteki listede varsayılan olarak Veri Tabanı öğesinin gelmesini istersek kodlarımızı aşağıdaki şekilde düzenlemeliyiz.
<textarea> Etiketi :
Formumuzda çok satırlı bir metin alanı kullanmamız gerektiğinde <textarea> etiketini kullanabiliriz. <textarea> etiketinde rows ve cols özellikleri kullanılabilir.
Rows özelliği, bir metin alanında görünür satır sayısını belirtir.
Cols özelliği, bir metin alanının görünür genişliğini belirtir.
Örnek:
|
1 2 3 4 5 |
<textarea name="mesaj" rows="10" cols="30"> </textarea> |
HTML Form Örnekleri Sayfasına Gitmek İçin TIKLA
