Про текст в полях INPUT и TEXTAREA

На современных сайтах довольно часто можно увидеть формы, где подписи  к полям сделаны в самом поле. Такое дизайнерское решение считается модным и современным, хотя на мой взгляд довольно спорное. Давайте рассмотрим какие есть варианты реализации таких подписей.

Самое простое решение

Вставляем js-код прямо в разметку:

Тут нечего пояснять, подойдет для очень простых сайтов, где нет нужды делать отдельный файл со скриптами.

Универсальное решение на jQuery

Этот код был написан мной около года назад и с тех он кочует из проекта в проект. Мне нужно было универсальное решение, которое бы работало без изменения html.

 

Главное удобство: достаточно просто указать селекторы нужных полей. Одинаково работает как с input, так и c textarea. Кроме того, при фокусе элементу назначается класс focus, может пригодится, так как старые версии IE не поддерживают псевдокласс :focus.

HTML5

Если вы идете в ногу со временем и используете HTML5, то вам не понадобятся никакие костыли в виде скриптов, все уже придумано, просто используйте атрибут placeholder:

Однако пока его поддержка реализована далеко не во всех браузерах. Подробнее про поддержку браузерами и оформление читайте в статье Михаила Кобзарева Стилизуем HTML5 Placeholder на CSS.

  • спасибо за плейсхолдер, как раз собираюсь блог на хтмл 5 переводить

  • placeholder — решает.

    Начиная отказываться поддерживать старые и убогие браузеры, мы приблизим приход HMTL5 / CSS3