<input type="email">

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

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

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

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

См. Валидация для подробностей о том, как проверяются адреса электронной почты, чтобы убедиться, что они отформатированы правильно.

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

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

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

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

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

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

Булевый атрибут, который, если присутствует, указывает, что пользователь может ввести список нескольких адресов электронной почты, разделённых запятыми и, необязательно, пробелами. См. Пример использования множественного выбора адресов электронной почты или HTML атрибут: multiple для получения более подробной информации.

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

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

См. раздел Валидация по шаблону для подробностей и примера.

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

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

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

Атрибут 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> на каждое предлагаемое значение; каждый option's value — соответствующее предлагаемое значение для поля ввода электронной почты.

<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>, автоматически гарантирует соответствие ввода требованиям для валидного адреса электронной почты. Во-вторых, есть возможность добавить дополнительную фильтрацию для удовлетворения специфических потребностей.

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

/^[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])?)*$/;

Чтобы узнать больше о работе валидации форм и о том, как использовать 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> для ввода сообщения для отдела ИТ и кнопку "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
• Совместимость свойств CSS