HTML тег <fieldset>

Поддержка браузерами

Описание

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

Элемент <fieldset> часто используется совместно с элементом <legend>, который определяет для него заголовок.

Атрибуты

disabled:

Указывает, что группа взаимосвязанных элементов формы должна быть отключена. Это можно использовать в случае, когда форма должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Пример » Значения для логического атрибута disabled можно задавать следующими способами:

<fieldset disabled>
<fieldset disabled="disabled">
<fieldset disabled="">

Примечание: атрибут disabled не поддерживается в браузерах IE и Safari.

form:

Указывает один или несколько идентификаторов форм, разделенных пробелами, которым принадлежит набор связанных элементов.

<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.asp" method="get" id="form1">
    Какой ваш любимый цвет? <input type="text" name="fav_color"><br>
    <input type="submit">
  </form>

  <p>Элемент fieldset находится вне формы, но является ее частью.</p>

  <fieldset form="form1">
    <legend>Личные данные:</legend>
    Имя: <input type="text" name="username"/><br>
    Email: <input type="text" name="usermail"><br>
  </fieldset>

</body>
</html>

Примечание: атрибут form работает только в браузере Opera.

name:

Указывает имя для группы элементов, объединенных с помощью <fieldset>. Имена обычно используются в JavaScript для ссылок на элементы или для ссылки на данные формы после ее отправки. Пример »

Примечание: атрибут name не поддерживается в IE.

Тег <fieldset> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

fieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (зависит от браузера);
}

Пример

<form>
  <fieldset>
    <legend>Персональные данные:</legend>
    Имя: <input type="text"><br>
    mail: <input type="text"><br>
    Дата рождения: <input type="text">
  </fieldset>
</form>

Результат данного примера в окне браузера: