HTML :: Тег <fieldset>

В HTML тег <fieldset> (от англ. form field set – набор полей формы) используется для объединения элементов формы в группы по каким-либо признакам (например, текстовые поля можно отделить от полей ввода логина и пароля, а также от флажков). Браузеры по умолчанию отображают <fieldset>, как блочный элемент, и для наглядности выделяют область, ограниченную элементом, рамкой.

Синтаксис

	<form>
	  <fieldset>...</fieldset>		
	</form>
	
	Закрывающий тег: обязателен.

Атрибуты

disabled – данный логический атрибут блокирует элементы формы в группе. Это может потребоваться, если возникнет необходимость активировать данную группу элементов формы только после выполнения установленной последовательности действий. Атрибут по умолчанию выключен и значений не принимает.
form – связывает группу с формой, в качестве значения принимая соответствующее значение атрибута id формы. Это может потребоваться в случае, когда группа расположена за пределами формы.
name – имя группы, по которому к элементам группы можно обращаться, например, через скрипты.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/fieldset

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<base href="https://site.name/">
	<title>Пример №1</title>
</head>
<body>

<form action="php/registration.php" method="POST" name="reg_form">
 
<fieldset>

 <!-- Создаем заголовок группы -->
 <legend>Ваш любимый напиток: </legend>
 
 <!-- Элементы группы -->
 <label><input type="radio" name="drink" value="coffee" checked>Кофе</label><br>
 <label><input type="radio" name="drink" value="green_tea">Зеленый чай</label><br>
 <label><input type="radio" name="drink" value="black_tea">Черный чай </label><br>

</fieldset><br><br>
 
<button type="submit" disabled>Отправить</button>  
</form>	
	
</body>
</html>

Пример №1