Fieldset в html: Тег | htmlbook.ru – Тег | HTML справочник

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

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

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

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

Атрибуты

АтрибутЗначениеОписание
disableddisabledЯвляется логическим атрибутом, если он установлен, то группа связанных элементов формы (HTML тег <form>) должна быть отключена. Элементы формы при этом получают серый задний фон. Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено опция неактивна. Атрибут имеет ограниченную поддержку в Internet Explorer (описание внутри).
formform_id Указывает один или несколько идентификаторов форм(id) к которым элемент принадлежит. В случае если указывается несколько идентификаторов, то необходимо разделять их между собой пробелом.
Атрибут имеет ограниченную поддержку браузерами
.
nametext Задает имя для элемента. Применение атрибута не отображается в браузере, но может быть использовано в работе скриптов. Атрибут не поддерживается браузерами 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.

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

disabled HTML5
Если этот логический атрибут установлен, все элементы управления формой, вложенные в
<fieldset>
будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму <form>, в отличие от атрибута disabled на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По-умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента <legend> не будут отключены.
form HTML5
Этот атрибут принимает значение атрибута id элемента <form>, с которой вам нужно связать <fieldset>, даже если он находится вне формы.
name HTML5
Имя, связанное с группой. Примечание: Заголовок для устанавливается первым <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
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
fieldsetChrome Полная поддержка Да
Полная поддержка
Да
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Edge Полная поддержка 12
Полная поддержка 12
Замечания Does not support flexbox and grid layouts within this element. See bug 4511145.
Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка Да
Полная поддержка Да
Замечания Does not support
flexbox
and grid layouts within this element. See bug 262679.
Safari Полная поддержка ДаWebView Android Полная поддержка Да
Полная поддержка Да
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Chrome Android Полная поддержка Да
Полная поддержка Да
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Firefox Android Полная поддержка ДаOpera Android Полная поддержка Да
Полная поддержка Да
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Полная поддержка Да
Замечания Does not support flexbox and grid layouts within this element. See bug 262679.
disabledChrome Полная поддержка ДаEdge Частичная поддержка 12
Частичная поддержка 12
Замечания Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
Firefox Полная поддержка ДаIE Полная поддержка Да
Полная поддержка Да
Замечания Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].
Opera Полная поддержка 12Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android ? Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да
formChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
nameChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка Да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:
  1. <fieldset>
  2. <legend>Favourite colour</legend>
  3. <input type="radio" name="fav-col" id="fav-col-1" value="red">
  4. <label for="fav-col-1">Red</label>
  5. <input type="radio" name="fav-col" id="fav-col-2" value="green">
  6. <label for="fav-col-2">Green</label>
  7. <input type="radio" name="fav-col" id="fav-col-3" value="blue">
  8. <label for="fav-col-3">Blue</label>
  9. </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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия: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 определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
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> и для группировки элементов форм

Твой код:
<html> <head> <title></title> </head> <body> <form action=""> <fieldset title="объекты в рамке"> <label for="inpSearch">Найти:</label> <input name="inpSearch" value="чертежи сверхсекретного истребителя"/> <button type="button">искать</button> </fieldset> </form> </body> </html> Сделай код и жми тут

Результат:
большой полигон

Отправить ответ

avatar
  Подписаться  
Уведомление о