На этом шаге мы рассмотрим создание формы для организации поиска на сайте.
Элемент <label> для полей форм является основным компонентом, обеспечивающим доступность веб-сайтов. Каждое поле должно иметь подпись, чтобы устройства чтения с экрана и другие вспомогательные устройства могли идентифицировать его назначение. Даже в разметке HTML элемент label помогает описывать поле:
<form id="search" action="search/index.php" method="get"> <label for="search-text">Поиск по сайту</label> <input type="text" name="search-text" id="search-text" /> </form>
Без дополнительного оформления подпись выводится непосредственно перед полем, как показано на рисунке 1.
Рис.1. Без дополнительного оформления подпись выводится непосредственно перед полем
Подпись не занимает много места, тем не менее в некоторых схемах верстки сайтов даже этот однострочный текст может оказаться слишком большим. Мы могли бы скрыть текст с помощью CSS, но тогда пользователь не смог бы определить назначение поля. Вместо этого мы будем использовать CSS, чтобы поместить подпись поверх поля, если имеется поддержка JavaScript, добавляя класс в форму поиска:
$(document).ready(function() {
var $search = $('search').addClass('overlabel');
});
В единственной строке мы добавили класс к форме поиска и сохранили селектор в переменной, чтобы к нему можно было обратиться позднее. Для оформления метки в таблице стилей определен класс overlabel:
.overlabel {
position: relative;
}
.overlabel label {
position: absolute;
top: 6px;
left: 13px;
color: #999;
cursor: text;
}
Мало того, что добавленный класс должным образом позиционирует подпись, он еще окрашивает текст подписи в серый цвет, чтобы она воспринималась как текст-заполнитель, как показано на рисунке 2.
Рис.2. Вид подписи после применения стилей
На следующем шаге закончим изучение этого вопроса.
