html.okpython.net
HTML и CSS для начинающих

HTML :: Группировка элементов формы, теги <fieldset> и <legend>

Тег <fieldset> и его атрибуты

Как видим, элементов входящих в состав формы предостаточно. Поэтому иногда возникает необходимость объединения элементов в группы по каким-либо признакам, например, текстовые поля можно отделить от полей ввода логина и пароля, а также от флажков. Для этих целей существует элемент «fieldset», формирующийся парным тегом <fieldset> (от англ. form field set – набор полей формы). Для связи с формой, в случае расположения за ее пределами, используется атрибут form. Если нужно блокировать поля формы, содержащиеся внутри контейнера «fieldset», используется логический атрибут disabled. Это может потребоваться, если возникнет необходимость активировать данную группу элементов формы только после выполнения установленной последовательности действий. Также у элемента «fieldset» присутствует атрибут name. Кстати, браузеры по умолчанию отображают его, как блочный элемент, и для наглядности выделяют область, ограниченную элементом, рамкой.

Использование элемента «fieldset» показано в примере №1.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Элемент «fieldset»</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. Использование элемента «fieldset»

Тег <legend>

Для создания заголовка группы элементов формы, объединенной при помощи «fieldset», используется отдельный элемент «legend», который формируется парным тегом <legend> (от англ. legend – легенда, надпись). Текст, написанный внутри данного контейнера, как раз и становится заголовком, который отображается вверху и встраивается в рамку, которой ограничивается данная группа (см. пример №1).

Примеры использования форм можно посмотреть на соответствующей странице нашего учебного сайта №1.

Быстрый переход к другим страницам

▲
▼