HTML <label> etiketi

Tanım ve Kullanım

<label> label ögesi, input ögesine etiket (işaret) tanımlar.

label ögesi kullanıcıya herhangi bir özel etki sunmaz. Ancak, fare kullanıcılarına erişilebilirliği iyileştirir. Eğer label ögesi içindeki metni tıklarsanız, bu kontrolü tetikler. Yani, kullanıcı bu etiketi seçtiğinde, tarayıcı otomatik olarak etiketle ilgili form ögesine odaklanır.

<label> etiketin for özelliği İlgili ögenin id özelliği ile aynı olmalıdır.

<label> Etiket, birden fazla ögeye etiket (işaret) tanımlayabilir:

Yukarıdaki ögelerle label'ın doğru kullanımı aşağıdaki kullanıcılar için faydalı olacaktır:

  • Ekran okuyucu kullanıcıları (kullanıcı bir ögeye odaklandığında, etiket okur)
  • Çok küçük alanları (örneğin, onay kutuları) tıklamakta zorlanan kullanıcılar - çünkü kullanıcı tıkladığında <label> metni içeren elementlerde, kullanıcı tıklama alanını değiştirir (tıklama alanını genişletir)

Ayrıca bakınız:

HTML DOM Referans Kılavuzu:Label Nesnesi

Örnek

Üç label ile etiketlenmiş tek seçenek butonu:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Gönder">
</form>

Kendi Kendine Deneyin

İpucu ve Açıklamalar

İpucu:<label> for özelliği ilgili elementin id özelliği ile eşit olmalıdır ki bu elementler birbirine bağlanabilsinler. Ayrıca, elementi <label> Element içinde etiketi elemente bağlar.

Özellik

Özellik Değer Açıklama
for Element id label'ın hangi form elementine bağlandığını tanımlar.
form Form id label alanının ait olduğu formu tanımlar.

Genel Özellikler

<label> Bu etiketler ayrıca HTML'deki Genel Özellikler.

olay özelliklerini destekler

<label> Bu etiketler ayrıca HTML'deki Olay Özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüler <label> Element:

label {
  cursor: default;
}

Kendi Kendine Deneyin

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek