HTML'de Form Elemanları

HTML'de form etiketinin içerisine form elemanları yazarız ve bu şekilde formlarımızı oluştururuz. HTML'de bir formda olması gereken tüm etiketler mevcuttur.

<input> etiketi

HTML'de en sık kullanılan form elemanlarından biride <input> etiketidir. <input> form elemanı type="" parametresine aldığı değer ile farklı şekillerde görünebilir. Form input veri tipleri dersimizde farklı farklı veri tipleri göreceksiniz.

<input type="text" id="ad" name="ad">

<select> etiketi

HTML'de listeden bir öğe seçilmesini istediğimiz durumlarda <select> etiketi kullanılır. Listeye eleman eklemek için <option> etiketi kullanılır.

<label for="arabalar">Araba Seç:</label>
<select id="arabalar" name="arabalar">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="hyundai">Hyundai</option>
  <option value="audi">Audi</option>
</select>

Bu listelerde varsayılan olarak listedeki ilk eleman seçili gelir ve kullanıcı açılır listeden istediği öğeyi seçebilir.Varsayılan olarak başka bir eleman seçmek için selected niteliği kullanılır.

<option value="hyundai" selected>Hyundai</option>

<textarea> etiketi

HTML'de "textarea" etiketi çok satırlı metin girişi sağlar. Kullanıcıdan uzun karakterleri veriler almak için kullanılır.

<textarea name="mesaj" rows="10" cols="30">
  eminylmz.dev ile HTML öğreniyorum !
</textarea>

Örnekte görüldüğü üzere rows parametresi bir metin alanındaki görünür satır sayısını belirtir. Aynı şekilde cols parametresi bir metin alanının görünür genişliğini belirtir.

<fieldset> ve <legend> etiketleri

HTML'de <fieldset> etiketi, bir formdaki ilgili verileri gruplamak için kullanılır. <legend> etiketi ise <fieldset> öğesi için bir başlık tanımlar.

<form action="/kayit_ol.php">
  <fieldset>
    <legend>Kişisel  Bilgiler:</legend>
    <label for="ad">Adınız :</label><br>
    <input type="text" id="ad" name="ad" value="Kodlama"><br>
    <label for="soyad">Soyadınız :</label><br>
    <input type="text" id="soyad" name="soyad" value="Vakti"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

<datalist> etiketi

HTML'de <datalist> etiketi, bir <input> etiketi için önceden tanımlanmış seçeneklerin bir listesini verir. Kullanıcılar, veri girerken önceden tanımlanmış seçeneklerin bir açılır listesini göreceklerdir.
Oluşturduğumuz <input> etiketinin list parametresi ile <datalist> etiketinin id paramatersi aynı olmalıdır.

<form action="/islem.php">
  <input list="tarayici">
  <datalist id="tarayici">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Yukarıdaki tüm kodların taryıcıdaki çıktısı aşağıdaki gibi olacaktır.