Neden bir alan kümesi etiketine ihtiyacımız var?

Neden bir <fieldset>etikete ihtiyacımız var ? Hangi amaca hizmet ederse et, muhtemelen form etiketinin bir alt kümesidir.

W3Schools hakkında bazı bilgiler aradım:

• <fieldset>Etiket bir formda bir grup ile ilgili elemanlar için kullanılır.
• <fieldset>Etiketi, ilgili elemanların etrafında bir kutu çizer.

"Ne yapıyor" için "şartnamede niçin var olduğunu" yanlış anlayanlar için daha fazla açıklama. Çizim kısmının alakasız olduğunu düşünüyorum ve neden sadece ilgili bazı öğeleri bir formda gruplamak için özel bir etikete ihtiyacımız olduğunu anlamıyorum.

En açık, pratik örnek:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

Bu, her radyo düğmesinin etiketlenmesine izin verirken, bir bütün olarak grup için bir etiket sağlar. Bu, özellikle kontrollerin ve efsanelerinin görsel sunumla ilişkilendirilemeyeceği yerlerde yardımcı teknolojinin (ekran okuyucu gibi) kullanıldığı yerlerde önemlidir.

Alan kümesinin başka bir özelliği, devre dışı bırakılmasının içindeki tüm alanları devre dışı bırakmasıdır.

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

Erişilebilirlik için gereklidir.

Çıkış: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

HTML 4 öğeleri fieldsetve legendbirçok farklı ilgi alanı içeren büyük bir formu tablo kullanmadan mantıklı bir şekilde düzenlemenize ve düzenlemenize olanak tanır. fieldsetEtiket seçilen elemanların etrafında kutuları oluşturmak için kullanılabilir ve legendetiket bu elementlere bir başlık verecektir. Bu şekilde form öğeleri belirlenmiş kategoriler halinde gruplandırılabilir.

Farklı tarayıcılar varsayılan fieldsetkenarlığı farklı şekillerde görüntüleyebilir. Basamaklı Stil Sayfaları, kenarlığı kaldırmak veya görünümünü değiştirmek için kullanılabilir.

Açıklandığı gibi burada , bu etiketin amacı formunun örgüte netlik sağlamak ve dekorasyon formu elemanlarına bir tasarımcı daha kolay erişim sağlamaktır.

Fieldset, formlardaki öğeleri mantıklı bir şekilde düzenler, ancak işitsel tarayıcılar kullananların erişilebilirliğini de geliştirir. Fieldset kullanışlıdır ve bu nedenle geçmişte birçok uygulamada oldukça popülerdi, bu yüzden html'de de uyguladılar.

Radyolarınızı fieldset ile çevrelediğinizde ve radyo düğmesi giriş etiketlerinize kimlik eklemediğinizde, fieldset tarafından temsil edilen grubun tek bir öğe gibi tabchain'e eklendiğini beğendim.

Bu, bir formda sekmenize izin verir ve bir alan kümesine ulaştığınızda, seçilen radyoyu değiştirmek için ok tuşlarını kullanabilir ve işiniz bittiğinde sekme yapabilirsiniz.

Ayrıca, erişilebilirliği de unutmayın. Ekran okuyucular, formunuzu anlamak ve kullanıcıya bir tür doğal yolla okuyabilmek için fieldset + legend'e ihtiyaç duyar. Gören kullanıcıların görmesini istemiyorsanız efsaneyi yok etmekten çekinmeyin. Efsaneyi CSS ile doğru şekilde yerleştirmek ve şekillendirmek bazen özellikle eski tarayıcılarda çapraz tarayıcılardır, bu yüzden efsane etiketini ekran okuyucu kullanıcıları için görünmez yapıyor ve etiket gibi stilize ayrı, aria-hidden = "gerçek" bir yayılma alanı ekliyorum görüşlü kullanıcılar, stilleri kolaylaştırır ve erişilebilir olmasını sağlar.

CSS stili ve etiketleri kontrollerle ilişkilendirmek için kullanışlı buluyorum. Bir grup alanın etrafına görsel bir kap koymayı ve etiketleri hizalamayı kolaylaştırır.

Ben büyük bir form var ve bir tür form sihirbazında ayrılmak istediğinizde, form girişleri gruplandırmak için alan kümeleri kullanın.

Aynı sorular burada SO üzerinde cevaplanmıştır .

Sadece bazı avantajları özetlemek gerekirse:

HTML  <fieldset> öğesi, <label>bir web formunda MDN tarafından tanımlandığı şekliyle çeşitli denetimlerin yanı sıra etiketleri ( ) gruplamak için kullanılır .

Başka bir deyişle: Alan kümesi etiketi, formlarınızın daha açıklayıcı olması için alan kümelerini mantıksal olarak gruplandırmanıza olanak tanır. Bu nedenle, isteğe bağlı olarak ortak bir ad altında gruplandırılmış bir dizi form denetimi.

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

Bir alan kümesi kullanmanın " avantajları " şunlardır:

• verilerinizi (bu durumda bir form) mümkün olan en anlamsal şekilde işaretlemenize olanak tanır . Alanlarınızı bir alan kümesine yerleştirmenin, alanlarınızı bir div'a yerleştirmekten daha açıklayıcı olduğunu düşünün. Div, alanlar arasındaki ilişki hakkında hiçbir şey söylemez, bir alan kümesi size bir ilişki olduğunu söyler.
• devre dışı kullanarak , tek seferde ve tüm içeriğini devre dışı bırakmanızı sağlar.
• erişilebilirliğe yardımcı olur

Bana gelince, <fieldset>...</fieldset>elementin en büyük avantajlarından biri , formun içinde <form>...</form>olmasa bile bağlamı koruma yeteneğidir <fieldset>...</fieldset>.

Örneğin, aşağıdaki form:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

aşağıdaki biçimle anlamsal olarak aynıdır:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>