Главная страница   /   13.2. Использование элемента input для ввода пароля (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

13.2. Использование элемента input для ввода пароля

Значение password атрибута type создает элемент input для ввода пароля. Символы, которые вводит пользователь, маскируются, например, звездочками (*). В таблице 13-5 перечислены дополнительные атрибуты, которые доступны, если атрибут type имеет значение password. Многие из них такие же, как и для типа text, и работают таким же образом.

Таблица 13-5: Дополнительные атрибуты, доступные для типа password
Атрибут Описание Новый ли в HTML5
maxlength Задает максимальное число символов, которые пользователь может ввести в поле с паролем. Для подробностей смотрите раздел "Указание размера элемента" ранее в этой главе Нет
pattern Определяет шаблон регулярного выражения в целях проверки входных данных. Для подробностей см. главу 14 Да
placeholder Дает пользователю подсказку о том,какой вид данных вы ожидаете. Для подробностей смотрите раздел "Установка значений и использование меток-заполнителей (placeholders)" ранее в этой главе Да
readonly Этот атрибут создает поле пароля "только для чтения"(read-only). Для подробностей смотрите раздел "Создание текстовых полей только для чтения и отключенных текстовых полей" ранее в этой главе Нет
required Указывает, что пользователь обязан ввести значение в целях проверки входных данных. Для подробностей см. главу 14 Да
size Задает ширину элемента, выраженную как число символов, которые отображаются в поле пароля. Для подробностей смотрите раздел "Указание размера элемента" ранее в этой главе Нет
value Указывает начальное значение для поля пароля Нет

В листинге 13-5 показано, как используется тип password.

Листинг 13-5: Использование типа password
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<p>
			<label for="name">
				Name:
				<input value="Adam" id="name" name="name" />
			</label>
		</p>
		<p>
			<label for="password">
				Password:
				<input type="password" placeholder="Min 6 characters"
					id="password" name="password" />
			</label>
		</p>
		<p>
			<label for="fave">
				Fruit:
				<input value="Apples" id="fave" name="fave" />
			</label>
		</p>
		<button type="submit">Submit Vote</button>
	</form>
</body>
</html>

В листинге 13-5 я использовал атрибут placeholder, чтобы дать пользователю подсказку о том, какой пароль я жду. Когда пользователь начинает набирать пароль, браузер прячет подсказку и заменяет каждый набранный символ символом маскировки (различные браузеры используют различные символы маскировки, например, кружочки). Результат можно увидеть на рисунке 13-7.

Рисунок 13-7: Использование типа password элемента input

Рискую заявить очевидное, но скажу, что маскировка присутствует только при отображении текста, который вводит пользователь. Когда отправляется форма, сервер получает пароль открытым текстом, как вы можете видеть на рисунке 13-8, который показывает ответ скрипта Node.js.

Рисунок 13-8: Отправка формы, которая содержит поле пароля

Внимание

Тип password элемента input не защищает пароль, когда он передается на сервер. Значение, введенное пользователем, отправляется в виде открытого текста. Если безопасность важна для вашего сайта или приложения (и так должно быть), вы должны рассмотреть возможность использования SSL/HTTPS для шифрования связи между браузером и сервером.