Группировка элементов формы при помощи тега <fieldset>
http://belarusweb.net
Основы создания сайтов

Группировка элементов формы при помощи тега <fieldset>.
Использование тега <legend> для создания заголовка полученной группы.

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

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

Использование элемента 'fieldset' показано в примере 6.10.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<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">Отправить</button>	
	</form>
</body>
</html>

Пример 6.10. Использование элемента 'fieldset'

Тег <legend>

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

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