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

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

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

<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. Ошибка в форме

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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты