Fieldset ve legend

<fieldset> ve <legend> ile form grupları oluşturursun.

Fieldset ile alan gruplama

Uzun formları <div> ile bölümlemek yerine <fieldset> kullanırsın. Bu etiket ilgili alanları bir kutu içine alır; tarayıcı çoğu zaman kenarlık çizer. <fieldset> özellikle erişilebilirlik için değerlidir: ekran okuyucu içindeki denetimleri tek bir grup olarak okur.

Gruba başlık eklemek için <legend> etiketini kullanırsın. Legend, fieldset'in ilk çocuğu olmalı. Adından belli olur: kargoda teslimat adresi, ankette katılımcı bilgileri gibi grupları adlandırır.

Legend yerleşimi ve erişilebilirlik

Legend her zaman fieldset'in ilk çocuğu olarak yazılır; sonraya koymak geçersizdir. Tarayıcı legend'i grup çerçevesinin sol üst köşesine yerleştirir. Ekran okuyucu her alan okunduğunda başlığı tekrar söyleyerek bağlamı korur.

İç içe fieldset de mümkündür: büyük anketlerde ana grupları alt başlıklara bölersin. Ama çok derinleşmek karışıklık yaratır; iki seviye genelde yeter.

Uygulama Teslimat adresi grubunu yaz

Form içine bir <fieldset> ekle. İlk çocuk olarak bir <legend> yaz ve metni Teslimat adresi olsun. Legend'den sonra bir <label> ve bir <input> ekle. Etiketin metni Adresiniz olsun. for ve id özniteliklerini adres değerine eşitle. Son olarak </fieldset> ile kapat.

Örnek çözümü göster

<form>
  <fieldset>
    <legend>Teslimat adresi</legend>
    <label for="adres">Adresiniz</label>
    <input id="adres" name="adres">
  </fieldset>
</form>

Kendini test et

Fieldset ve legend ile ilgili hangisi yanlıştır?
- fieldset ilgili alanları bir araya getirir
- legend fieldset'in dışına da yazılabilir
- legend grup başlığı olarak görünür
- legend fieldset'in ilk çocuğu olmalıdır
Cevabı göster

legend fieldset'in dışına da yazılabilir — Doğru. Legend her zaman fieldset'in içinde, ilk çocuk olarak yazılır.

Gruba başlık veren etiketi yaz

<fieldset><____>Teslimat adresi</legend></fieldset>

Cevabı göster

<fieldset><legend>Teslimat adresi</legend></fieldset>

Etiketi rolüyle eşleştir

fieldset

İlgili alanları gruplar
legend

Gruba başlık verir
input

Veri alanı çizer
label

Alan adını yazar

Sıradaki ders: Datalist ve output

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler