Тег | HTML справочник
HTML тегиЗначение и применение
Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>).
Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон. Чтобы указать заголовок для элемента <fieldset> необходимо использовать тег <legend>.
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| disabled | disabled | Является логическим атрибутом, если он установлен, то группа связанных элементов формы (HTML тег <form>) должна быть отключена. Элементы формы при этом получают серый задний фон. Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено опция неактивна. Атрибут имеет ограниченную поддержку в Internet Explorer (описание внутри). |
| form | form_id | Указывает один или несколько идентификаторов форм(id) к которым элемент принадлежит. В случае если указывается несколько идентификаторов, то необходимо разделять их между собой пробелом. |
| name | text | Задает имя для элемента. Применение атрибута не отображается в браузере, но может быть использовано в работе скриптов. Атрибут не поддерживается браузерами Internet Explorer и Edge |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <fieldset></title> </head> <body> <form> <fieldset> <legend>Пожалуйста, представьтесь</legend> Имя: <input type = "text" name = "firstname" value = "Введите имя"> <br> <br> Фамилия: <input type = "text" name = "lastname" value = "Введите фамилию"> <br> <br> Мужчина <input type = "radio" name = "sex" value = "male" checked> Женщина <input type = "radio" name = "sex" value = "female"> <br> <br> <input type = "submit" name = "submit" value = "отправить"> </fieldset> </form> </body> </html>
В этом примере мы:
- Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
- Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
- Заключительный элемент это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).
Результат нашего примера в браузере:
Группировка элементов формы.Отличия HTML 4.01 от HTML 5
В HTML 5 были введены три новых атрибута для элемента.Значение 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 (может различаться в некоторых браузерах);
}
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиТег HTML группа полей
Тег <fieldset> в HTML используется для объединения нескольких элементов HTML формы в группу.
Элементы формы, объединенные в группу с помощью тега <fieldset>, как правило, выделяются браузерами с помощью квадратной рамки.
С помощью тега <legend> можно указать название группы (подпись).
С помощью атрибута disabled тега fieldset можно отключить сразу все поля в группе.
Тег <fieldset> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
<fieldset>контент</fieldset>Отображение в браузере
Пример использования группы полей <fieldset> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Пример использования группы полей fieldset</title>
</head>
<body>
<fieldset>
<legend>Контактные данные</legend>
ФИО: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Телефон: <input type="tel" name="phone">
</fieldset>
</body>
</html>Поддержка браузерами
Атрибуты тега fieldset
| Атрибут | Значения | Описание |
|---|---|---|
| disabled | не указывается / disabled |
Логический атрибут. Если указан, делает группу полей неактивной. Данные полей группы, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода в поля группы. |
| form | id формы |
Указывает на форму, к которой относится группа полей (поля группы будут привязаны к указанной форме). Используется, если группа полей находится вне HTML кода формы. Если группа полей находится внутри тега <form>, то использовать атрибут form не нужно, поля по умолчанию привязаны к форме, внутри которой находятся. Этот атрибут не поддерживается многими браузерами! Используйте атрибут form в тегах полей (элементов) формы. |
| name | текст |
Имя группы полей. |
Тег <fieldset> также, поддерживает глобальные HTML атрибуты.
: The Field Set element — Веб-технологии для разработчиков
Этот перевод не завершен. Пожалуйста, помогите перевести эту статью с английского
HTML-элемент <fieldset> используется для группировки нескольких элементов управления без веб-форм.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Пример выше показывает, как элемент <fieldset> группирует части HTML-формы, а вложенный элемент <legend> даёт заголовок для <fieldset>. Он может иметь несколько атрибутов, самый используемый из них form, который содержит id формы <form> на этой же странице. Этот артибут позволяет сделать <fieldset> частью формы <form> даже если он не находится внутри неё. Также вы можете отключить <fieldset> и всё его содержимое с помощью атрибута disabled.
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
disabledHTML5- Если этот логический атрибут установлен, все элементы управления формой, вложенные в
<fieldset>будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму<form>, в отличие от атрибутаdisabledна элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По-умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента<legend>не будут отключены. formHTML5- Этот атрибут принимает значение атрибута
idэлемента<form>, с которой вам нужно связать<fieldset>, даже если он находится вне формы. nameHTML5- Имя, связанное с группой. Примечание: Заголовок для устанавливается первым
<legend>внутри него.
Стилизация с CSS
Есть несколько особенностей стилизации <fieldset>.
По-умолчанию, значение свойства display равняется block, что создаёт блочный контекст форматирования. Если установить значение display как inline-элементу <fieldset>, это будет работать как inline-block, в ином случае, это будет работать как block. По-умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет min-inline-size: min-content по-умолчанию.
Если задан <legend>, он будет помещён поверх верхней границы. <legend> сжимается и переносится, также имеет свой контекст форматирования. Значение display блочное (например, display: inline работает как block).
Требуется перевод с четвёртого абзаца и ниже
Примеры
Простой fieldset
Этот пример показывает простой <fieldset>
<legend> и единственным элементом управления внутри.<form action="#">
<fieldset>
<legend>Simple fieldset</legend>
<input type="radio">
<label for="radio">Spirit of radio</label>
</fieldset>
</form>Отключенный fieldset
Этот пример показывает отключенный <fieldset> с двумя элементами управления внутри.
<form action="#">
<fieldset disabled>
<legend>Disabled fieldset</legend>
<div>
<label for="name">Name: </label>
<input type="text" value="Chris">
</div>
<div>
<label for="pwd">Archetype: </label>
<input type="password" value="Wookie">
</div>
</fieldset>
</form>Техническая сводка
Спецификации
Совместимость с браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
fieldset | Chrome Полная поддержка Да
| Edge Полная поддержка 12
| Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да
| Safari Полная поддержка Да | WebView Android Полная поддержка Да
| Chrome Android Полная поддержка Да
| Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да
| Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да
|
disabled | Chrome Полная поддержка Да | Edge Частичная поддержка 12
| Firefox Полная поддержка Да | IE Полная поддержка Да
| Opera Полная поддержка 12 | Safari Полная поддержка 6 | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android ? | Safari iOS Полная поддержка 6 | Samsung Internet Android Полная поддержка Да |
form | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
name | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
- Частичная поддержка
- Частичная поддержка
- Совместимость неизвестна
- Совместимость неизвестна
- Смотрите замечания реализации.
- Смотрите замечания реализации.
See also
- Другие связанные элементы:
Использование элементов fieldset и legend для группировки управляющих элементов HTML форм
Элементы fieldset и legend должны использоваться вместе для создания именованных групп связанных с точки зрения семантики полей ввода HTML форм. Это позволяет пользователю понять, как поля ввода связаны между собой.Как группировка представляется пользователю, зависит в основном от того, зрячий он или нет. Большинство графических браузеров по умолчанию рисуют рамку вокруг элемента fieldset и отображают legend вверху этой рамки, в то время как «читалки» проговаривают текст, который находится в legend, в начале каждого блока fieldset или перед каждым элементом управления, который находится внутри него. В результате — лучше делать его коротким и продумывать то, как будут сочетаться текст в legend и label, если их произнести вместе.
Вот пример использования fieldset для группировки radio:
- <fieldset>
- <legend>Favourite colour</legend>
- <input type=»radio» name=»fav-col» id=»fav-col-1″ value=»red»>
- <label for=»fav-col-1″>Red</label>
- <input type=»radio» name=»fav-col» id=»fav-col-2″ value=»green»>
- <label for=»fav-col-2″>Green</label>
- <input type=»radio» name=»fav-col» id=»fav-col-3″ value=»blue»>
- <label for=»fav-col-3″>Blue</label>
- </fieldset>
В общем: не используйте fieldset и legend если вы хотите обрамить рамочкой информационное наполнение страницы (От переводчика: весьма неожиданный вывод. Кто бы мог подумать, да?) Их следует использовать для логической группировки элементов управления в форме, всегда следует использовать оба элемента и текст в legend должен быть краток.
Дополнительные материалы:
Этот пост — заметка. Предыстория: Заметки для веб-разработчиков и веб-дизайнеров/верстальщиков.
Связанные заметки
Послесловие.
Мне интересна тема доступности веб-сайтов. Особенно для пользователей с ограничениями по зрению или отсутствием такового. Если кто то знает реально используемые такими людьми бесплатные скринридеры, статьи, которые описывают особенности работы с ними, любую информацию по этой тематике — пожалуйста напишите мне. А я по мере того как буду получать информацию сам — буду писать статейки, которые освещают данную проблематику.
О переводчике.
Я — Ворон. А Ворон это — я. Кое где известен, как Тихий Бес (Silent Imp).
Я вольнонаемный верстальщик, программист.
Очень люблю качественно верстать макеты.
А еще у меня есть маленький сайтик.
Переводами занимаюсь потому, что сам читаю эти статейки и иногда мне хочется сделать что-то хорошее окружающим меня людям. Надеюсь, что статейка доставит вам удовольствие или даже будет вам полезна.
Для подсветки синтаксиса использовался ресурс highlight.hohli.com/
Элементы fieldset и legend для формы на CSS
Это форма под информацию, где на ней можно написать 2 значение, это может быть название, и также ключевое слова, что все сделано на CSS. Некоторым безусловно такой дизайн знакомый, так как его можно увидеть под разные описание, или под информер со скриптами, где создан блок, что в самом обводе вписано название, но в здесь как уже сказано, можно несколько раз вписать его. Что по адаптивности, то все отлично сделано изначально, где будет корректно выводить на разных носителях, это как телефон самым небольшим экраном или планшет.Но больше всего его можно применить на официальном ресурсе, где не делать какой, то специальный раздел, а все вывести на стилях CSS, и для понятности, все красиво оформить в описание. Часто поля или элементы в ваших формах будут соответствовать другим объектам стилистики. В некоторых случаях они могут соответствовать коллекциям объектов домена. В этом последнем случае, с точки зрения пользовательских интерфейсов, вы можете динамически добавлять элементы в пользовательский интерфейс, как отличный пример добавление задач в список.
Иногда вам может понадобиться центрировать весь фрагмент текста за один раз, вместо того, чтобы одновременно ставить небольшие разделы. Где нужно сохранить селектор неповрежденным, где будет возможность под ключевые фразы поставить тег h3, как пример. При проверках пришлось немного добавить стилистики, чтоб увеличить название, также выставить размер шрифта.
1. Можно сравнить, как изначально шло, что потом пошли небольшие изменение. Где сам веб мастер может самостоятельно что-то добавить, чтоб сделать более арче или наоборот, все выставить под основной дизайн.
2. Так будет по умолчанию, только в сером виде, что палитру уже самому можно поставить, так как в стилях она прописана.
Приступаем к установке:
HTML
Код
<fieldset>
<legend>
<span>ZORNET.RU</span>
<span>Сайт для Вебмастера</span>
<span></span>
</legend>
<div>Здесь идет подробное лписание по тематике интернет ресурса.</div>
</fieldset>
CSS
Код
.dleverytaingun {min-width: 17em;
padding-left: 12px;
padding-right: 15px;
border: 2px solid #797676;
margin: 3em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mealitykadsets {
overflow: hidden;
width: 100%;
border-color: inherit;
}
.stryconnectivi {
float: left;
margin: 0 3px;
font-size: 17px;
font-weight: bold;
color: #0d5f1b;
}
.sibletosalarger {
float: right;
margin: 0 8px 0 9px;
font-size: 17px;
font-weight: bold;
color: #0b5417;
}
.kagkopam {
position: relative;
left: 3px;
display: block;
overflow: hidden;
border-bottom: 2px solid;
border-color: inherit;
margin: 7.5px 0 0 0;
}
.content {
padding: 1em 0;
}
Элемент представляет собой универсальный контейнер, который по умолчанию выставлен на 2 пикселя, где идет в темной гамме цвета. Это ничего не значит, пока вы не примените CSS к нему, но это полезно, если хотите применить тот же стиль к разделу своей страницы, в котором есть разные части. Так как в стилистике, вы сможете полностью поменять палитру и изменить саму форму, как вам нужно.
Есть несколько способов, где можно обернуть содержимое, это просто одно их многих, которое простое, где в то же время смотрится оригинально на любом тематическом сайте.
Демонстрация
seodon.ru | Теги HTML — Тег FIELDSET
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <FIELDSET> применяется для смыслового или тематического группирования элементов форм. Такое группирование используется для облегчения работы пользователей, позволяя быстрее и проще понимать назначение тех или иных частей формы.
Как правило, браузеры выделяют такие группы, обрамляя их рамкой. А также, осуществляя последовательную табуляцию (клавиша Tab) между группами и внутри каждой группы.
Атрибуты
Личные атрибуты: нет.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: формы.
Модель тега: block (блочный, уровня блока).
Должен содержать: не более одного тега <LEGEND>.
Может содержать: block-теги и/или inline-теги, обычный текст и спецсимволы HTML (мнемоники). Причем, в этом случае должен быть такой порядок указания в HTML-коде: сначала текст или мнемоники, затем «легенда» и в конце теги.
Открывающий тег: необходим. Закрывающий тег: необходим.
Синтаксис
<fieldset>содержимое</fieldset>Пример HTML: применение тега FIELDSET
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега FIELDSET</title>
</head>
<body>
<form action="files/questions.php">
<fieldset>
<legend>Ваше имя:</legend>
<input type="text" name="name" size="30">
</fieldset>
<fieldset>
<legend>Ваш пол:</legend>
<input type="radio" name="mankind" value="male">М
<input type="radio" name="mankind" value="female">Ж
</fieldset>
<fieldset>
<legend>Что вы любите?</legend>
<input type="checkbox" name="food" value="1">Чай
<input type="checkbox" name="food" value="2">Кофе
<input type="checkbox" name="dance" value="3">Потанцуем
</fieldset>
<div><input type="submit" name="ok" value="Отправить"></div>
</form>
</body>
</html>Результат примера
Результат. Применение тега FIELDSET.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
HTML тег fieldset | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 27.02.2009
Тег <fieldset> (с англ. набор полей) — тег-контейнер, предназначен для группировки элементов формы.
Блочный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<form>
<fieldset>...</fieldset>
</form>
Атрибуты
Основные Вспомогательные События
| acceskey | горячая клавиша (+Alt) для элемента. Отсутствует в спецификации HTML 4.01! |
|---|---|
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| id | уникальный индетификатор |
| lang | определяет язык отображаемого документа |
| onclick | щелчек на элементе |
| ondblclick | двойной щелчек на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
Пример
Группировка элементов формы
<form action="post">
<fieldset title="объекты в рамке">
<label for="inpSearch">Найти:</label>
<input name="inpSearch" value="чертежи сверхсекретного истребителя"/>
<input type="submit" value="искать"/>
</fieldset>
</form>
Рекомендации по использованию
- закрывающий тег обязателен (</fieldset>)
- обязательных атрибутов нет
- может содержать CDATA, строчные, блочные элементы и тег <legend>
- элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
- большинство браузеров выделяют блок рамкой
- тег <fieldset> может некорректно отображаться старыми браузерами
- рекомендуем использовать только внутри тега <form> и для группировки элементов форм