Значение email
Синтаксис
HTML
<input type="email">
Описание
Тип e-mail
(от англ. "electronic mail" ‒ «электронная почта») создаёт поле ввода электронной почты.
Внешний вид
- ‒ E-mail поле;
- ‒ наведение курсора;
- ‒ фокус.
Perl-совместимое регулярное выражение
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | |
4.01 | |
5.0 | 4.10.5.1.5 E-mail state (type=email) |
5.1 | 4.10.5.1.5. E-mail state (type=email) |
XHTML | |
1.0 | |
1.1 |
Сопутствующие атрибуты
- autocomplete
- Автозаполнение значения поля ввода E-mail.
- autofocus
- Автоматческая фокусировка на поле ввода E-mail после полной загрузки страницы.
- disabled
- Блокировка поля ввода e-mail.
disabled="disabled"
- form
- Присоединение поля ввода E-mail к форме.
- list
- Создание списка рекомендованных вариантов вводимого e-mail.
- maxlength
- Задаёт максимально-допустимое количество вводимых символов.
- minlength
- Задаёт минимально-допустимое количество вводимых символов.
- multiple
- Возможность ввода в одно поле (через запятую) сразу нескольких e-mail адресов.
- name
- Присвоение имени (идентификатора) полю ввода e-mail.
- pattern
- Устанавливает критерий/шаблон ввода.
- placeholder
- Указывает текст-подсказку для пустого поля.
placeholder="Текст-подсказка"
- readonly
- Указывает, что поле ввода e-mail доступно только для чтения (изменение/редактирование запрещено).
- required
- Указывает что поле ввода e-mail обязательно для заполнения.
- size
- Задаёт ширину поля ввода e-mail по количеству вводимых символов.
size="10"
- value
- Указывает значение поля ввода e-mail (отправляется на сервер или используется скриптами).
value="mail@example.com"
Примечание: Данный атрибут должен иметь значение, которое является допустимым e-mail адресом.
- Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Значение email (input-type)</title>
</head>
<body>
<h1>Пример с полем ввода электронной почты "type=email"</h1>
<fieldset> <legend>Введите e-mail</legend>
<p><input type="email" placeholder="mail@example.com" list="mailList"></p>
<datalist id="mailList">
<option value="mail0@example.com" label="E-mail №1">
<option value="mail1@example.com" label="E-mail №2">
<option value="mail2@example.com" label="E-mail №3">
</datalist>
</fieldset>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Значение email (input-type)</title>
</head>
<body>
<h1>Пример с полем ввода электронной почты "type=email"</h1>
<fieldset> <legend>Введите e-mail</legend>
<p><input type="email" placeholder="mail@example.com" list="mailList"></p>
<datalist id="mailList">
<option value="mail0@example.com" label="E-mail №1">
<option value="mail1@example.com" label="E-mail №2">
<option value="mail2@example.com" label="E-mail №3">
</datalist>
</fieldset>
</body>
</html>
Значение email (input-type)