Атрибут placeholder HTML тега <input>

Значение и применение

Атрибут placeholder html5 (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера.

Атрибут может быть использован с полями данных следующих типов (атрибут type):

email (поле для адреса электронной почты).
password (поле с паролем, в котором скрываются символы).
search (текстовое поле для ввода строки поиска).
text (однострочное текстовое поле).
tel (поле для ввода номера телефона).
url (поле для ввода URL-адреса).

Поддержка браузерами

Атрибут	Chrome	Firefox	Opera	Safari	IExplorer	Edge
placeholder	10.0	4.0	11.0	5.0	10.0	12.0

Синтаксис:

<input placeholder =  "text">

Значения атрибута

Значение	Описание
text	Текстовая подсказка, которая описывает ожидаемое значение для ввода в элемент. Запрещается использование символов возврата каретки и перевода строки.

Отличия HTML 4.01 от HTML 5

Атрибут считается новым в HTML 5.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута placeholder</title>
</head>
<body>
	<form>
		Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
		Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
		<button type = "submit">Далее</button>
	</form>
</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder html5 ), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Пример использования атрибута placeholder HTML тега <input> (создание текстовой подсказки).

HTML тег <input>