HTML5 form Elemanları
Web sayfalarına veri girişi için kullanılan input, select, textarea, buton ve HTML5 ile birlikte gelen yeni form elemanlarıyla ilgili bilgiler yer alıyor.
HTML <input> etiketi
Form elemanlarından en önemlisi <input> etiketidir.
<input> etiketi type özelliğine göre metin alanı, şifre alanı, onay kutusu, … gibi görünür.
Detaylı bilgi için HTML5 input Tipleri ve HTML5 input Özellikleri yazılarına bakabilirsiniz.
HTML select etiketi
<select> etiketi açılır menü tanımlar.
<select name="meyveler">
<option value="elma">Elma</option>
<option value="armut">Armut</option>
<option value="portakal">Portakal</option>
<option value="karpuz">Karpuz</option>
</select><select> etiketi içindeki <option> etiketi açılır menü seçeneği tanımlar.
Varsayılan olarak açılır menüde ilk seçenek seçilir.
İstenilen seçeneğin seçili gelmesi için selected=”selected” özelliği <option> seçeneğine eklenebilir.
<option value="karpuz" selected="selected">Karpuz</option>HTML textarea etiketi
<textarea> etiketi çok satırlı veri girişi yapılabilen metin alanı tanımlar.
<textarea name="mesaj" rows="10" cols="30"></textarea><textarea> etiketi rows özelliği satır genişliği miktarını belirtir.
<textarea> etiketi cols özelliği sütun genişliğini miktarını belirtir.
HTML button etiketi
<button> etiketi tıklanabilir bir düğme-buton tanımlar.
<button type="button" onclick="alert('Merhaba!')">Buraya tıkla!</button>HTML5 form elemanları
HTML5 ile birlikte aşağıdaki form elemanları eklenmiştir.
- <datalist>
- <keygen>
- <output>
NOT: HTML5 desteklemeyen eski tarayıcılar yeni eklenen form elemanlarını göstermez.
HTML5 datalist etiketi
<datalist> etiketi <input> etiketi için önceden tanımlanmış seçenekleri girmemizi sağlar.
Kullanıcılar için <input> açılır menüsünde <datalist> seçenekleri listelenir.
Seçenekleri <input> etiketinde görüntülemek için <input> etiketinin list özelliği ile <datalist> etiketinin id özelliği aynı olması yeterli olacaktır.
<input list="meyveler">
<datalist id="meyveler">
<option value="Elma" />
<option value="Armut" />
<option value="Portakal" />
<option value="Karpuz" />
</datalist>HTML5 keygen etiketi
HTML5 <keygen> etiketi kullanıcı kimlik doğrulaması için kullanılır.
<keygen> etiketi iki adet anahtar-değer oluşturur.
Form sunucuya gönderildiğinde açık ve gizli şifre oluşturur.
Gizli şifre bilgisayarda saklanır açık şifre sunucuya gönderilir.
Gizli şifre gelecekte kullanıcının kimliğini doğrulamak için kullanılır.
<form action="giris.php">
Kullanıcı Adı: <input type="text" name="kullanici" /> <br />
Şifreleme: <keygen name="sifreleme" /><br />
<input type="submit" value="Gönder" />
</form>HTML5 output etiketi
HTML5 <output> etiketi bir hesaplama veya komut sonucunu belirmek için kullanılır.
<form action="hesapla.php" onchange="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50" />
100 +
<input type="number" id="b" name="b" value="50" />
=
<output name="x" for="a b"></output>
<br /><br />
<input type="submit" value="Gönder "/>
</form>HTML5 Derslerine buradan ulaşabilirsiniz…
Hayırlı günler dilerim.