<fieldset> HTML

Become a Patron!

Тег <fieldset> (от англ. field set - набор полей) предназначен для группирования элементов формы.

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

Браузеры для повышения наглядности отображают результат использования элемента <fieldset> в виде рамки. Её вид зависит от операционной системы, а также используемого браузера.

Синтаксис

<form>
  <fieldset>...</fieldset>
</form>

Закрывающий тег обязателен.

WAI ARIA

Нет значения role по-умолчанию.

Допустимые значения role:

  • group
  • none
  • presentation

Атрибуты

  • disabled - Блокирует поля формы в группе.
  • form - Связывает группу с формой.
  • name - Задает имя набора полей.

Также для этого элемента доступны универсальные атрибуты и события.

disabled

Блокирует доступ к элементам формы, расположенным внутри тега <fieldset>. Поля формы при этом отображаются так, словно к каждому из них добавлен атрибут disabled.

Синтаксис

    <fieldset disabled>...</fieldset>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

form

Связывает группу <fieldset> с формой по её идентификатору. Такая связь необходима в случае, когда элемент не располагается внутри <form>, например, при создании её программно. Если установлено связывание <form> и <fieldset> между собой, то можно отправлять данные на сервер и работать с формой, как если бы элементы находились внутри формы.

Синтаксис

<fieldset form="<идентификатор>">
...
</fieldset>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

Спецификации

Примеры

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>FIELDSET</title>
    </head>
    <body>  
        <form action="handler.php">
            <fieldset>
                <legend>Работа со временем</legend>
                <input type="checkbox"> создание пунктуальности (никогда не будете никуда опаздывать);<br>
                <input type="checkbox"> излечение от пунктуальности (никогда никуда не будете торопиться);<br>
                <input type="checkbox"> изменение восприятия времени и часов.
                <p><input type="submit"></p>
            </fieldset>
        </form> 
    </body>
</html>