Замещающийся текст

Подготовили: Евгений Рыжков и Татьяна Головко Дата публикации: 11.04.2011

Одно из первых нововведений в HTML5 — это возможность установки замещающегося текста. Этот текст отображается в поле ввода, пока поле не получит фокус — тогда этот текст исчезнет.

Скорей всего тебе уже встречался замещающийся текст. Например, в Mozilla Firefox 3.5 его можно увидеть в панели поиска по закладкам и истории:

панель поиска FF

Когда ты кликаешь по полю, текст в нем пропадает:

текст скрылся

Как бы это ни выглядело нелепо, но Firefox 3.5 не поддерживает замещающийся текст. Ниже приведена таблица поддержки этой возможности:

IE Firefox Safari Chrome Opera iPhone Android
- 3.7+ 4.0+ 4.0+ - - -

Пример как включить такую функцию в своей форме:

<form>
	<input name="q" placeholder="Search Bookmarks and History">
	<input type="submit" value="Search">
</form>

Браузеры, которые не поддерживают placeholder, просто проигнорируют атрибут. Вреда никакого не будет.

В: Могу ли я использовать HTML теги в атрибуте placeholder? Например, вставить изображение или изменить цвет текста?

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

Куда дальше

По теме

Показать комментарии