Использование элемента 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 для шифрования связи между браузером и сервером.
