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.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir