Атрибут placeholder
26 апреля 2022| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 10.0+ | 8.0+ | 11.50+ | 5.0+ | 4.0+ | 3.0+ | 3.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Выводит текст внутри текстового поля, который исчезает при получении фокуса.
Синтаксис
<textarea placeholder="строка"> </textarea>
Значения
Текстовая строка. Если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег textarea, атрибут placeholder</title>
</head>
<body>
<form action="handler.php">
<p><textarea placeholder="Ваше сообщение"></textarea></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Результат данного примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текста, созданного с помощью атрибута placeholder
Firefox 4 допускает изменять стиль текста, выводимого через атрибут placeholder, с помощью псевдокласса :-moz-placeholder.
textarea:-moz-placeholder { color: red; }
В Safari и Chrome стиль текста меняется следующим образом:
textarea::-webkit-input-placeholder { color: red; }
Сайт