Синтаксис

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

Описание

Тег <fieldset> (от англ. form field set — набор полей формы) предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных, например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.

Тег <fieldset> добавляет рамку вокруг связанных элементов.

Внимание!

Для правильной работы тег <fieldset> помещают в тег <form> для сбора пользовательского ввода. Указывают заголовок тегом <legend> и чаще всего используют тег <input> для создания различных пунктов.

Атрибуты, которые можно использовать в теге <fieldset>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут Значение Описание
disabled disabled

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

form id формы

Указывает, к какой форме принадлежит набор полей

name text

Указывает имя для набора полей

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег fieldset</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Изучение программирования</legend>
            <input type="radio" id="html" name="fav_language" value="HTML">
            <label for="html">HTML</label><br>
            <input type="radio" id="css" name="fav_language" value="CSS">
            <label for="css">CSS</label><br>
            <input type="radio" id="javascript" name="fav_language" value="JavaScript">
            <label for="javascript">JavaScript</label><br>
            <input type="checkbox" id="sub">
            <label for="sub">Подписаться на обновления</label><br>
            <label for="fname">Ваше имя:</label><br>
            <input type="text" id="fname" name="fname">
        </fieldset>
    </form>
</body>
</html>

Отображение в браузере:

Изучение программирования


 

Параметры CSS по умолчанию

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 (зависит от браузера);

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

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<fieldset> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных

Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!

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