HTML Dersleri 17 - Form Elemanları


Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Formlar adlı yazımızda  HTML’de Form kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 16 – Formlar linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'in önemli bir konusu olan formlar elemanları konusunu öğreneceğiz.

HTML 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.

HTML'deki Form Elemanları ;

  • input 
  • label 
  • select 
  • textarea
  • button
  • fieldset
  • legend
  • datalist
  • output
  • option
  • optgroup

HTML < 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.

Örnek Kullanım ;

<label for="ad">Adınız :</label>
 <input type="text" id="ad" name="ad">

Input etiketinin "type" parametresine göre farklı özelliklerini sonraki derslerimizde inceleyeceğiz.

HTML < 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. Listelerde gördüğümüz aynı mantık ile liste içindeki elemenları "option" etiketi ile belirleriz.

<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>

Çoklu Seçim Listesi 

HTML'de < select > etiketini kullanırken çoklu seçim yapmasını sağlayabilirsiniz. Bunun için "select" etiketine "multiple" niteliği eklenmelidir.

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

HTML < 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">
Kodlama Vakti 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.

HTML < 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="/aksiyon.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>

HTML < 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="/aksyion.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>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla