Html5 type email: HTML input type=»email»

Содержание

Простая валидация формы без JS / Хабр

В данной статье я бы хотел поделиться методом быстрой валидации полей с помощью разметки и стилей. Данный метод не является кроссбраузерным и рекомендуется к использованию только как дополнительная фича. По ходу статьи мы будем уменьшать наши шансы на кроссбраузерность, но повышать функциональность.

Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем.

<form action="#">
	<input type="text" name="name" placeholder="Имя" />
	<input type="text" name="email" placeholder="E-Mail" />
	<input type="text" name="phone" placeholder="Телефон" />
	<input type="text" name="url" placeholder="Ваш сайт" />
	<input type="text" name="growth" placeholder="Ваш рост" />
	<button type="submit">Отправить</button>
</form>

HTML5

Сейчас уже никого не удивить атрибутами валидации input полей, которое принес нам стандарт HTML5.

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

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

<form action="#">
	<input type="text" name="name" placeholder="Имя" required />
	<input type="email" name="email" placeholder="E-Mail" />
	<input type="tel" name="phone" placeholder="Телефон" />
	<input type="url" name="url" placeholder="Ваш сайт" />
	<input type="number" name="growth" placeholder="Ваш рост" />
	<button type="submit">Отправить</button>
</form>

Применение этих двух атрибутов позволит гораздо эффективнее валидировать вводимую информацию нативными методами. Ну и конечно же поддержка этих свойств браузерами наиболее широка.

Отдельно хотелось бы сказать про тип поля tel. Ожидается что браузер будет валидировать телефонные номера, но нет, поле с типом tel используется сейчас только для автозаполнения. Дело в том, что валидация телефонных номеров очень неоднозначная задача из-за слишком большого количества различных форматов телефонных номеров в разных странах, которые просто никак не получится унифицировать и записать в одно правило.

Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:

<input type="tel" name="phone" placeholder="Телефон"  pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}" minlength="18" maxlength="18" />

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

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

Стоит также учитывать, что атрибут minlength до сих пор не поддерживается в браузерах IE, EDGE и только с версии 10.3 появился в iOS. Однако maxlength поддерживается везде и очень давно. Нам в целом хватит и этого.

Давайте также поставим ограничение для поля с ростом. Допустим мы предполагаем, что пользователь нашего сайта определенно не может быть ниже 100 см и выше 250 см. Так и напишем:

<input type="number" name="growth" placeholder="Ваш рост" min="100" max="250" />

С поддержкой этих атрибутов в браузерах, все хорошо.

Перейдем к стилизации!

CSS3

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

input:invalid {border-color: red;}
input:valid {border-color: green;}

Казалось бы, берем полученные знания и применяем! Но не все так просто как кажется, давайте проверим как это работает. В результате мы получим, что все наши поля изначально пустые и обязательные будут считаться не валидными, а все остальные валидными. Совсем не красиво и непонятно для пользователя, что от него хотят.

Мы можем пойти на небольшую хитрость и использовать псевдокласс :placeholder-shown. С помощью этого псевдокласса мы можем определить отображается ли сейчас значение placeholder в нашем поле ввода. Атрибут placeholder отображается только тогда, когда в наше поле ничего не введено. Соответственно, чтобы применить этот псевдокласс нам просто нужно обратить его свойство с помощью :not. В итоге получаем вот такую конструкцию:

input:invalid:not(:placeholder-shown) {border-color: red;}
input:valid:not(:placeholder-shown) {border-color: green;}

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

Если ваше поле не имеет атрибута placeholder, можно просто поставить внутри пробел:

<input type="text" placeholder=" " />

У данного метода есть только один минус: поддержка. Псевдоэлемент :placeholder-shown поддерживается во всех браузерах кроме IE и EDGE. К счастью :not не обладает таким недостатком.

Для примера я набросал все вышесказанное в CodePen и добавил еще немного возможностей:

Итог

Таким образом, не прибегая к JS мы с помощью двух строк в CSS смогли стилизовать и валидировать форму. На текущий момент такая конструкция будет хорошо работать в большинстве браузеров, к сожалению, как всегда, веб-разработку подводят детища Microsoft.

Руководство по проверке электронной почты HTML5 | Блог Mailtrap

Вот оно. Еще одно письмо возвращается, потому что пользователь неправильно набрал его или предположил (правильно), что ваш сайт примет hwebfdherw@fhberwfuy в качестве действительного адреса электронной почты. Если ваш список переполнен такими адресами, вы, вероятно, столкнетесь с плохой доставкой или ваши пользователи будут блокироваться в своих аккаунтах чаще, чем вам хотелось бы. К счастью, в HTML5 легко настроить приличную проверку электронной почты. Посмотрим, как.

Основы проверки ввода в HTML5

До выпуска HTML5 веб-разработчикам приходилось использовать функции JavaScript или сторонние библиотеки для фильтрации нежелательных сообщений электронной почты. Некоторые работали очень хорошо; некоторые принесли больше вреда, чем пользы. Суть в том, что HTML не предлагал никаких функций для проверки формы.

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

Всякий раз, когда вы хотите получить информацию от посетителя (обычно через форму), вы, вероятно, будете использовать типичный HTML-элемент input . Возможно, вы также укажете атрибут type , чтобы браузер знал, какую информацию вы ищете. Некоторые допустимые значения для типа – это URL, имя, номер, пароль и адрес электронной почты.

Каждый из них поставляется со встроенным регулярным выражением (Regex), которое проверяет ввод на стороне клиента по заранее заданным критериям. Если нет тип ввода , браузер будет считать, что тип – это текст, и все, что будет вставлено, будет принято.

Проверка электронной почты в HTML5

Чтобы запустить базовую проверку электронной почты, мы можем использовать следующий код:

   
  Электронная почта:  

  Веб-сайт:

А теперь давайте попробуем вставить что-то, что даже не похоже на адрес электронной почты:

Обратите внимание, что поле должно быть установлено как «обязательное» для проверки. Мы намеренно исключили этот параметр для поля «веб-сайт», и были разрешены следующие входные данные (несмотря на то, что «URL» установлен в качестве параметра «тип»):

С другой стороны, проверка будет работать, только если браузер поддерживает HTML5, это подавляющее большинство современных браузеров. Но если ваша форма отображается, например, в IE 8.0 или более ранней версии, проверка выполняться не будет. Для таких случаев, возможно, стоит иметь резервную библиотеку JS для работы в браузерах, несовместимых с HTML5.

И, пока мы на этом, критерии проверки могут различаться в разных браузерах. Некоторые принимают все, что содержит «@» — например, test@test. Другие будут искать ввод текста до и после «@» и точку после второго текста и отклонят test@test. В любом случае проверка не очень строгая. Однако вы можете сделать его жестче, используя соответствующие шаблоны.

Как использовать регулярное выражение для проверки электронной почты

Еще одна замечательная особенность HTML5 — возможность указать шаблон, которому должен соответствовать каждый элемент ввода. Это делается с помощью популярных регулярных выражений, определяющих критерии для каждого поля. И есть много способов сделать это. 9[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$» type=»email» требуется />
Веб-сайт:

Таким образом, мы принудительно вводим данные, содержащие только буквенно-цифровые символы до и после «@» (без пробелов и специальных символов). И требуют, чтобы домен верхнего уровня использовал только буквы и имел длину от 2 до 4 символов.

Это больше не пройдет:

И это тоже не будет:

Но ни один из следующих также не будет работать, хотя они могут быть законными:

[email protected]
[email protected]
[email protected]
[email protected] (домен Google в Китае)

Если вы хотите более либерально относиться к доменам верхнего уровня, вы можете изменить максимально допустимое количество символов. Минимум — 1 (хотя используется редко), а максимум — 63 (тоже не самый распространенный выбор). При этом вы разрешаете использовать первый и последний адрес в списке выше. Но чтобы заполучить британского чувака, вам нужно еще немного поколдовать: 9_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Имейте в виду, однако, что чем более либеральные условия вы выберете, тем больше ложных срабатываний вы, вероятно, получите.

При проверке адресов электронной почты следует учитывать гораздо больше компромиссов. В этом посте с сайта регулярных выражений.info все описано.

В конечном счете, ни один из этих шаблонов не защищает пользователей от опечаток. Вы, вероятно, не сможете предложить большую помощь, если они не могут правильно написать свое имя. Но вы можете, по крайней мере, отфильтровать типичные ошибки типа «gmial» или «горячие гвозди», а также запятые вместо точек и так далее. Самый простой способ сделать это? С функцией JS:

 const пример = "example@gmial. com"
если (/@gm(ia|a|i)l.com$/.test(пример)) {
  alert("Может быть, вы имели в виду @gmail.com?")
}

Попробуйте Mailtrap бесплатно

Другие соображения

Любые вводимые пользователем данные могут представлять угрозу безопасности как для вашей системы, так и для данных, уже предоставленных реальными пользователями. Это еще одна причина иметь надлежащую проверку и быстро отфильтровывать любой вредоносный контент, который отправляют пользователи (преднамеренно или нет). Это верно не только на стороне клиента, но и на стороне сервера. Умный хакер всегда может обойти любые меры на стороне клиента, какими бы изощренными они ни были. Если это произойдет, важно иметь надежный второй уровень проверки.

И всякий раз, когда пользователи отправляют какие-либо входные данные, вы, вероятно, отправляете им автоматическое электронное письмо — подтверждение получения, последующий шаг или просто примечание «спасибо». Mailtrap Email Sandbox — это инструмент, который упрощает процесс тестирования этих писем, проверяя, правильно ли они отформатированы, не попадают ли они в папки со спамом и приходят ли они вообще.

С помощью тестовой среды электронной почты вы можете быстро просмотреть, как ваши электронные письма в формате HTML отображаются на разных устройствах, проверить HTML и посмотреть, поддерживает ли определенный почтовый клиент правило CSS.

Попробуйте Mailtrap бесплатно

Простое руководство по проверке электронной почты в формате HTML

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

Что, если человек введет свое имя вместо адреса электронной почты? Должен ли он оставаться в силе? И как нам быть с этими надоедливыми «.» и символы «@» и их размещение в строке? Прежде чем мы углубимся в проверку электронной почты в HTML, вы можете узнать больше о том, что такое проверка электронной почты, если хотите.

В HTML5 мы можем использовать специальный атрибут под названием «тип», чтобы указать, что мы хотим принять адрес электронной почты. Это простое решение легко реализуется благодаря HTML5 и обеспечивает базовый уровень проверки электронной почты практически без усилий.

До появления HTML5 для проверки приходилось использовать код JavaScript или что-то подобное. Это было до того, как появился HTML5 и предложил нам гораздо более простое решение, предоставив нам input type=»email», который будет легко проверять адреса электронной почты!

Не изобретайте велосипед.
API-интерфейсы Abstract уже готовы к работе.

Набор API-интерфейсов Abstract создан для экономии вашего времени. Вам не нужно быть экспертом в проверке электронной почты, геолокации IP и т. д. Просто сосредоточьтесь на написании кода, который действительно полезен для вашего приложения или бизнеса, а мы позаботимся обо всем остальном.

Начните бесплатно

Проверка электронной почты в формате HTML

Так что же такое элемент типа ввода? Эти элементы ввода типа электронной почты позволяют пользователю вводить и изменять адрес электронной почты.

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

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

При настройке типа ввода HTML с проверкой адреса электронной почты вы также можете указать следующие дополнительные атрибуты:

список — идентификатор элемента списка данных, расположенного в том же документе.
maxlength — максимальное количество символов, которое пользователь может ввести при вводе электронной почты.
minlength — минимальное количество символов, которое пользователь может ввести при вводе электронной почты.
Multiple – логическое значение, которое, если оно равно true, позволяет пользователю ввести список из нескольких адресов электронной почты, разделенных запятыми и, при необходимости, пробелами.
шаблон. Атрибут pattern, если он указан, является регулярным выражением, которому входное значение должно соответствовать, чтобы значение прошло проверку ограничения. Это должно быть допустимое регулярное выражение JavaScript. Например, адреса электронной почты должны заканчиваться на «@email.com, чтобы пройти проверку проверки электронной почты ниже:

.
тип ввода = "электронная почта"
  pattern=".+@email\.com" обязателен

заполнитель — это предлагаемый текст, который по умолчанию заполняет адрес электронной почты.
только для чтения — когда это свойство включено, вы не можете редактировать поле ввода, а только просматриваете текст, заполняющий поле.
размер — Атрибут размера представляет собой числовое значение, указывающее, сколько символов должно быть в поле ввода. Значение должно быть числом больше нуля, а значение по умолчанию — 20.

Проверять электронные письма с типом ввода = «email»

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

Тем не менее, есть также возможность добавить дополнительную фильтрацию, чтобы обеспечить удовлетворение ваших собственных особых потребностей, если они у вас есть.

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

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

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

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

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

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

.
тип ввода = "электронная почта" несколько

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

Вот примеры допустимых строк, когда указано несколько: @example. org, [email protected]»

«[email protected],[email protected], [email protected]»

Вот несколько примеров недопустимых строк, и каждый недействительный адрес электронной почты будет отклонено:

«,»
«пример»

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

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

Пример проверки HTML-формы

Давайте рассмотрим пример проверки HTML-формы. Представьте, что у нас есть компания, и мы хотим ограничить домен нашего адреса электронной почты названием нашей компании.

Обратите внимание, домен адреса электронной почты — это то, что следует после символа @. Например, домен для адреса электронной почты [email protected] — «gmail».

Теперь давайте реализуем проверку адреса электронной почты, которая ограничивает адреса электронной почты доменом «mycompany».

Мы можем проверить как стандартную проверку адреса электронной почты, так и указанный шаблон. Посмотрите на пример HTML-формы ниже:

форма
  див
  label for="emailAddress">Введите адрес электронной почты /label br
  тип ввода = «электронная почта», размер = «64», maxLength = «64», требуется
    placeholder="[email protected]" pattern=".+@mycompany\.com"
    title="Пожалуйста, укажите только адрес электронной почты моей компании"
  /дел
/форма

Следует ли использовать type=email или шаблон?

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

Например, если вы хотите принимать адреса электронной почты только из определенного домена, например «@mycompany.com», вам нужно будет использовать для этого шаблон атрибута. Независимо от того, какой метод вы используете для проверки на стороне клиента, вы также должны реализовать некоторую форму проверки на стороне сервера. Это обеспечит правильность данных, которые вводятся в вашу базу данных.

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

Одной из альтернатив использованию проверки ввода HTML является использование API. Одним из таких API является API проверки и проверки электронной почты от Abstract. Этот API обеспечивает более тщательную проверку и гарантирует, что введен действительный адрес электронной почты.

Вы можете узнать следующую информацию и выполнить следующие проверки с помощью Abstract API:

Проверка опечаток и интеллектуальные предложения по ошибкам.