Добавление в форму меток
У нас есть форма, которая собирает данные от пользователя, но она не очень проста в использовании. Вы видите, как элемент 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.
