Поле для ввода пароля
Поле для ввода пароля — обычное текстовое поле, вводимый текст в котором в зависимости от браузера отображается звёздочками или точками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Хотя вводимый текст и не показывается на экране, на сервер введённая информация передаётся в открытом виде без шифрования. Поэтому использование этого поля не обеспечивает безопасности данных и их можно перехватить.
Синтаксис создания следующий.
Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| size | Ширина поля с паролем, которая определяется числом звёздочек моноширинного шрифта. |
| maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля. |
| name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками. |
Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить свои полномочия. В примере 1 показано, как создавать подобные поля.
В результате получим следующее (рис. 1).
К полю с паролем применимы стилевые свойства задающие параметры цвета, фона, рамки и др. В примере 2 показано добавление фоновых картинок к полям формы. За основу возьмём стиль как для текстовых полей.
Пример 2. Добавление изображения в текстовое поле
Результат данного примера показан на рис. 2. Картинки добавляются в качестве фона, поэтому текст обязательно надо сдвинуть вправо через padding-left , в противном случае он будет выводиться поверх изображения.
Рис. 2. Вид полей с фоновым рисунком
См. также
- Выравнивание элементов форм
- Загрузка файлов
- Кнопки
- Кнопки
- Отправка данных формы
- Переключатели
- Переключатели
- Поле для пароля
- Пользовательские формы
- Построение форм
- Скрытое поле
- Стилизация переключателей
- Стилизация флажков
- Сумасшедшие формы
- Текстовое поле
- Текстовое поле
- Флажки
- Флажки
- Формы в Bootstrap 4
- Формы в HTML
- Текст
- Фон
- Ссылки
- Списки
- Изображения
- Таблицы
- Формы
- Отправка данных формы
- Текстовое поле
- Поле для ввода пароля
- Многострочное текстовое поле
- Кнопки
- Элемент label
- Переключатели
- Флажки
- Поле со списком
- Скрытое поле
- Поле с изображением
- Загрузка файлов
- Адрес электронной почты
- Веб-адрес
- Выбор цвета
- Ввод чисел
- Ползунок
- Календарь
- Поле для поиска
- Номер телефона
- Группирование элементов форм
- Блокирование элементов форм
- Автофокус
- Подсказывающий текст
- Защита от дурака
Поле для пароля
Поле для пароля — обычное текстовое поле, но отличается от него тем, что все вводимые символы отображаются звездочками, точками или другими знаками (это зависит от браузера). Поле предназначено для того, чтобы никто не подглядел вводимый пароль.
Синтаксис создания следующий.
Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.
Табл. 1. Атрибуты поля с паролем
Атрибут Описание size Ширина поля с паролем, которая определяется числом звездочек моноширинного шрифта. maxlength Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут опустить, то можно вводить строку длинее самого поля. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. value Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками. Создание поля для пароля показано в примере 1.
В результате получим следующее (рис. 1).
Рис. 1. Вид поля с паролем в браузере Chrome
Поле для пароля
Поле для пароля — обычное текстовое поле, но отличается от него тем, что все вводимые символы отображаются звездочками, точками или другими знаками (это зависит от браузера и операционной системы). Поле предназначено для того, чтобы никто не подглядел вводимый пароль.
Синтаксис создания следующий.
Атрибуты практически совпадают с атрибутами текстового поля и перечислены в табл. 1.
Табл. 1. Атрибуты поля с паролем
Атрибут Описание name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. disabled Блокирует поле для ввода пароля и не отправляет данные на сервер. form Идентификатор формы для связывания поля с паролем с элементом . type Для поля с паролем мы указываем значение password . maxlength Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если данный атрибут опустить, то можно вводить длинный пароль. readonly Блокирует поле для ввода пароля. size Ширина поля, которая определяется числом символов моноширинного шрифта. value Начальный пароль, который выводится в поле, но не отображается как текст. autocomplete Введённый ранее пароль запоминается браузером и подставляется при следующем вводе. autofocus Поле получает фокус после загрузки документа. pattern Шаблон ввода пароля. required Указывает, что пароль является обязательным для заполнения. placeholder Добавляет подсказку, которая исчезает при вводе пароля. Создание поля для ввода пароля показано в примере 1.
В результате получим следующее (рис. 1).
Следует помнить, что хотя пароль в браузере и не виден, но на сервер по протоколу HTTP он передаётся незашифрованным и его можно перехватить. Также пароль, заранее заданный в атрибуте value , можно подсмотреть в исходном коде веб-страницы или с помощью специальных плагинов.
