HTML Label Nedir?

HTML formlarında <label> etiketi, kullanıcıdan veri almak için kullanılan giriş elemanlarını (ör. metin kutuları, şifre alanları) daha erişilebilir ve kullanıcı dostu hale getirir. Yeni başlayanların genellikle göz ardı ettiği bu etiket, aslında birçok fayda sunar. Bu yazıda, <label> etiketinin ne olduğunu, neden kullanıldığını ve nasıl kullanıldığını öğrenelim.

1. <label> Nedir ve Neden Önemlidir?

<label>, bir form elemanını (örneğin bir metin kutusunu veya onay kutusunu) tanımlayan bir etikettir. Etiket ve giriş alanı arasında bir bağlantı oluşturur.

Neden Kullanılır?

1. Erişilebilirlik: Ekran okuyucular, bir etiketi okuyarak kullanıcıya hangi giriş alanının ne olduğunu bildirir. Örneğin, "Adınızı Girin" etiketi, ekran okuyucuda okunarak kullanıcıya bilgi sağlar.
2. Kullanıcı Deneyimi: Etikete tıklamak, giriş alanını otomatik olarak seçer. Bu, özellikle küçük ekranlarda veya tıklama doğruluğunun düşük olduğu durumlarda büyük bir avantajdır.
3. Daha Temiz Kod: Etiketler, form elemanlarını organize etmek ve anlamlandırmak için standart bir yöntem sağlar.

2. <label> Nasıl Kullanılır?

Bir <label>, genellikle iki yöntemle giriş elemanına bağlanabilir:

1. for ve id Özellikleri ile
2. Etiket İçine Yerleştirme

2.1. for ve id Özellikleri ile Bağlantı

Bu yöntemde, her giriş elemanına bir id verilir ve <label> etiketindeki for özelliği, bu id ile eşleştirilir.

<form>
  <!-- Kullanıcı Adı -->
  <label for="username">Adınızı Girin:</label>
  <input type="text" id="username" name="username">

  <!-- Şifre -->
  <label for="password">Şifrenizi Girin:</label>
  <input type="password" id="password" name="password">
</form>

2.2. Etiket İçine Yerleştirme

Giriş elemanı, doğrudan <label> etiketinin içine yerleştirilebilir. Bu durumda for ve id kullanmaya gerek kalmaz.

<form>
  <label>
    Adınızı Girin:
    <input type="text" name="username">
  </label>
</form>

Not: Genellikle for ve id yöntemi tercih edilir, çünkü bu yöntem form elemanlarını ve etiketleri ayrı ayrı stillendirmek için daha fazla esneklik sağlar.

3. Örnek Form

Aşağıda, tüm giriş alanları için etiketler eklenmiş bir form örneği bulunmaktadır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Label Kullanımı</title>
</head>
<body>
  <h1>Kullanıcı Formu</h1>
  <form>
    <!-- Kullanıcı Adı -->
    <p>
      <label for="username">Adınızı Girin:</label>
      <input type="text" id="username" name="username" placeholder="Adınız">
    </p>

    <!-- Şifre -->
    <p>
      <label for="password">Şifrenizi Girin:</label>
      <input type="password" id="password" name="password" placeholder="Şifre">
    </p>

    <!-- Renk Seçimi -->
    <p>
      <label for="color">Favori Renginizi Seçin:</label>
      <input type="color" id="color" name="color">
    </p>

    <!-- Yaş -->
    <p>
      <label for="age">Yaşınızı Girin:</label>
      <input type="number" id="age" name="age" placeholder="Yaş">
    </p>

    <!-- Gönder Butonu -->
    <button type="submit">Gönder</button>
  </form>
</body>
</html>

Çıktı:

Form, şu alanlardan oluşur:

• Kullanıcı Adı
• Şifre
• Favori Renk
• Yaş
• Gönder Butonu

4. Özet

<label> etiketleri, yalnızca bir metin eklemekten çok daha fazlasını yapar:

• Giriş elemanlarını açıklamak için netlik sağlar.
• Erişilebilirliği artırır.
• Kullanıcı deneyimini geliştirir.

Eğer bir form oluşturuyorsanız, her giriş elemanına mutlaka bir <label> eklemelisiniz. Bu hem kodunuzun okunabilirliğini artıracak hem de kullanıcılarınıza daha iyi bir deneyim sunacaktır.