Группировка элементов формы

При создании более сложных форм может показаться удобной группировка некоторых элементов, что можно сделать с помощью элемента fieldset. В таблице 12-8 представлен элемент fieldset.

Таблица 12-8: Элемент fieldset

Элемент	`fieldset`
Тип элемента	Потоковый
Разрешенные родительские элементы	Любой элемент, который может содержать потоковые элементы, обычно потомок элемента `form`
Локальные атрибуты	`name`, `form`, `disabled`
Содержание	Опционально элемент `legend`, за которым следует потоковый контент
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	В HTML5 был добавлен атрибут `form`. См. раздел "Работа с элементами вне формы" далее этой главе для информации по этому атрибуту
Соглашение по стилям	`fieldset { display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-start: 0.75em; padding-end: 0.75em; padding-after: 0.625em; border: 2px groove; }`

Вы можете увидеть, как используется элемент fieldset, в листинге 12-12. Я добавил в этот пример дополнительные элементы input, чтобы показать, как fieldset может быть применен к подмножеству элементов в форме.

Листинг 12-12: Использование элемента fieldset

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<fieldset>
			<p>
				<label for="name">Name:
					<input id="name" name="name" /></label></p>
			<p>
				<label for="name">City:
					<input id="city" name="city" /></label></p>
		</fieldset>
		<fieldset>
			<p>
				<label for="fave1">#1:
					<input id="fave1" name="fave1" /></label></p>
			<p>
				<label for="fave2">#2:
					<input id="fave2" name="fave2" /></label></p>
			<p>
				<label for="fave3">#3:
					<input id="fave3" name="fave3" /></label></p>
		</fieldset>
		<button>Submit Vote</button>
	</form>
</body>
</html>

Я использовал элемент fieldset для группировки двух элементов input, которые собирают информацию о пользователе, и другой fieldset для группировки трех элементов input, которые позволяют пользователю голосовать за три его любимых фрукта. Вы можете увидеть, как браузер отображает стили по умолчанию для элемента fieldset, на рисунке 12-8.

Рисунок 12-8: Использование элемента fieldset для группировки элементов input

Добавление описательной метки для элемента fieldset

Мы сгруппировали наши элементы input, но у нас все еще нет контекста для пользователей. Это можно исправить, если добавив для каждого из элементов fieldset элемент legend. В таблице 12-9 представлен элемент legend.

Таблица 12-9: Элемент legend

Элемент	`legend`
Тип элемента	N/A
Разрешенные родительские элементы	Элемент `fieldset`
Локальные атрибуты	Нет
Содержание	Фразовый контент
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	Нет
Соглашение по стилям	`legend { display: block; padding-start: 2px; padding-end: 2px; border: none; }`

Элемент legend должен быть первым дочерним для элемента fieldset, как показано в листинге 12-13.

Листинг 12-13: Использование элемента legend

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<fieldset>
			<legend>Enter Your Details</legend>
			<p>
				<label for="name">Name:
					<input id="name" name="name" /></label></p>
			<p>
				<label for="name">City:
					<input id="city" name="city" /></label></p>
		</fieldset>
		<fieldset>
			<legend>Vote For Your Three Favorite Fruits</legend>
			<p>
				<label for="fave1">#1:
					<input id="fave1" name="fave1" /></label></p>
			<p>
				<label for="fave2">#2:
					<input id="fave2" name="fave2" /></label></p>
			<p>
				<label for="fave3">#3:
					<input id="fave3" name="fave3" /></label></p>
		</fieldset>
		<button>Submit Vote</button>
	</form>
</body>
</html>

На рисунке 12-9 показано, как браузер отображает элементы legend.

Рисунок 12-9: Использование элемента legend

Отключение группы элементов input при помощи элемента fieldset

Ранее в этой главе я показал вам, как отключить отдельные элементы input. Вы также можете отключить несколько элементов input за один шаг, если примените атрибут disabled к элементу fieldset. Когда вы это сделаете, все элементы input, содержащиеся в fieldset, будут отключены, как показано в листинге 12-14.

Листинг 12-14: Отключение элементов input с использованием элемента fieldset

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<fieldset>
			<legend>Enter Your Details</legend>
			<p>
				<label for="name">Name:
					<input id="name" name="name" /></label></p>
			<p>
				<label for="name">City:
					<input id="city" name="city" /></label></p>
		</fieldset>
		<fieldset disabled>
			<legend>Vote For Your Three Favorite Fruits</legend>
			<p>
				<label for="fave1">#1:
					<input id="fave1" name="fave1" /></label></p>
			<p>
				<label for="fave2">#2:
					<input id="fave2" name="fave2" /></label></p>
			<p>
				<label for="fave3">#3:
					<input id="fave3" name="fave3" /></label></p>
		</fieldset>
		<button>Submit Vote</button>
	</form>
</body>
</html>

На рисунке 12-10 вы можете увидеть результат отключения элементов input.

Рисунок 12-10: Отключение элементов input с использованием элемента fieldset

12.7. Использование элемента button

или RSS канал: