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

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

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

Адам Фриман

12.3. Добавление в форму меток

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

Рисунок 12-4: Форма из примера

Очевидной проблемой является полное отсутствие пояснений для пользователей, которые должны были бы читать исходный HTML, чтобы выяснить, для чего нужно каждое из текстовых полей. Эту проблему можно решить с помощью элемента label, который позволяет добавить некоторый контекст для каждого элемента в форме. В таблице 12-7 представлен элемент label.

Таблица 12-7: Элемент label
Элемент label
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовые элементы
Локальные атрибуты for, form
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 В HTML5 был добавлен атрибут form. См. раздел "Работа с элементами вне формы" далее этой главе для информации по этому атрибуту
Соглашение по стилям label { cursor: default; }

В листинге 12-9 показано, как можно предоставить пользователю некоторый контекст.

Листинг 12-9: Использование элемента label
<!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">
		<p>
			<label for="fave">Fruit:
				<input id="fave" name="fave" /></label></p>
		<p>
			<label for="name">Name:
				<input id="name" name="name" /></label></p>
		<button>Submit Vote</button>
	</form>
</body>
</html>

Я добавил label для каждого из элементов input. Обратите внимание, что я добавил атрибут id элементам input и использовать эти id в качестве значения для атрибутов for элементов label. Вот таким образом вы связываете метки с полями ввода, что делает обработку формы проще для скринридеров и других вспомогательных технологий. На рисунке 12-5 показано, как выглядят метки.

Рисунок 12-5: Добавление в форму меток

В листинге я разместил элементы input как содержание элементов label. Это не обязательно, и два элемента могут быть определены независимо друг от друга. При работе со сложными формами обычно элементы label определяются независимо от элементов input.

Внимание

Я добавил в форму несколько элементов p, чтобы сделать простенькую верстку. Я делаю так в большинстве примеров в этой главе, потому что так легче увидеть презентационное воздействие дополнений в HTML документе. Для создания хорошей верстки для элементов form можно использовать табличные функции CSS, которые я описал в главе 21. Элемент p описан в главе 9.