<input type="email"> HTML attribute value

Элементы <input> типа email позволяют пользователю вводить и редактировать адрес электронной почты или, если указан атрибут multiple, список адресов электронной почты.

Попробуйте

<label for="email">Enter your example.com email:</label>

<input type="email" id="email" pattern=".+@example\.com" size="30" required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Значение поля ввода автоматически проверяется, чтобы убедиться, что оно пустое либо содержит правильно отформатированный адрес электронной почты (или список адресов) перед отправкой формы. Псевдоклассы CSS :valid и :invalid автоматически применяются соответствующим образом, визуально показывая, является ли текущее значение поля допустимым адресом электронной почты.

Значение

Атрибут value элемента <input> содержит строку, которая автоматически проверяется на соответствие синтаксису адреса электронной почты. В частности, проверку пройдут три возможных формата значения:

1. Пустая строка ("") означает, что пользователь не ввёл значение или удалил его.
2. Один правильно оформленный адрес электронной почты. Это не обязательно означает, что адрес существует, но по крайней мере он имеет правильный формат. Это означает username@domain или username@domain.tld. Конечно, есть и другие требования; см. раздел Проверка, где приведено регулярное выражение, соответствующее алгоритму проверки адресов электронной почты.
3. Если и только если указан атрибут multiple, значение может быть списком правильно оформленных адресов электронной почты, разделённых запятыми. Начальные и конечные пробелы в каждом адресе списка удаляются.

Подробные сведения о проверке правильности формата адресов электронной почты см. в разделе Проверка.

Дополнительные атрибуты

Помимо глобальных атрибутов и атрибутов, применимых ко всем элементам <input> независимо от их типа, поля ввода email поддерживают следующие атрибуты.

list

Значение атрибута list — это id элемента <datalist>, расположенного в том же документе. Элемент <datalist> содержит список заранее заданных значений, предлагаемых пользователю для этого поля ввода. Значения из списка, несовместимые с type, не включаются в предлагаемые варианты. Предоставленные значения являются предложениями, а не требованиями: пользователь может выбрать вариант из списка или ввести другое значение.

maxlength

Максимальная длина строки (измеряется в кодовых единицах UTF-16), которую пользователь может ввести в поле ввода email. Значение должно быть целым числом не меньше 0. Если атрибут maxlength не указан или указано недопустимое значение, максимальная длина поля ввода email не ограничена. Это значение также должно быть больше или равно значению minlength.

Проверка ограничений не будет пройдена, если длина текстового значения поля превышает maxlength кодовых единиц UTF-16. Проверка ограничений применяется только при изменении значения пользователем.

minlength

Минимальная длина строки (измеряется в кодовых единицах UTF-16), которую пользователь может ввести в поле ввода email. Значение должно быть неотрицательным целым числом, меньшим или равным значению, указанному в maxlength. Если атрибут minlength не указан или указано недопустимое значение, минимальная длина поля ввода email не ограничена.

Проверка ограничений не будет пройдена, если длина введённого в поле текста меньше minlength кодовых единиц UTF-16. Проверка ограничений применяется только при изменении значения пользователем.

multiple

Логический атрибут, указывающий, что пользователь может ввести список из нескольких адресов электронной почты, разделённых запятыми и, при необходимости, пробелами. Пример см. в разделе Разрешение ввода нескольких адресов электронной почты, а дополнительные сведения — в статье HTML-атрибут: multiple.

pattern

Атрибут pattern, если он указан, задаёт регулярное выражение, которому должно соответствовать value поля ввода, чтобы значение прошло проверку ограничений. Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям; при компиляции регулярного выражения задаётся флаг 'u', чтобы шаблон обрабатывался как последовательность кодовых точек Юникода, а не как ASCII. Не следует указывать прямые косые черты вокруг текста шаблона.

Если шаблон не указан или недопустим, регулярное выражение не применяется, а этот атрибут полностью игнорируется.

Подробные сведения и пример см. в разделе Проверка по шаблону.

placeholder

Атрибут placeholder — это строка, которая кратко подсказывает пользователю, какую информацию следует ввести в поле. Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не поясняющее сообщение. Текст не должен содержать символы возврата каретки или перевода строки.

Если содержимое элемента имеет одну направленность текста (LTR или RTL), но подсказку требуется отображать в противоположном направлении, можно использовать управляющие символы двунаправленного алгоритма Юникода, чтобы переопределить направление текста подсказки. Подробнее см. в статье Как использовать управляющие символы Юникода для двунаправленного текста.

readonly

Логический атрибут, который, если он присутствует, означает, что пользователь не может редактировать это поле. Однако его value всё ещё можно изменить с помощью JavaScript, напрямую задав свойство value объекта HTMLInputElement.

size

Атрибут size — это числовое значение, указывающее ширину поля ввода в символах. Значение должно быть больше нуля, значение по умолчанию — 20. Поскольку ширина символов различается, это значение может быть неточным, поэтому на него не следует полагаться; фактическое поле ввода может быть уже или шире заданного количества символов в зависимости от символов и используемого шрифта (настроек font).

Этот атрибут не ограничивает количество символов, которое пользователь может ввести в поле. Он лишь приблизительно задаёт количество символов, видимых одновременно. Чтобы задать максимальную длину вводимых данных, используйте атрибут maxlength.

Использование полей ввода адреса электронной почты

Адреса электронной почты — один из наиболее часто вводимых типов текстовых данных в интернете: они используются для входа на сайты, при запросе информации, для подтверждения заказов, в веб-почте и так далее. Поэтому тип поля ввода email может значительно упростить работу веб-разработчика: он помогает упростить создание пользовательского интерфейса и логику для ввода адресов электронной почты. При создании поля ввода электронной почты с правильным значением type — email — вы получаете автоматическую проверку, которая гарантирует, что введённый текст как минимум имеет форму потенциально действительного адреса электронной почты. Это помогает избежать ситуаций, когда пользователь ошибается при вводе своего адреса или указывает недопустимый адрес.

Однако важно отметить, что этого недостаточно, чтобы гарантировать, что введённый текст — это действительно существующий адрес электронной почты, принадлежащий пользователю сайта или каким-либо иным образом допустимый. Проверка лишь гарантирует, что значение поля имеет правильный формат адреса электронной почты.

Базовое поле ввода адреса электронной почты

В настоящее время все браузеры, поддерживающие этот элемент, реализуют его как обычное текстовое поле с базовыми функциями проверки. Однако спецификация оставляет браузерам свободу действий. Например, элемент может быть интегрирован со встроенной адресной книгой устройства пользователя, чтобы тот мог выбирать адреса электронной почты из списка. В простейшем виде поле ввода email можно реализовать так:

<input id="emailAddress" type="email" />

Обратите внимание: значение считается допустимым, если оно пустое или содержит один адрес электронной почты в правильном формате; в остальных случаях оно считается недопустимым. При добавлении атрибута required разрешаются только правильно оформленные адреса электронной почты; пустое поле больше не считается допустимым.

Разрешение ввода нескольких адресов электронной почты

Добавив логический атрибут multiple, можно настроить поле ввода для приёма нескольких адресов электронной почты.

<input id="emailAddress" type="email" multiple />

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

Примеры допустимых строк при указании multiple:

• ""
• "me@example"
• "me@example.org"
• "me@example.org,you@example.org"
• "me@example.org, you@example.org"
• "me@example.org,you@example.org, us@example.org"

Примеры недопустимых строк:

• ","
• "me"
• "me@example.org you@example.org"

Подсказки

Иногда полезно подсказать в самом поле, в каком формате следует вводить данные. Это особенно важно, если дизайн страницы не предусматривает описательных меток для каждого элемента <input>. В этом случае помогают подсказки. Подсказка — это значение, которое демонстрирует требуемый формат value, показывая пример допустимого значения. Оно отображается внутри поля ввода, когда его value равно "". После ввода данных подсказка исчезает; если поле очистить, подсказка появляется снова.

Здесь мы используем поле ввода email с подсказкой sophie@example.com. Обратите внимание, как подсказка исчезает и появляется снова при изменении содержимого поля.

<input type="email" placeholder="sophie@example.com" />

Управление размером поля ввода

Можно управлять не только физической длиной поля ввода, но и минимальной и максимальной длиной самого вводимого текста.

Физический размер поля ввода

Физический размер поля ввода можно задать с помощью атрибута size. Он позволяет указать количество символов, которое поле может отображать одновременно. В этом примере ширина поля ввода email составляет 15 символов:

<input type="email" size="15" />

Длина значения элемента

size не связан с ограничением длины самого введённого адреса электронной почты. Это позволяет разместить поля в ограниченном пространстве и при этом разрешить ввод более длинных адресов. Минимальную длину вводимого адреса электронной почты в символах можно задать с помощью атрибута minlength; аналогично, атрибут maxlength задаёт максимальную длину вводимого адреса.

В примере ниже создаётся поле для ввода адреса электронной почты шириной 32 символа, в котором длина содержимого должна быть не меньше 3 и не больше 64 символов.

<input type="email" size="32" minlength="3" maxlength="64" />

Предоставление вариантов по умолчанию

Указание одного значения по умолчанию с помощью атрибута value

Как и всегда, можно задать значение по умолчанию для поля ввода email, установив его атрибут value:

<input type="email" value="default@example.com" />

Предложение вариантов значений

Можно пойти дальше и предоставить список вариантов по умолчанию, из которых пользователь сможет выбрать, указав атрибут list. Это не ограничивает пользователя этими вариантами, но позволяет быстрее выбирать часто используемые адреса электронной почты. Кроме того, это предоставляет подсказки для autocomplete. Атрибут list задаёт идентификатор элемента <datalist>, который содержит по одному элементу <option> для каждого предлагаемого значения; value каждого элемента option содержит соответствующее предлагаемое значение для поля ввода адреса электронной почты.

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

При наличии элемента <datalist> и его элементов <option> браузер предложит указанные значения в качестве возможных адресов электронной почты; обычно они отображаются во всплывающем или раскрывающемся списке. В разных браузерах поведение может отличаться, но обычно при щелчке по полю ввода появляется раскрывающийся список предлагаемых адресов электронной почты. По мере ввода текста список фильтруется и отображаются только соответствующие значения. Каждый введённый символ сужает список, пока пользователь не выберет вариант или не введёт собственное значение.

Проверка

Для полей ввода email доступно два уровня проверки содержимого. Во-первых, это стандартный уровень проверки, доступный для всех элементов <input>, который автоматически убеждается, что содержимое соответствует требованиям к допустимому адресу электронной почты. Кроме того, можно добавить дополнительную фильтрацию, чтобы удовлетворить особые требования, если они есть.

Базовая проверка

Браузеры автоматически проверяют, что в поле ввода введён только текст, соответствующий стандартному формату адресов электронной почты в интернете. Браузеры используют алгоритм, эквивалентный следующему регулярному выражению:

/^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?(?:\.[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?)*$/i;

Чтобы узнать больше о проверке форм и о том, как использовать свойства CSS :valid и :invalid для оформления поля в зависимости от допустимости текущего значения, см. статью Проверка данных формы.

Проверка по шаблону

Если необходимо ограничить ввод адреса электронной почты строже, чем просто «любая строка, похожая на адрес электронной почты», используйте атрибут pattern, чтобы задать регулярное выражение, которому должно соответствовать значение, чтобы считаться допустимым. Если указан атрибут multiple, регулярному выражению должен соответствовать каждый элемент списка значений, разделённых запятыми.

Например, предположим, что вы создаёте страницу для сотрудников Best Startup Ever, Inc., которая позволит им обращаться за помощью в ИТ-отдел. В нашей упрощённой форме пользователь должен ввести адрес электронной почты и сообщение с описанием проблемы, в решении которой ему нужна помощь. Мы хотим убедиться, что пользователь указал действительный адрес электронной почты, а также по соображениям безопасности требуем, чтобы этот адрес был внутренним корпоративным адресом.

Поскольку поля ввода типа email проверяются и по стандартным правилам проверки адресов электронной почты, и по указанному pattern, это можно легко реализовать. Посмотрим, как:

<form>
  <div class="emailBox">
    <label for="emailAddress">Your email address</label><br />
    <input
      id="emailAddress"
      type="email"
      size="64"
      maxlength="64"
      required
      placeholder="username@beststartupever.com"
      pattern=".+@beststartupever\.com"
      title="Please provide only a Best Startup Ever corporate email address" />
  </div>

  <div class="messageBox">
    <label for="message">Request</label><br />
    <textarea
      id="message"
      cols="80"
      rows="8"
      required
      placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea>
  </div>
  <input type="submit" value="Send Request" />
</form>

Наша <form> содержит один элемент <input> типа email для адреса электронной почты пользователя, элемент <textarea> для ввода сообщения в ИТ-отдел и элемент <input> типа "submit", создающий кнопку отправки формы. С каждым полем ввода текста связана <label>, которая сообщает пользователю, что нужно ввести.

Рассмотрим подробнее поле ввода адреса электронной почты. Атрибутам size и maxlength присвоено значение 64, чтобы поле отображало до 64 символов адреса электронной почты и ограничивало ввод максимум 64 символами. Указан атрибут required, поэтому необходимо ввести допустимый адрес электронной почты.

Добавлена подходящая placeholder — username@beststartupever.com — демонстрирующая допустимый формат ввода. Эта строка показывает, что следует ввести адрес электронной почты, и подсказывает, что это должна быть корпоративная учётная запись beststartupever.com. Кроме того, благодаря типу email текст проверяется на соответствие формату адреса электронной почты. Если текст в поле не является адресом электронной почты, появится сообщение об ошибке, похожее на это:

Если бы мы на этом остановились, то проверяли бы хотя бы допустимость адресов электронной почты. Но мы хотим пойти дальше: нужно убедиться, что адрес имеет вид [username]@beststartupever.com. Для этого используется атрибут pattern. Мы задаём для pattern значение .+@beststartupever.com. Это регулярное выражение требует, чтобы строка содержала хотя бы один символ любого типа, за которым следуют символ «@» и доменное имя «beststartupever.com».

Обратите внимание: это даже близко не является достаточным фильтром для проверки адресов электронной почты; он пропустит такие значения, как « @beststartupever.com» (обратите внимание на пробел в начале) или «@@beststartupever.com», хотя ни одно из них не является допустимым. Однако браузер применяет к указанному тексту и стандартный фильтр адресов электронной почты, и наш пользовательский шаблон. В результате проверка требует, чтобы значение было похоже на допустимый адрес электронной почты, а если это так — чтобы оно также было адресом beststartupever.com.

Рекомендуется использовать атрибут title вместе с pattern. В таком случае title обязательно должен описывать шаблон. То есть он должен объяснять, какой формат должны иметь данные, а не сообщать что-либо другое. Это важно, поскольку title может отображаться или произноситься как часть сообщения об ошибке проверки. Например, браузер может показать сообщение «Введённый текст не соответствует требуемому шаблону.», за которым последует указанный вами title. Если title — это что-то вроде «Адрес электронной почты», сообщение будет выглядеть так: «Введённый текст не соответствует требуемому шаблону. Адрес электронной почты», что звучит не очень хорошо.

Поэтому вместо этого мы задаём строку «Укажите только корпоративный адрес электронной почты Best Startup Ever». Тогда полное сообщение об ошибке может выглядеть так: «Введённый текст не соответствует требуемому шаблону. Укажите только корпоративный адрес электронной почты Best Startup Ever».

Примеры

Здесь мы используем поле ввода адреса электронной почты с идентификатором emailAddress, в котором разрешён ввод не более 256 символов. Физическая ширина поля составляет 64 символа; когда оно пустое, в качестве подсказки отображается текст user@example.gov. Кроме того, благодаря атрибуту multiple поле настроено на ввод нуля или более адресов электронной почты, разделённых запятыми, как описано в разделе Разрешение ввода нескольких адресов электронной почты. Наконец, атрибут list содержит идентификатор элемента <datalist>, элементы <option> которого задают набор предлагаемых значений, доступных для выбора.

Кроме того, элемент <label> используется для создания метки поля ввода адреса электронной почты; его атрибут for ссылается на идентификатор emailAddress элемента <input>. Благодаря такой связи элементов щелчок по метке переводит фокус на поле ввода.

<label for="emailAddress">Email</label><br />
<input
  id="emailAddress"
  type="email"
  placeholder="user@example.gov"
  list="defaultEmails"
  size="64"
  maxlength="256"
  multiple />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Руководство по HTML-формам
• <input>
• <input type="tel">
• <input type="url">
• Атрибуты:
  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size