При работе с формами HTML, а особенно с текстовыми полями, которые создаются с помощью элемента input с атрибутом type="text", можно столкнуться с проблемой.

Для этих текстовых полей нужно задать текстовое пояснение, которое будет отображаться в текстовом поле до того времени, пока пользователь не введет туда какую-либо информацию.

Выглядит это вот так:

13-04-2014 9-00-49

 

В верхнем текстовом поле пользователь ввел информацию, а в поле ниже пользователь не вводил ничего.

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

  13-04-2014 9-05-43

С англ. языка placeholder переводится как заполнитель.

Логика работы здесь следующая:

Добавив этот атрибут к текстовому полю или textarea, на заднем фоне появляется фоновое текстовое содержимое, которое исчезает при перемещении фокуса на элемент. Если убрать фокус с элемента, но ничего не ввести в текстовое поле, то «заполнитель» снова появится. «Заполнитель» исчезнет только тогда, когда в текстовом поле будет какое-либо содержимое.

Вот, как это все можно использовать на практике:

<input type="text" placeholder="Текстовая строка">

Значением атрибута placeholder будет являться текстовая строка, которую необходимо отобразить в качестве фонового текстового содержимого.

Добавим placeholder для элемента textarea.

<textarea placeholder=" Текстовая строка ">
</textarea>

Стоит отметить, что атрибут placeholder не будет работать на старых браузерах. Но, доля этих браузеров в каждым днем становиться все меньше и меньше.

Чтобы понять, как это все работает, посмотрите на следующий живой пример:

Больше моих уроков по HTML, CSS и верстке сайтов здесь.