Атрибут заполнителя HTML5

Одна из моих любимых новинок в HTML5 – возможность легко добавлять текст-заполнитель. Текст-заполнитель – это серый текст, который вы найдете в поле ввода и который служит для подсказки пользователям о том, какой ввод ожидается в этом поле. Как только пользователи начнут печатать в поле ввода, этот текст исчезнет.

В старые времена мы обычно делаем это с помощью JavaScript следующим образом;

В этой практике нет ничего плохого, но в HTML5 это проще.

HTML5 ввел новый атрибут с логическим именем; заполнитель. Вот пример:

Если мы просмотрим его в браузерах, то теперь у ввода должен быть серый текст, как показано ниже;
Несколько вещей, которые следует отметить: в соответствии со спецификацией, атрибут placeholder не должен использоваться в качестве альтернативы метке, и также предлагается, чтобы этот атрибут применялся только к типам ввода, для которых требуется текст, например, текст, пароль, поиск, электронная почта, textarea и тел.

Добавление заполнителя к типам ввода: радио и флажок не будут иметь никакого значения.
Заполнитель & CSS
Кроме того, стилизация текста-заполнителя с помощью CSS также возможна, но на момент написания этой статьи все еще ограничивается только браузерами Firefox и Webkit.

В следующем примере показано, как мы изменяем текст заполнителя на зеленый как в Webkit, так и в Firefox;

input :: – webkit-input-placeholder {
цвет: зеленый;
}
вход: -moz-placeholder {
цвет: зеленый;
}

Просто чтобы запомнить, что :: – webkit-input-placeholder и: -moz-placeholder будут влиять только на текст и не могут быть написаны параллельно.

input :: – webkit-input-placeholder, вход: -moz-placeholder {
цвет: зеленый;
}

Этот кусок кода не сработает.
Выбор атрибутов
CSS3 также пришел поддержать этот атрибут, введя [placeholder] селектор атрибутов;

вход[placeholder] {
граница: 1px сплошной зеленый;
}

В приведенном выше примере мы выбираем каждый вход с атрибутом placeholder и меняем границу на зеленую.
Совместимость браузера
Эта новая функция HTML5, что неудивительно, не поддерживается в старых браузерах и в настоящее время полностью поддерживается только в: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 и Internet Explorer 10 (который еще не был официально выпущен).
Заполнитель Polyfills
Тем не менее, если нам нужно отобразить заполнитель в старых браузерах, но при этом использовать атрибут заполнителя, мы можем использовать Polyfills. Существует много заполнителей заполнителей, но в этом примере мы собираемся использовать PlaceMe.js;

PlaceMe.js, как вы можете видеть из приведенного выше фрагмента кода, зависит от jQuery. Теперь, если мы рассмотрим это, например, в Internet Explorer 9, все вводимые данные должны теперь отображать текст-заполнитель.
Последняя мысль
Атрибут заполнителя HTML5, безусловно, облегчает добавление текста заполнителя. Теперь мы, веб-разработчики и дизайнеры, должны выбрать, какой метод использовать: JavaScript или HTML5.

Если вы считаете, что использование Polyfills и jQuery для поддержки старых браузеров является избыточным, то JavaScript, очевидно, больше подходит для этой работы. Но если вы можете спокойно игнорировать старые браузеры, то использование HTML5 Placeholder, вероятно, является лучшим способом.