Шаг 168.
Библиотека jQuery.
Интерактивные формы. Компактные формы. Текст-заполнитель для полей

    На этом шаге мы рассмотрим создание формы для организации поиска на сайте.

    Элемент <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. Вид подписи после применения стилей

    На следующем шаге закончим изучение этого вопроса.




Предыдущий шаг Содержание Следующий шаг