Адрес электронной почты

В формах часто требуется ввод адреса электронной почты, для чего обычно применяется однострочное текстовое поле. Однако в отличие от него специальное поле для ввода адреса почты позволяет проверять корректность записи введённого адреса.

Синтаксис создания такого поля следующий.

<input type="email" атрибуты>

Атрибуты по большей части совпадают с текстовым полем и приведены в табл. 1.

Табл. 1. Атрибуты поля для почтового адреса

Атрибут Описание
maxlength Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку длиннее самого поля.
multiple Позволяет указывать несколько адресов через запятую.
name Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
size Ширина поля, которая определяется числом символов моноширинного шрифта.
value Начальный почтовый адрес отображаемый в поле.

По сравнению со значением text, добавлен атрибут multiple, который позволяет вводить сразу несколько почтовых адресов.

В примере 1 показано создание формы авторизации на сайте, где в качестве логина указывается адрес электронной почты.

Пример 1. Адрес электронной почты

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Авторизация на сайте</title> </head> <body> <form action="handler.php"> <p>Вход на сайт</p> <p>Email: <input type="email" name="login"></p> <p>Пароль: <input type="password" name="pass"></p> <p><input type="submit" value="Вход"></p> </form> </body> </html>

По своему виду поле для ввода адреса ничем не отличается от текстового поля. Различия проявляются, если указать некорректный адрес, в этом случае браузер выведет замечание об ошибке (рис. 1). Сама форма на сервер не отправляется, пока ошибка не будет исправлена.

Ошибка в форме

Рис. 1. Ошибка в форме

Старые версии браузеров интерпретируют поле для адреса электронной почты как текстовое.

Автор: Влад Мержевич
Последнее изменение: 15.02.2024