Каковы преимущества использования тега fieldset?

Question

В чем преимущества использования тега <fieldset>?

Я не совсем понимаю, для чего он используется.

Answer 1

Формы часто разбиваются на различные наборы полей.

Тег fieldset позволяет вам логически группировать наборы полей, чтобы ваши формы были более информативными.

Вы также заметите, что вы можете использовать fieldset для стилизации ваших форм и отображения этих логических связей между полями.

Точно так же, как формы, которые вы находите в «реальном» мире.

«Преимущества» использования набора полей заключаются в том, что они позволяют разметить ваши данные (в данном случае форму) наиболее семантическим способом из всех доступных. Учтите, что размещение ваших полей в fieldset является более информативным, чем размещение ваших полей в div. DIV ничего не говорит вам об отношениях между полями, набор полей говорит вам, что есть отношения.

Этот принцип аналогичен многим новым наборам тегов HTML5. <footer> например, говорит вам больше о значении данных внутри него по сравнению с неоднозначным <div>.

Answer 2

Если взглянуть на спецификацию HTML5 для разработчиков :

http://developers.whatwg.org/forms.html#the-fieldset-element

Элемент fieldset представляет собой набор элементов управления формынеобязательно сгруппированы под общим именем.

(если перейти по ссылке, вы получите гораздо больше информации)

В сочетании с элементом legend, это позволяет легко это сделать, что трудно воссоздать без использования fieldset / legend:

Answer 3

Позволяет сгруппировать набор связанных полей и дать им легенду.

<fieldset>
    <legend>Gender</legend>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label>
<fieldset>

<fieldset>
    <legend>Address</legend>

    <label for="line1">Line 1</label>
    <input name="address1" id="line1">

    <label for="line2">Line 2</label>
    <input name="address2" id="line2">

    <label for="town">Town</label>
    <input name="town" id="town">

    <label for="country">country/label>
    <input name="country" id="country">
</fieldset>

Answer 4

Вы группируете вещи вместе с ним. Это полезно, если вам нужно получить доступ к вещам в нем для CSS или JavaScript, и вы не хотите переживать из-за необходимости присваивать идентификаторы всем.

Кроме того, легенда выглядит довольно хорошо.