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

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

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

4 ответов


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

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

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

Так же, как формы, которые вы найдете в" реальном " мире.

"преимущества" использования набора полей заключаются в том, что они позволяют вам отмечать ваши данные (в в этом случае форма) наиболее семантическим способом. Учтите, что размещение полей в наборе полей является более описательным, чем размещение полей в div. Div ничего не говорит вам о связи между полями, набор полей говорит вам, что есть связь.

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


если вы посмотрите на HTML5 spec для разработчиков:

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

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

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

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


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

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

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

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