Для чого нам потрібен тег набору полів?

Для чого нам потрібен <fieldset>тег? Яку б мету він не використовував, мабуть, підмножина тегу форми.

Я подивився деяку інформацію про W3Schools, де сказано:

• <fieldset>Тег використовується для угруповання пов'язаних елементів в формі.
• <fieldset>Тег малює рамку навколо пов'язаних елементів.

Більше пояснення для тих, хто помиляється "чому він існує в специфікації" для "що це робить". Я думаю, що частина малювання не має значення, і я не бачу, для чого нам потрібен спеціальний тег, щоб просто згрупувати пов'язані елементи у формі.

Найбільш очевидний, практичний приклад:

<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>

Це дозволяє мітити кожен перемикач, а також надавати мітку для групи в цілому. Це особливо важливо, коли застосовуються допоміжні технології (наприклад, зчитувач екрану), коли асоціація елементів управління та їх легенди не може бути зрозуміла візуальною презентацією.

Ще однією особливістю набору полів є те, що його відключення вимикає всі поля, що містяться в ньому.

<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>

Це потрібно для доступності.

Перевірте: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

HTML - 4 елементи fieldsetі legendдозволяє вам макет і організувати велику форму з безліччю різних областях , що представляють інтерес в логічному порядку без використання таблиць. fieldsetТег може бути використаний для створення коробки навколо обраних елементів і legendтеги дадуть заголовок до цих елементів. Таким чином елементи форми можуть бути об'єднані в ідентифіковані категорії.

Різні браузери можуть по-різному відображати fieldsetмежу за замовчуванням . Каскадні таблиці стилів можна використовувати для видалення рамки або зміни зовнішнього вигляду.

Як описано тут , мета цього тегу полягає в тому, щоб надати чіткість організації форми та дозволити дизайнеру легший доступ до прикраси елементів форми.

Fieldset логічно впорядковує елементи у формах, але це також покращує доступність для тих, хто використовує аудіо браузери. Fieldset є зручним, тому він був дуже популярним у минулому у багатьох програмах, тому вони також реалізовували його у html.

Мені подобається, що коли ви оточуєте ваші радіоприймачі набором польових даних, і ви не ставите ідентифікатори на вхідні теги радіо кнопок, тоді група, представлена ​​набором полів, додається до вкладки, як ніби це один елемент.

Це дозволяє вам перейти до форми через форму, і коли ви перейдете до набору полів, ви можете використовувати клавіші зі стрілками, щоб змінити вибране радіо, а потім виконати вкладку, коли закінчите.

Також не забувайте про доступність. Зчитувачі екрану потребують набору поля + легенди, щоб зрозуміти вашу форму та мати змогу прочитати її користувачеві якось природним чином. Не соромтесь зникати легенду, якщо ви не хочете, щоб її бачили видимі користувачі. Складання та стилізація легенди прямо за допомогою CSS іноді є непростими крос-браузерами, особливо із застарілими браузерами, тому я вважаю, що тег легенди є невидимим для користувачів читачів екрану та додає окремий, aria-hidden = "справжній" проміжок, стилізований як мітка для Зрячі користувачі роблять речі простими у стилі та зберігають речі доступними.

Я вважаю, що це зручно для стилів CSS та асоціювання міток із елементами управління. Це дозволяє легко розмістити візуальний контейнер навколо групи полів і вирівняти мітки.

Я використовую набори полів для групування вхідних форм, коли у мене є величезна форма і хочу розбити її у вигляді майстра форми.

На ці ж запитання відповіли тут, на SO.

Просто підсумовуючи деякі переваги:

Елемент HTML  <fieldset> використовується для групування декількох елементів керування, а також міток ( <label>) у веб-формі, як це визначено MDN .

Іншими словами: Тег набору полів дозволяє вам логічно групувати набори полів, щоб ваші форми були більш описовими. Отже, набір елементів керування форми необов'язково групується під загальною назвою.

<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>

" Перевагами " використання набору полів є:

• вони дозволяють розмітити ваші дані (у цьому випадку форму) найбільш семантично доступним способом. Вважайте, що розміщення полів у наборі полів більш описове, ніж розміщення полів у діві. Div не каже вам нічого про співвідношення між полями, набір полів говорить вам, що існує зв'язок.
• використовуючи вимкнено , він дозволяє вимкнути та весь його вміст за один раз.
• це корисно для доступності

Як на мене, однією з найбільших переваг <fieldset>...</fieldset>елемента є можливість збереження <form>...</form>контексту, навіть якщо<fieldset>...</fieldset> не знаходиться всередині форми.

Наприклад, така форма:

<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>

семантично ідентичний наступній формі:

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