Главная страница   /   12.6. Группировка элементов формы (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

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

При создании более сложных форм может показаться удобной группировка некоторых элементов, что можно сделать с помощью элемента 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