Главная > CSS/Style Sheets > Знакомство с HTML5-атрибутом Placeholder

Знакомство с HTML5-атрибутом Placeholder


17 декабря 2012, 12:30. Разместил: Design FactoRy
Многим очень нравится новое свойство в HTML5, позволяющее без труда добавлять текст-заглушку или placeholder. Текст-заглушка – это серый текст, который вы можете поместить в поле ввода, чтобы сообщить пользователям о предназначении этого поля. Как только пользователи начинают вписывать текст в поле ввода, этот текст исчезает.

Раньше для решения этой задачи мы были вынуждены прибегать к javascript:

<input type="text" value="Placeholder text"
onfocus="if(this.value=='Placeholder text')this.value='';"
onblur="if(this.value=='')this.value='Placeholder text';">

В этом нет ничего неправильного, но с появлением HTML5 наша задача сильно облегчилась.

В HTML5 нам был представлен новый атрибут с логическим названием: placeholder (заглушка). Давайте рассмотрим пример:

<input type="text" placeholder="Placeholder Text">

Если мы откроем его через браузеры, поле ввода будет обозначено серым текстом, как видно на изображении ниже:

Знакомство с HTML5-атрибутом Placeholder

Здесь важно отметить несколько моментов: следуя спецификации, атрибут placeholder не должен использоваться в качестве альтернативы ярлыку, и также рекомендуется, что этот атрибут должен быть применен к типам полей, которые требуют ввода текста, например: ввода пароля, строка поиска, ввод адреса электронной почты, текстовое поле, а также поле ввода телефона.

Применение этого атрибута к типам ввода вроде радио-кнопки или чекбокса не даст никакого результата.

Placeholder и CSS

Более того, посредством CSS возможно оформление текста-заглушки, но на момент написания данного руководства эта возможность распространялась только на браузеры семейства Webkit и Firefox.

Следующий пример показывает, как изменить цвет текста-заглушки на зеленый для браузеров семейства Webkit и Firefox:

input::-webkit-input-placeholder {
color: green;
}
input:-moz-placeholder {
color: green;
}

Знакомство с HTML5-атрибутом Placeholder

Только важно запомнить, что ::-webkit-input-placeholder и :-moz-placeholder будет создавать эффект только на текст, и их нельзя использовать параллельно.

input::-webkit-input-placeholder, input:-moz-placeholder {
color: green;
}

Такой код работать не будет.

Селектор атрибута

CSS3 также поддерживает этот атрибут, предоставляя нам селектор атрибута [placeholder].

input[placeholder] {
border: 1px solid green;
}

В вышеприведенном примере мы выбираем все поля ввода, где имеется атрибут placeholder, и изменяем цвет границы на зеленый.

Знакомство с HTML5-атрибутом Placeholder

Совместимость с браузерами

Это новое HTML5-свойство, что не удивительно, не поддерживается в старых браузерах, и на данный момент работает только в Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 и Internet Explorer 10 (который пока еще не вышел официально).

Placeholder Polyfills

Тем не менее, если нам нужно отобразить placeholder в старых браузерах, но также иметь возможность использовать атрибут placeholder, мы можем воспользоваться Polyfills. Существует множество Placeholder Polyfills, но в данном примере мы воспользуемся PlaceMe.js:

<script src="jquery.js" type="text/javascript"></script>
<script src="placeme.js" type="text/javascript"></script>

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

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


В завершение

HTML5-атрибут Placeholder безусловно облегчает задачу. Теперь все зависит от нас, веб-разработчиков и дизайнеров. Теперь у нас есть выбор между javascript или HTML5.

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