Form kontrolleri için başlık bilgisini temsil etmek için kullanılmaktadır. Etiket içindeki yazıya tıklandığında form kontrolleri ile etkileşime geçerek form kontrolünün seçilmesini sağlar. Form elemanlarını oluştururken sıklıkla göz ardı edilmesine rağmen hemen hemen tüm form nesneleri ile kullanılması gerekir.
Bu etiketin en belirgin kullanım örneklerinden biri cinsiyet değerlerine ait radio butonlar yerine Kadın, Erkek yazan değerlere tıkladığımızda kontrollerin seçilmesini örnek verebiliriz.
Label etiketi form kontrolleri ile iki şekilde kullanılır.
- for attribute kullanarak
- form kontrollerini içine yazarak
for attribute ile kullanırken id değerini (önermemekle birlikte name de kullanılabilir) for ile belirtilerek kullanılır.
Örnek kullanım 1:
|
1 2 3 4 5 6 7 |
<!-- for attribute ile --> <form> <input type="checkbox" name="yuzme" id="yuzme" value="Yüzme"> <label for="yuzme"> Yüzmeyi Seviyorum</label> </form> |
yada
|
1 2 3 4 5 6 7 |
<!-- kontrolü label içine yazarak --> <form> <label><input type="checkbox" name="yuzme" id="yuzme" value="Yüzme"> Yüzmeyi Seviyorum</label> </form> |
Ekran çıktısı
Örnek kullanım 2:
|
1 2 3 4 5 6 7 8 9 |
<!-- for attribute ile --> <form> <input type="radio" name="cins" id="cins1" value="Kadın"> <label for="cins1"> Kadın</label> <br> <input type="radio" name="cins" id="cins2" value="Erkek"> <label for="cins2"> Erkek</label> </form> |
yada
|
1 2 3 4 5 6 7 8 9 |
<!-- form kontrolünü içine alarak --> <form> <label> <input type="radio" name="cins" id="cins1" value="Kadın"> Kadın</label> <br> <label><input type="radio" name="cins" id="cins2" value="Erkek"> Erkek</label> </form> |
Çok faydalı oldu. Teşekkürler. Label kullanımında böyle bir şeyin olduğunu yeni öğrendim.