Etiketli input

<label> ve <input> etiketlerinin nasıl eşleştirildiğini öğrenirsin.

Etiket ve alan eşleşmesi

Bir form alanı genelde iki parçadan oluşur: etiket (<label>) ve giriş alanı (<input>). Etiket, alanın ne istediğini söyler; giriş alanı ise kullanıcının yazacağı yerdir.

İkisini bağlamak için <label>'ün for özniteliğiyle <input>'un id özniteliğini aynı değere eşitlersin. Örnek: <label for="eposta">E-posta</label><input id="eposta">. Böylece etikete tıklamak da alanı odaklar.

id ve for eşleşmesi

id özniteliği bir öğeye sayfa içinde benzersiz bir ad verir. Bir formda her <input>'un kendine özgü bir id'si olmalıdır. <label>'ün for özniteliği de aynı adı taşır.

Örnek: <label for="ad">Adınız</label> ve <input id="ad" name="ad">. Burada for ve id aynı değere (ad) sahiptir; böylece ikisi bağlanır. name ise sunucuya giderken kullanılacak anahtardır.

Uygulama Etiketli input yaz

Form içine bir <label> ve bir <input> ekle. Etiketin metni İsminiz olsun. for ve id özniteliklerini isim değerine eşitle.

Örnek çözümü göster

<form>
  <label for="isim">İsminiz</label>
  <input id="isim" name="isim">
</form>

Kendini test et

Bir <label> etiketini <input> ile bağlamak için hangi öznitelik kullanılır?
- for
- name
- value
- type
Cevabı göster

for — Doğru. label'in for özniteliği, input'un id'sine eşitlenince eşleşirler.

Etiketin açılışını yaz

<____ for="eposta">E-posta</label>
<input id="eposta">

Cevabı göster

<label for="eposta">E-posta</label>
<input id="eposta">

Etiketi rolüyle eşleştir

for

label'i input'a bağlar
id

input'un benzersiz adı
<label>

Alan etiketi
<input>

Tek satırlı alan

Sıradaki ders: Input türleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler