—»     —»   Знакомство с HTML5-атрибутом Placeholder
  Раздел: CSS/Style Sheets   Комментариев: 2  

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



Многим очень нравится новое свойство в 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.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, CSS
Опубликовал Design FactoRy   Прочитано (раз): 6482   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 27 декабря 2012 @ 23:34
Написал: nomen — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за статью. Надо потихоньку начинать перебираться на использование HTML5 :)
Комментарий #2: 10 апреля 2013 @ 10:25
Написал: Kerny — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Если кому интересно, написал скрипт эмулирующий работу этого атрибута в старых браузерах.

Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930