Type email input: 🤷🏽‍♀️ Page not found | MDN Web Docs — Вебджем.рф

Содержание

Адрес электронной почты | htmlbook.ru

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

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

<input type="email" атрибуты>

Атрибуты по большей части совпадают с текстовым полем и приведены в табл. 1.

Табл. 1. Атрибуты поля для почтового адреса

Атрибут	Описание
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут опустить, то можно вводить строку длинее самого поля.
multiple	Позволяет указывать несколько адресов через запятую.
name	Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
size	Ширина поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали.
value	Начальный почтовый адрес отображаемый в поле.

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

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

Пример 1. Адрес электронной почты

HTML5IE 10+CrOpSaFx

<!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>

По своему виду поле для ввода адреса ничем не отличается от текстового поля. Различия проявляются, если указать некорректный адрес, в этом случае браузер выведет замечание об ошибке. Firefox поле с неверным адресом обозначает красной рамкой и сообщением об ошибке при отправке формы (рис. 1), Chrome никак сразу не выделяет поле с ошибкой, но выводит сообщение при отправке формы (рис. 2). Аналогично поступает и Opera (рис. 3). Сама форма на сервер не отправляется, пока ошибка не будет исправлена.

Рис. 1. Отправка формы в Firefox

Рис. 2. Отправка формы в Chrome

Рис. 3. Отправка формы в Opera

Другие популярные браузеры (IE, Safari) интерпретируют поле для адреса электронной почты как текстовое.

Типы входных данных HTML уроки для начинающих академия

В этой главе описываются различные типы входных данных для элемента <input>.

Текст типа ввода

<input type="text"> определяет одно строчное текстовое поле ввода:

Пример

<form>
Имя:<br>
<input type=»text» name=»firstname»><br>
Фамилия:<br>
<input type=»text» name=»lastname»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Имя:

Фамилия:

Пароль типа ввода

<input type="password"> Определяет поле пароля:

Пример

<form>
User name:<br>
<input type=»text» name=»username»><br>
User password:<br>
<input type=»password» name=»psw»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Имя пользователя:

Пароль пользователя:

Символы в поле пароля замаскированы (отображаются как звездочки или круги).

Тип ввода отправить

<input type="submit"> Определяет кнопку для Отправка данных формы в обработчик форм.

Обработчик форм обычно является серверной страницей со сценарием для обработки входных данных.

Обработчик формы указан в атрибуте action формы:

Пример

<form action=»/action_page.php»>
First name:<br>
<input type=»text» name=»firstname» value=»Mickey»><br>
Last name:<br>
<input type=»text» name=»lastname» value=»Mouse»><br><br>
<input type=»submit» value=»Submit»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Если опустить атрибут value кнопки Submit, кнопка получит текст по умолчанию:

Пример

Сброс типа ввода

<input type="reset"> Определяет кнопку сброса , которая сбрасывает все значения формы в значения по умолчанию:

Пример

<form action=»/action_page. php»>
First name:<br>
<input type=»text» name=»firstname» value=»Mickey»><br>
Last name:<br>
<input type=»text» name=»lastname» value=»Mouse»><br><br>
<input type=»submit» value=»Submit»>

Таким образом, HTML-код выше будет отображаться в браузере:

При изменении входных значений и нажатии кнопки «Сброс» данные формы будут сброшены на значения по умолчанию.

Тип входного сигнала радио

<input type="radio"> Определяет переключатель.

Переключатели позволяют пользователю выбрать только одно из ограниченного числа вариантов:

Пример

<form>
<input type=»radio» name=»gender» value=»male» checked> Male<br>
<input type=»radio» name=»gender» value=»female»> Female<br>
<input type=»radio» name=»gender» value=»other»> Other
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Male
Female
Other

Флажок «тип ввода»

<input type="checkbox"> Определяет CheckBox.

Флажки позволяют пользователю выбрать ноль или более вариантов ограниченного числа вариантов.

Пример

Таким образом, HTML-код выше будет отображаться в браузере:

I have a bike
I have a car

Кнопка ввода типа

<input type="button"> Определяет кнопку:

Пример

Таким образом, HTML-код выше будет отображаться в браузере:

Типы входных данных HTML5

HTML5 добавил несколько новых типов ввода:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

Новые типы ввода, которые не поддерживаются старыми веб-обозревателями, будут вести себя как

<input type="text"> .

Цвет входного типа

<input type="color"> используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки обозревателя в поле ввода может отображаться палитра цветов.

Тип ввода Дата

<input type="date"> используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

Можно также использовать атрибуты min и max для добавления ограничений дат:

Входной тип DateTime-локальный

<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

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

<input type="email">

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

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

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

Тип входного месяца

<input type="month"> позволяет пользователю выбрать месяц и год.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

Тип входного номера

<input type="number"> определяет Числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в котором можно ввести значение от 1 до 5:

Ограничения ввода

Ниже приведен список некоторых распространенных ограничений ввода (некоторые из них являются новыми в HTML5):

Атрибут	Описание
disabled	Указывает, что поле ввода должно быть отключено
max	Задает максимальное значение для поля ввода
maxlength	Указывает максимальное число символов для поля ввода
min	Задает минимальное значение для поля ввода
pattern	Задает регулярное выражение для проверки входного значения на
readonly	Указывает, что поле ввода предназначено только для чтения (не может быть изменено)
required	Указывает, что поле ввода является обязательным (должно быть заполнено)
size	Задает ширину (в символах) поля ввода
step	Задает юридические интервалы номеров для поля ввода
value	Задает значение по умолчанию для поля ввода

Подробнее об ограничениях ввода вы узнаете в следующей главе.

В следующем примере отображается числовое поле ввода, в котором можно ввести значение от 0 до 100 в шагах 10. Значение по умолчанию равно 30:

Диапазон входного типа

<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, элемент управления Slider). Диапазон по умолчанию — от 0 до 100. Однако можно установить ограничения на то, какие номера принимаются с атрибутами min, max и step:

Поиск типа ввода

<input type="search"> используется для полей поиска (поле поиска работает как обычное текстовое поле).

Тип ввода тел

<input type="tel"> используется для полей ввода, которые должны содержать телефонный номер.

Примечание: Тип Tel в настоящее время поддерживается только в Safari 8.

Время ввода типа

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

В зависимости от поддержки обозревателя в поле ввода может отображаться средство выбора времени.

URL-адрес типа ввода

<input type="url"> используется для полей ввода, которые должны содержать URL-адрес.

В зависимости от поддержки браузера, поле URL может быть автоматически проверено при отправке.

Некоторые смартфоны распознают тип URL-адреса и добавляют «. com» к клавиатуре для сопоставления ввода URL-адреса.

Тип ввода неделя

<input type="week"> позволяет пользователю выбрать неделю и год.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

Атрибут типа ввода HTML

Тег	Описание
<input type=»»>	Указывает тип ввода для отображения

Формы и их составляющие (form, input) в HTML

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

Самый простой способ передать данные на сайт — это использовать форму (тег ).

Материал в этой статье только описывает теги, которые могут содержаться в <form>. Но для программирования функционала необходимо знание языка, к примеру, PHP. Пожалуйста, посмотрите курс PHP, если хотите полноценно понять способ передачи данных на сайт.

Одним из простейших примеров формы может быть форма авторизации:

<form action="/index.php" method="POST">
   Пожалуйста, введите мэйл и пароль:<br>
   <input type="text" name="email" value="" placeholder="Ваш мэйл" required><br>
   <input type="password" name="password" value="" placeholder="Ваш пароль"><br>
   <input type="submit" value="Войти на сайт">
</form>

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

Все эти элементы строятся самим браузером.

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

Рассмотрим построчно теги из примера.

<form> … </form> — этот тег формы. Внутри него могут находиться различные элементы: текстовые поля, поля для ввода пароля и т.п. Во время отправки формы все поля внутри формы передадут свои значения на страницу, адрес которой указан в атрибуте action=»…». Способ передачи данных указывается в атрибуте method=»…». Подробнее о передаче данных из формы на сайт можно прочитать в разделе по программированию, к примеру, на языке PHP. В этой статье рассмотрим только виды полей для вода информации.

<input> — этот тег может отображать различные элемены в зависимости от значения атрибута type=». ..». На третьей строке он используется как поле для ввода текста type=»text». А на четвёртой стройке он используется для ввода пароляtype=»password». Отличие типов «text» от «password» в том, что в поле для ввода пароля все символы скрываются, заменяясь на звёздочки или точки.

В конце стретьей строки есть атрибут required. В переводе означает «обязательный». Если попытаться отправить форму (в нашем случае нажать на кнопку «Войти на сайт») без заполнения этого поля, то форма не отправится и выдаст предупреждение: На пятой строке <input> используется с атрибутом type=»submit». В результате чего браузер рисует кликабельную кнопку, которая запускает процесс отправки содержимого формы.

В атрибуте value=»…» задаётся значение, которое принимает элемент формы. К примеру, если в поле с атрибутом type=»text» задать value=»Это текст в форме», то после загрузки html страницы в этом текстовом поле будет стоять текст «Это текст в форме». В случае с полем type=»submit» значение в атрибуте value=»…» устанавливает надпись на кнопку отправки формы.

В примере все текстовые поля имеют атрибут value=»» (value равно пустоте, между двойными кавычками «» ничего нет). Поэтому на заднем фоне поля для ввода отображается текст-заглушка, которая сразу прячется, как только начинается ввод в поле. Текст этой заглушки можно задать через атрибут placeholder=»…».

Далее разберём подробнее какие ещё типы полей могут быть в формах. Рассмотрим самые востребованные.

input type=»radio»

Поле для ввода с атрибутом type=»radio» помогает сделать переключатель вариантов. К примеру, если пользователь должен выбрать только один вариант из списка, то код формы будет таким:

<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="radio" value="v1">Чеддер<br>
<input name="cheese" type="radio" value="v2" checked>Блю<br>
<input name="cheese" type="radio" value="v3">Камбоцола<br>
<input name="cheese" type="radio" value="v4">Морбье<br>
<input name="cheese" type="radio" value="v5">Смоленский<br>
<input name="cheese" type="radio" value="v6">Чечил<br>
</form>

На экране негобраузера форма будет выглядеть так: Обратите внимание, что все поля имеют атрибут name=»cheese» с одинаковым значением.

Это необходимо, потому что на одной странице могут находится несколько форм с радиокнопками. Но переключатель будет работать только внутри группы радиокнопок с одинаковым значением атрибута name. А значение value=»…» должно быть разным. именно value у выбранного пункта будет передано во время отправки формы.

В примере выше можно заметить, что на втором варианте ответа стоит атрибут checked. Он указывает на то, что во время загрузки страницы второй пункт будет отмечен как выбранный.

input type=»checkbox»

Если есть необходимость выбрать несколько пунктов из предложенных, то необходимо использовать type=»checkbox»:

<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="checkbox" value="v1">Чеддер<br>
<input name="cheese" type="checkbox" value="v2" checked>Блю<br>
<input name="cheese" type="checkbox" value="v3">Камбоцола<br>
<input name="cheese" type="checkbox" value="v4" checked>Морбье<br>
<input name="cheese" type="checkbox" value="v5" checked>Смоленский<br>
<input name="cheese" type="checkbox" value="v6">Чечил<br>
</form>

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

Как и в случае с type=»radio» можно задать checked для тех пунктов, которые должны быть отмечены по умолчанию после загрузки страницы.

input type=»file»

Одним из самых востребованных типов вода полей является поле для выбора файла type=»file». HTML формы с кнопкой загрузки файла выглядит так:

<form action="/index.php" method="POST">
Загрузите фото сыра:<br><br>
<input type="file"><br><br>
<input type="submit" value="Загрузить">
</form>

В браузере форма из этого примера будет выглядеть так: При клике на кнопку выбора файла откроется окно, где пользователь сможет указать файл для загрузки. Кнопка «Загрузить» (она же <input type=»submit»>) начинает процесс отправки формы вместе с выбранным файлом.

<textarea>

Если необходимо получить от пользователя очень длинный текст, то записывать его через текстовое поле <input type=»text»> будет проблематично, потому что это поле вмещает только одну строку.

К счастью, есть более удобное многострочное поле с возможностью изменения его размера. Такое поле создаётся с помощью тега <textarea>. Этот тег парный — он имеет открывающую и закрывающую часть. HTML код формы с этим полем выглядит так:

<form action="/index.php" method="POST">
Напишите стих про мышей:<br><br>
<textarea></textarea>
</form>

Браузер отобрасит поле для ввода текста в несколько строк с возможностью изменения размера за правый-нижний угол: В отличии от других input полей, у textarea нет атрибута value. Значение textarea находится непосредственно между тегами <textarea>…</textarea>. И если необходимо задать текст, который будет в этом поле после загрузки страницы, то нужно писать его именно между открывающимся и закрывающимся тегом <textarea>…</textarea>

— HTML: язык разметки гипертекста

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

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

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

Значение	A `DOMString` , представляющий адрес электронной почты, или пустой
События	`изменить` и `ввод`
Поддерживаемые общие атрибуты	`автозаполнение` , `список` , `maxlength` , `minlength` , `несколько` , `имя` , `шаблон` , `заполнитель` , `только чтение` , `требуется 0004, и размер и размер`
Атрибуты IDL	`список` и `значение`
Методы	`выберите ()`

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

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

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

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

Атрибут	Описание
`список`	Идентификатор элемента , который содержит необязательные предопределенные параметры автозаполнения
`макс. Длина`	Максимальное количество символов, которое должен принимать ввод
`Мин. Длина`	Минимальное количество символов, которое вводится и может считаться действительным
`кратно`	Разрешить или запретить ввод нескольких адресов электронной почты через запятую
`образец`	Регулярное выражение, содержимое которого должно совпадать, чтобы быть действительным
`заполнитель`	Примерное значение для отображения в поле ввода, когда оно пусто
`только чтение`	Логический атрибут, указывающий, должно ли содержимое ввода быть доступным только для чтения
`размер`	Число, указывающее, сколько символов должно быть в поле ввода.

список

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

maxlength

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

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

minlength

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

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

несколько

Логический атрибут, который, если он присутствует, указывает, что пользователь может ввести список из нескольких адресов электронной почты, разделенных запятыми и, необязательно, пробелами. См. Раздел «Разрешить использование нескольких адресов электронной почты» для примера или «Атрибут HTML: несколько» для получения дополнительных сведений.

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

шаблон

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

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

Совет: Используйте атрибут title , чтобы указать текст, который большинство браузеров будет отображать как всплывающую подсказку, чтобы объяснить, какие требования должны соответствовать шаблону. Вы также должны включить рядом другой пояснительный текст.

См. Подробности и пример в разделе «Проверка шаблона».

заполнитель

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

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

только для чтения
Логический атрибут, который, если он присутствует, означает, что это поле не может редактироваться пользователем. Однако его значение все еще можно изменить с помощью кода JavaScript, напрямую установив свойство HTMLInputElement value .
Примечание: Поскольку поле только для чтения не может иметь значение, требуется не оказывает никакого влияния на входы с указанным атрибутом только для чтения .
размер
Атрибут размер - это числовое значение, указывающее, сколько символов должно быть в ширину поле ввода.Значение должно быть числом больше нуля, а значение по умолчанию - 20. Поскольку ширина символов различается, это может быть или не быть точным, и на это не следует полагаться; результирующий ввод может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта ( шрифт используемые настройки).
Это означает, что , а не , устанавливает ограничение на количество символов, которые пользователь может ввести в поле. Он лишь приблизительно указывает, сколько людей можно увидеть одновременно.Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength .
Адреса электронной почты являются одними из наиболее часто вводимых форм текстовых данных в сети; они используются при входе на веб-сайты, при запросе информации, для подтверждения заказа, для веб-почты и т. д. Таким образом, тип ввода email может значительно облегчить вашу работу в качестве веб-разработчика, поскольку он может помочь упростить вашу работу при создании пользовательского интерфейса и логики для адресов электронной почты.Когда вы создаете входное сообщение электронной почты с правильным значением типа , электронной почты , вы получаете автоматическую проверку того, что введенный текст, по крайней мере, находится в правильной форме, чтобы потенциально быть допустимым адресом электронной почты. Это может помочь избежать случаев, когда пользователь неправильно набирает свой адрес или предоставляет неверный адрес.
Однако важно отметить, что этого недостаточно, чтобы гарантировать, что указанный текст является адресом электронной почты, который действительно существует, соответствует пользователю сайта или является приемлемым иным образом.Это гарантирует, что значение поля правильно отформатировано как адрес электронной почты.
Примечание : также важно помнить, что пользователь может повозиться с вашим HTML за кулисами, поэтому ваш сайт не должен использовать эту проверку для каких-либо целей безопасности. Вы должны проверить адрес электронной почты на стороне сервера любой транзакции, в которой предоставленный текст может иметь какие-либо последствия для безопасности любого рода.
Простой ввод электронной почты
В настоящее время все браузеры, реализующие этот элемент, реализуют его как стандартное поле ввода текста с основными функциями проверки.Тем не менее, спецификация дает браузеру свободу действий в этом вопросе. Например, элемент может быть интегрирован со встроенной адресной книгой устройства пользователя, чтобы можно было выбирать адреса электронной почты из этого списка. В простейшей форме ввод электронной почты может быть реализован следующим образом:

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

Теперь ввод считается действительным, когда вводится один адрес электронной почты или когда присутствует любое количество адресов электронной почты, разделенных запятыми, и, необязательно, некоторое количество пробелов.
Примечание : при использовании , кратного , значение может быть пустым.
Некоторые примеры действительных строк, когда указано , кратное :
""
"me @ example"
"[email protected]"
"me @ example.org, you @ example.org"
"[email protected], [email protected]"
"me @ example.org, you @ example.org, [email protected] "
Некоторые примеры недопустимых строк:
","
"я"
"[email protected] [email protected]"
Заполнители
Иногда бывает полезно предложить контекстную подсказку о том, какую форму должны принимать входные данные. Это может быть особенно важно, если в дизайне страницы нет описательных меток для каждого . Здесь на помощь приходят заполнителей .Заполнитель - это значение, которое демонстрирует форму, которую должно принимать значение , представляя пример допустимого значения, которое отображается внутри поля редактирования, когда значение элемента равно "". После ввода данных в поле заполнитель исчезает; если поле пусто, заполнитель появляется снова.
Здесь у нас есть ввод электронной почты с заполнителем [email protected] . Обратите внимание, как заполнитель исчезает и появляется снова, когда вы манипулируете содержимым поля редактирования.

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

Длина значения элемента
Размер не связан с ограничением длины для самого введенного адреса электронной почты, так что вы можете разместить поля в небольшом пространстве, при этом позволяя вводить более длинные строки адреса электронной почты. Вы можете указать минимальную длину в символах для введенного адреса электронной почты с помощью атрибута minlength ; аналогично используйте maxlength , чтобы установить максимальную длину введенного адреса электронной почты.
В приведенном ниже примере создается поле ввода адреса электронной почты шириной 32 символа, при этом требуется, чтобы его содержимое было не короче 3 символов и не длиннее 64 символов.

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

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

При наличии элемента и его s браузер предложит указанные значения в качестве возможных значений для адреса электронной почты; обычно это отображается как всплывающее или раскрывающееся меню, содержащее предложения.Хотя конкретный пользовательский интерфейс может отличаться от одного браузера к другому, обычно щелчок в поле редактирования представляет раскрывающийся список предлагаемых адресов электронной почты. Затем, по мере ввода пользователя, список фильтруется, чтобы отображались только совпадающие значения. Каждый набранный символ сужает список до тех пор, пока пользователь не сделает выбор или не введет настраиваемое значение.
Для входов электронной почты доступны два уровня проверки содержимого. Во-первых, есть стандартный уровень проверки, предлагаемый для всех s, который автоматически гарантирует, что содержимое соответствует требованиям, чтобы быть действительным адресом электронной почты.Но есть также возможность добавить дополнительную фильтрацию, чтобы обеспечить удовлетворение ваших собственных специализированных потребностей, если они у вас есть.
Важно : проверка HTML-формы - это , а не , заменяющий скрипты, которые гарантируют, что введенные данные находятся в правильном формате. Для кого-то слишком легко внести изменения в HTML, которые позволят им обойти проверку или удалите его полностью. Также есть возможность полностью обойти ваш HTML и отправить данные прямо на ваш сервер.Если ваш серверный код не может проверить данные, которые он получает, может случиться катастрофа, когда в вашу базу данных будут введены неправильно отформатированные данные (или данные, которые слишком большие, неправильного типа и т. Д.).
Базовая проверка
Браузеры, поддерживающие тип ввода электронной почты , автоматически обеспечивают проверку, чтобы гарантировать, что в поле ввода вводится только текст, соответствующий стандартному формату для адресов электронной почты в Интернете. [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 для стилизации ввода в зависимости от того, является ли текущее значение допустимым, см. Проверка данных формы.
Примечание : Существуют известные проблемы со спецификациями, связанные с международными доменными именами и проверкой адресов электронной почты в HTML.Подробнее см. Ошибку 15489 W3C.
Проверка шаблона
Если вам нужно, чтобы введенный адрес электронной почты был ограничен дальше, чем просто «любая строка, похожая на адрес электронной почты», вы можете использовать атрибут шаблон , чтобы указать регулярное выражение, значение должно совпадать чтобы это было действительным. Если указан атрибут multiple , каждый отдельный элемент в списке значений, разделенных запятыми, должен соответствовать регулярному выражению.
Например, предположим, вы создаете страницу для сотрудников Best Startup Ever, Inc.что позволит им обратиться за помощью в свой ИТ-отдел. В нашей упрощенной форме пользователь должен ввести свой адрес электронной почты и сообщение с описанием проблемы, с которой ему требуется помощь. Мы хотим убедиться, что пользователь не только предоставляет действительный адрес электронной почты, но и в целях безопасности мы требуем, чтобы адрес был внутренним корпоративным адресом электронной почты.
Поскольку входные данные типа email проверяют как стандартную проверку адреса электронной почты , так и заданный шаблон , вы можете легко реализовать это.Посмотрим как:
<форма> Ваш адрес электронной почты Требуется Запрос
Наш
содержит один типа email для адреса электронной почты пользователя, </code> для ввода своего сообщения для ИТ-специалистов и <code> <input> </code> типа <code> «отправить» </code>, который создает кнопку для отправки формы. Каждое текстовое поле ввода имеет связанный с ним <code> <label> </code>, чтобы пользователь знал, что от него ожидается.</p> <p> Рассмотрим подробнее поле ввода адреса электронной почты. Атрибуты <code> size </code> и <code> maxlength </code> имеют значение 64, чтобы показать место для 64 символов адреса электронной почты и ограничить количество фактически вводимых символов максимумом 64. Требуемый атрибут </code> <code> равен указано, что делает обязательным предоставление действительного адреса электронной почты. </p> <p> Предоставляется соответствующий заполнитель <code> </code>— <code> username @ beststartupever.com </code> - чтобы продемонстрировать, что составляет действительную запись. Эта строка демонстрирует как необходимость ввода адреса электронной почты, так и предполагает, что это должна быть корпоративная учетная запись beststartupever.com. Это в дополнение к тому факту, что при использовании типа <code> email </code> будет проверять текст, чтобы убедиться, что он отформатирован как адрес электронной почты. Если текст в поле ввода не является адресом электронной почты, вы получите сообщение об ошибке, которое выглядит примерно так: </p> <p> </p> <p> Если бы мы оставили все как есть, мы бы по крайней мере проверяли подлинность на законных адресах электронной почты.Но мы хотим пойти еще дальше: мы хотим убедиться, что адрес электронной почты действительно имеет вид «<em> имя пользователя </em> @ beststartupever.com». Здесь мы будем использовать шаблон <code> </code>. Мы устанавливаем шаблон <code> </code> на <code>. + @ Beststartupever.com </code>. Это простое регулярное выражение запрашивает строку, состоящую по крайней мере из одного символа любого типа, а затем символа «@», за которым следует имя домена «beststartupever.com». </p> <p> Обратите внимание, что это даже близко не к адекватному фильтру для действительных адресов электронной почты; это позволило бы такие вещи, как "@beststartupever.com "(обратите внимание на начальный пробел) или" @@ beststartupever.com ", ни один из которых не является допустимым. Однако браузер запускает как стандартный фильтр адресов электронной почты <em>, так и наш настраиваемый шаблон </em> для указанного текста. В результате , мы завершаем проверку, которая гласит: «Убедитесь, что это похоже на действительный адрес электронной почты, и если это так, убедитесь, что это также адрес beststartupever.com». </p> <p> Рекомендуется использовать атрибут <code> title </code> вместе с шаблоном <code> </code>. Если вы это сделаете, заголовок <code> </code> <em> должен </em> описывать шаблон.То есть он должен объяснять, какой формат должны принимать данные, а не любую другую информацию. Это потому, что заголовок <code> </code> может отображаться или произноситься как часть сообщения об ошибке проверки. Например, браузер может отобразить сообщение «Введенный текст не соответствует требуемому шаблону». за которым следует указанный вами <code> заголовок </code>. Если ваш заголовок <code> </code> представляет собой что-то вроде «Адрес электронной почты», результатом будет сообщение «Введенный текст не соответствует требуемому шаблону.Адрес электронной почты », что не очень хорошо. </p> <p> Вот почему вместо этого мы указываем строку «Укажите только лучший корпоративный адрес электронной почты для стартапов». В результате полное сообщение об ошибке может выглядеть примерно так: «Введенный текст не соответствует требуемому шаблону. предоставляйте только лучший корпоративный адрес электронной почты для стартапов ". </p> <p> </p> <p> <strong> Примечание </strong>: Если у вас возникнут проблемы при написании проверочных регулярных выражений, и они не работают должным образом, проверьте консоль вашего браузера; там могут быть полезные сообщения об ошибках, которые помогут вам в решении проблемы.</p> <p> Здесь у нас есть ввод электронной почты с идентификатором <code> emailAddress </code>, длина которого может составлять не более 256 символов. Само поле ввода имеет физическую ширину 64 символа и отображает текст <code> user@example.gov </code> в качестве заполнителя всякий раз, когда поле пусто. Кроме того, с помощью атрибута <code> multiple </code> поле настраивается так, чтобы позволить пользователю вводить ноль или более адресов электронной почты, разделенных запятыми, как описано в разделе Разрешение нескольких адресов электронной почты.В качестве последнего штриха атрибут </code> list </code> содержит идентификатор <code> <datalist> </code>, чьи <code> <option> </code> s определяют набор предлагаемых значений, из которых пользователь может выбирать. </p> <p> В качестве дополнительного штриха элемент <code> <label> </code> используется для установки метки для поля ввода электронной почты, с его атрибутом <code> для </code>, ссылающимся на <code> emailAddress </code> ID элемента <code> <input> </code>. Связывая два элемента таким образом, щелчок по метке будет фокусировать элемент ввода.</p><pre> <code> <label for = "emailAddress"> Электронная почта </label> <br/> <input type = "email" placeholder = "user@example.gov" list = "defaultEmails" size = "64" maxlength = "256" несколько> <datalist> <option value = "jbond007@mi6.defence.gov.uk"> <option value = "jbourne@unknown.net"> <option value = "nfury@shield.org"> <option value = "tony@starkindustries.com"> <option value = "hulk@grrrrrrrr.arg"> </datalist> </code> </pre><p> Таблицы BCD загружаются только в браузере </p> <h2><span class="ez-toc-section" id="_HTML-4"> Типы ввода HTML </span></h2> <hr/> <p> В этой главе описываются различные типы элемента HTML <code> <input> </code>.</p> <hr/> <h3><span class="ez-toc-section" id="_HTML-5"> Типы ввода HTML </span></h3> <p> Вот различные типы ввода, которые можно использовать в HTML: </p> <ul> <li> <code> <input type = "button"> </code> </li> <li> <code> <input type = "checkbox"> </code> </li> <li> <code> <input type = "color"> </code> </li> <li> <code> <input type = "date"> </code> </li> <li> <code> <input type = "datetime-local"> </code> </li> <li> <code> <input type = "email"> </code> </li> <li> <code> <input type = "file"> </code> </li> <li> <code> <input type = "hidden"> </code> </li> <li> <code> <input type = "image"> </code> </li> <li> <code> <input type = "month"> </code> </li> <li> <code> <input type = "number"> </code> </li> <li> <code> <input type = "password"> </code> </li> <li> <code> <input type = "radio"> </code> </li> <li> <code> <input type = "range"> </code> </li> <li> <code> <input type = "reset"> </code> </li> <li> <code> <input type = "search"> </code> </li> <li> <code> <input type = "submit"> </code> </li> <li> <code> <input type = "tel"> </code> </li> <li> <code> <input type = "text"> </code> </li> <li> <code> <input type = "time"> </code> </li> <li> <code> <input type = "url"> </code> </li> <li> <code> <input type = "week"> </code> </li> </ul> <p> <strong> Совет: </strong> Значение по умолчанию для атрибута <code> типа </code> является "текст".</p> <hr/> <h3><span class="ez-toc-section" id="i-38"> Тип ввода Текст </span></h3> <p> <code> <input type = "text"> </code> определяет <strong> однострочное поле ввода текста </strong>: </p> <h4><span class="ez-toc-section" id="i-39"> Пример </span></h4> <p> <form> <br/> <label for = "fname"> Имя: </label> <br> <br/> <input type = "text" name = "fname"> <br> <br/> <label for = "lname"> Последний name: </label> <br> <br/> <input type = "text" name = "lname"> <br/> </form> </p> Попробуй сам " <p> Вот как HTML-код выше будет отображаться в браузере: </p> Имя: <br/> <br/> Фамилия: <br/> <br/> <hr/> <h3><span class="ez-toc-section" id="i-40"> Тип ввода Пароль </span></h3> <p> <code> <input type = "password"> </code> определяет поле пароля <strong> </strong>: </p> <h4><span class="ez-toc-section" id="i-41"> Пример </span></h4> <p> <form> <br/> <label for = "username"> Имя пользователя: </label> <br> <br/> <input type = "text" name = "username"> <br> <br/> <label for = "pwd"> Пароль: </label> <br> <br/> <input type = "password" name = "pwd"> <br/> </form> </p> Попробуй сам " <p> Вот как HTML-код выше будет отображаться в браузере: </p> Имя пользователя: <br/> <br/> Пароль: <br/> <p> Символы в поле пароля замаскированы (показаны звездочками или кружками).</p> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-42"> Тип ввода Отправить </span></h3> <p> <code> <input type = "submit"> </code> определяет кнопку для <strong> отправка данных формы </strong> обработчику форм <strong> </strong>. </p> <p> Обработчик формы обычно представляет собой страницу сервера со сценарием для обработки входные данные. </p> <p> Обработчик формы указан в действии формы <code> </code> атрибут: </p> <h4><span class="ez-toc-section" id="i-43"> Пример </span></h4> <p> <form action = "/ action_page.php"> <br/> <label for = "fname"> Первый name: </label> <br> <br/> <input type = "text" name = "fname" value = "John"> <br> <br/> <label for = "lname"> Фамилия: </label> <br> <br/> <input type = "text" name = "lname" value = "Doe"> <br> <br> <br/> <input type = "submit" value = "Submit"> <br/> </form> </p> Попробуй сам " <p> Вот как HTML-код выше будет отображаться в браузере: </p> <p> Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по умолчанию: </p> <h4><span class="ez-toc-section" id="i-44"> Пример </span></h4> <p> <form action = "/ action_page.php "> <br/> <label for =" fname "> Первый name: </label> <br> <br/> <input type = "text" name = "fname" value = "John"> <br> <br/> <label for = "lname"> Фамилия: </label> <br> <br/> <input type = "text" name = "lname" value = "Doe"> <br> <br> <br/> <input type = "submit"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-45"> Сброс типа входа </span></h3> <p> <code> <input type = "reset"> </code> определяет кнопку сброса <strong> </strong> который сбросит все значения формы до значений по умолчанию: </p> <h4><span class="ez-toc-section" id="i-46"> Пример </span></h4> <p> <form action = "/ action_page.php "> <br/> <label for =" fname "> Первый name: </label> <br> <br/> <input type = "text" name = "fname" value = "John"> <br> <br/> <label for = "lname"> Фамилия: </label> <br> <br/> <input type = "text" name = "lname" value = "Doe"> <br> <br> <br/> <input type = "submit" value = "Submit"> <br/> <input type = "reset"> <br/> </form> </p> Попробуй сам " <p> Вот как HTML-код выше будет отображаться в браузере: </p> <p> Если вы измените входные значения и затем нажмете кнопку «Сброс», данные формы будут сброшены до значений по умолчанию.</p> <hr/> <h3><span class="ez-toc-section" id="i-47"> Тип входа Радио </span></h3> <p> <code> <input type = "radio"> </code> определяет переключатель <strong> </strong>. </p> <p> Радиокнопки позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов: </p> <h4><span class="ez-toc-section" id="i-48"> Пример </span></h4> <p> <form> <br/> <input type = "radio" name = "пол" value = "male"> <br/> <label for = "male"> Male </label> <br> <br/> <input type = "radio" name = "пол" value = "женский"> <br/> <label for = "female"> Женский </label> <br> <br/> <input type = "radio" name = "пол" value = "other"> <br/> <label for = "other"> Другое </label> <br/> </form> </p> Попробуй сам " <p> Вот как HTML-код выше будет отображаться в браузере: </p> Мужской <br/> Женский <br/> Другое <hr/> <h3><span class="ez-toc-section" id="i-49"> Флажок типа ввода </span></h3> <p> <code> <input type = "checkbox"> </code> определяет флажок <strong> </strong>.</p> <p> Флажки позволяют пользователю выбрать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов. </p> <h4><span class="ez-toc-section" id="i-50"> Пример </span></h4> <p> <form> <br/> <input type = "checkbox" name = "vehicle1" value = "Bike"> <br/> <label for = "vehicle1"> У меня велосипед </label> <br> <br/> <input type = "checkbox" name = "vehicle2" value = "Car"> <br/> <label for = "vehicle2"> У меня есть машина </label> <br> <br/> <input type = "checkbox" name = "vehicle3" value = "Boat"> <br/> <label for = "vehicle3"> У меня есть лодка </label> <br/> </form> </p> Попробуй сам " <p> Вот как HTML-код выше будет отображаться в браузере: </p> У меня есть велосипед <br/> у меня есть машина <br/> у меня есть лодка <hr/> <h3><span class="ez-toc-section" id="i-51"> Кнопка типа ввода </span></h3> <p> <code> <input type = "button"> </code> определяет кнопку <strong> </strong>: </p> <h4><span class="ez-toc-section" id="i-52"> Пример </span></h4> <p> <input type = "button" value = "Нажми меня!"> </p> Попробуй сам " <p> Вот как HTML-код выше будет отображаться в браузере: </p> <hr/> <h3><span class="ez-toc-section" id="i-53"> Тип ввода Цвет </span></h3> <p> <code> <input type = "color"> </code> используется для полей ввода, которые должны содержать цвет.</p> <p> В зависимости от поддержки браузером палитра цветов может отображаться в поле ввода. </p> <h4><span class="ez-toc-section" id="i-54"> Пример </span></h4> <p> <form> <br/> <label for = "favcolor"> Выберите свой любимый цвет: </label> <br/> <input type = "color" name = "favcolor"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-55"> Тип ввода Дата </span></h3> <p> <code> <input type = "date"> </code> используется для полей ввода, которые должны содержать дату. </p> <p> В зависимости от поддержки браузером в поле ввода может отображаться выбор даты.</p> <h4><span class="ez-toc-section" id="i-56"> Пример </span></h4> <p> <form> <br/> <label for = "birthday"> День рождения: </label> <br/> <input type = "date" name = "birthday"> <br/> </form> </p> Попробуй сам " <p> Вы также можете использовать атрибуты <code> min </code> и <code> max </code>, чтобы добавить ограничения для дат: </p> <h4><span class="ez-toc-section" id="i-57"> Пример </span></h4> <p> <form> <br/> <label for = "datemax"> Введите дату до 1980-01-01: </label> <br/> <input type = "date" name = "datemax" max = "1979-12-31"> <br> <br> <br/> <label for = "datemin"> Введите дату после 2000-01-01: </label> <br/> <input type = "date" name = "datemin" min = "2000-01-02"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-58"> Тип ввода Локальная дата и время </span></h3> <p> <code> <input type = "datetime-local"> </code> указывает поле ввода даты и времени без часового пояса.</p> <p> В зависимости от поддержки браузером в поле ввода может отображаться выбор даты. </p> <h4><span class="ez-toc-section" id="i-59"> Пример </span></h4> <p> <form> <br/> <label for = "birthdaytime"> День рождения (дата и время): </label> <br/> <input type = "datetime-local" name = "birthdaytime"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-60"> Тип ввода Электронная почта </span></h3> <p> <code> <input type = "email"> </code> используется для полей ввода, которые должны содержать адрес электронной почты.</p> <p> В зависимости от поддержки браузером адрес электронной почты может быть автоматически подтвержден при отправке. </p> <p> Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты. </p> <h4><span class="ez-toc-section" id="i-61"> Пример </span></h4> <p> <form> <br/> <label for = "email"> Введите свой адрес электронной почты: </label> <br/> <input type = "email" name = "email"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-62"> Файл входного типа </span></h3> <p> <code> <input type = "file"> </code> определяет поле выбора файла и кнопку «Обзор» для загрузки файлов.</p> <h4><span class="ez-toc-section" id="i-63"> Пример </span></h4> <p> <form> <br/> <label for = "myfile"> Выберите файл: </label> <br/> <input type = "file" name = "myfile"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-64"> Тип ввода Скрытый </span></h3> <p> <code> <input type = "hidden"> </code> определяет скрытое поле ввода (невидимое для пользователя). </p> <p> Скрытое поле позволяет веб-разработчикам включать данные, которые нельзя увидеть или изменяется пользователями при отправке формы.</p> <p> В скрытом поле часто хранится запись базы данных, которую необходимо обновить. когда форма отправлена. </p> <p> <strong> Примечание: </strong> Пока значение не отображается пользователю в содержимое страницы, оно видно (и может быть отредактировано) с помощью любого разработчика браузера инструменты или функцию «Просмотр исходного кода». Не используйте скрытые входы как форму безопасность! </p> <h4><span class="ez-toc-section" id="i-65"> Пример </span></h4> <p> <form> <br/> <label for = "fname"> Имя: </label> <br/> <input type = "text" name = "fname"> <br> <br> <br/> <input type = "hidden" name = "custId" value = "3487"> <br/> <ввод type = "submit" value = "Submit"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-66"> Тип ввода Месяц </span></h3> <p> <code> <input type = "month"> </code> позволяет пользователю выбрать месяц и год.</p> <p> В зависимости от поддержки браузером в поле ввода может отображаться выбор даты. </p> <h4><span class="ez-toc-section" id="i-67"> Пример </span></h4> <p> <form> <br/> <label for = "bdaymonth"> День рождения (месяц и год): </label> <br/> <input type = "month" name = "bdaymonth"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-68"> Номер типа ввода </span></h3> <p> <code> <input type = "number"> </code> определяет <strong> числовое поле ввода </strong>. </p> <p> Вы также можете установить ограничения на то, какие номера принимаются.</p> <p> В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5: </p> <h4><span class="ez-toc-section" id="i-69"> Пример </span></h4> <p> <form> <br/> <label for = "amount"> Количество (от 1 до 5): </label> <br/> <input type = "number" name = "amount" min = "1" max = "5"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-70"> Ограничения ввода </span></h3> <p> Вот список некоторых общих ограничений ввода: </p> <table> <tr> <th> Атрибут </th> <th> Описание </th> </tr> <tr> <td> проверено </td> <td> Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type = "checkbox" или type = "radio"). </td> </tr> <tr> <td> отключен </td> <td> Указывает, что поле ввода должно быть отключено </td> </tr> <tr> <td> макс </td> <td> Задает максимальное значение для поля ввода </td> </tr> <tr> <td> макс. Длина </td> <td> Задает максимальное количество символов для поля ввода </td> </tr> <tr> <td> мин </td> <td> Задает минимальное значение для поля ввода </td> </tr> <tr> <td> узор </td> <td> Задает регулярное выражение для проверки входного значения на соответствие </td> </tr> <tr> <td> только чтение </td> <td> Указывает, что поле ввода доступно только для чтения (не может быть изменено) </td> </tr> <tr> <td> требуется </td> <td> Указывает, что поле ввода является обязательным (должно быть заполнено) </td> </tr> <tr> <td> размер </td> <td> Задает ширину (в символах) поля ввода </td> </tr> <tr> <td> шаг </td> <td> Задает допустимые интервалы номеров для поля ввода </td> </tr> <tr> <td> значение </td> <td> Задает значение по умолчанию для поля ввода </td> </tr> </table> <p> Вы узнаете больше об ограничениях ввода в следующей главе.</p> <p> В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию - 30: </p> <h4><span class="ez-toc-section" id="i-71"> Пример </span></h4> <p> <form> <br/> <label for = "amount"> Количество: </label> <br/> <input type = "number" name = "amount" min = "0" max = "100" step = "10" value = "30"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-72"> Диапазон типа ввода </span></h3> <p> <code> <input type = "range"> </code> определяет элемент управления для ввода числа, точное значение которого не важно (например, ползунок).По умолчанию диапазон от 0 до 100. Однако вы можете установить ограничения на то, что числа принимаются с атрибутами <code> min </code>, <code> max </code> и <code> step </code>: </p> <h4><span class="ez-toc-section" id="i-73"> Пример </span></h4> <p> <form> <br/> <label for = "vol"> Объем (от 0 до 50): </label> <br/> <input type = "range" name = "vol" min = "0" max = "50"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-74"> Поиск типа ввода </span></h3> <p> <code> <input type = "search"> </code> используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).</p> <h4><span class="ez-toc-section" id="i-75"> Пример </span></h4> <p> <form> <br/> <label for = "gsearch"> Искать в Google: </label> <br/> <input type = "search" name = "gsearch"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-76"> Тип входа Тел. </span></h3> <p> <code> <input type = "tel"> </code> используется для полей ввода, которые должны содержать номер телефона. </p> <h4><span class="ez-toc-section" id="i-77"> Пример </span></h4> <p> <form> <br/> <label for = "phone"> Введите свой номер телефона: </label> <br/> <input type = "tel" name = "phone" pattern = "[0-9] {3} - [0-9] {2} - [0-9] {3}"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-78"> Тип ввода Время </span></h3> <p> <code> <input type = "time"> </code> позволяет пользователю выбрать время (без часового пояса).</p> <p> В зависимости от поддержки браузера в поле ввода может отображаться указатель времени. </p> <h4><span class="ez-toc-section" id="i-79"> Пример </span></h4> <p> <form> <br/> <label for = "appt"> Выберите время: </label> <br/> <input type = "time" name = "appt"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="_URL"> Тип ввода URL </span></h3> <p> <code> <input type = "url"> </code> используется для полей ввода, которые должны содержать URL-адрес. </p> <p> В зависимости от поддержки браузером поле url может автоматически проверяться. при отправке.</p> <p> Некоторые смартфоны распознают тип URL и добавляют на клавиатуре ".com" для соответствия ввод URL. </p> <h4><span class="ez-toc-section" id="i-80"> Пример </span></h4> <p> <form> <br/> <label for = "homepage"> Добавьте свою домашнюю страницу: </label> <br/> <input type = "url" name = "homepage"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-81"> Тип ввода Неделя </span></h3> <p> <code> <input type = "week"> </code> позволяет пользователю выбрать неделю и год. </p> <p> В зависимости от поддержки браузером в поле ввода может отображаться выбор даты.</p> <h4><span class="ez-toc-section" id="i-82"> Пример </span></h4> <p> <form> <br/> <label for = "week"> Выберите неделю: </label> <br/> <input type = "week" name = "week"> <br/> </form> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="_HTML-6"> Упражнения HTML </span></h3> <h3><span class="ez-toc-section" id="i-83"> Проверьте себя упражнениями </span></h3> <h3><span class="ez-toc-section" id="i-84"> упражнение: </span></h3> <p> В форме ниже добавьте поле ввода для текста с именем «имя пользователя». </p> <p> <form action = "/ action_page.php"> <br/> <> <br/> </form> </p> <br/> Отправить ответ » <p> Начало упражнения </p> <hr/> <h3><span class="ez-toc-section" id="_HTML-7"> Атрибут типа ввода HTML </span></h3> <br/> <br/> <h2><span class="ez-toc-section" id="_Html5"> Как использовать тип ввода Html5 Электронная почта </span></h2> <p> До появления HTML5 обработка адресов электронной почты требовала больше работы для проверки адресов электронной почты с помощью Javascript.Что ж, все это теперь не нужно с новым электронным письмом типа ввода HTML5. </p> <p> Элемент ввода электронной почты был специально разработан для обработки и проверки адресов электронной почты. В зависимости от браузера он будет предупреждать пользователя о том, что введенная информация неверна, и форма не будет отправлена, пока пользователь не внесет исправления. </p> <h3><span class="ez-toc-section" id="i-85"> Образец кода: </span></h3><pre> <code data-lang="html"> <label for = "email_input"> Введите свой адрес электронной почты: </label> <input type = "email" name = "email" placeholder = "Ваш адрес электронной почты"> </code> </pre><h3><span class="ez-toc-section" id="i-86"> Общее использование </span></h3> <p> Сохраните следующий код в текстовом документе и откройте его в веб-браузере.</p><pre> <code data-lang="css"> <! DOCTYPE html> <html> <head> <стиль> тело { padding-top: 200 пикселей; padding-left: 300 пикселей } </style> </head> <body> <p> Пожалуйста, укажите ваш текущий адрес электронной почты <форма> & nbsp; <input type = "email"> </form> <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_a5525df7354e9c4926a53db2b62ba665.js"></script></body> </code> </pre><p> Вот как должна выглядеть страница: </p> <p> Если вы хотите собрать несколько адресов одновременно, вы можете добавить атрибут multiple: </p><pre> <code data-lang="html"> <input type = "email" multiple> </code> </pre><p> Теперь пользователь может ввести один или несколько адресов через запятую.</p> <h3><span class="ez-toc-section" id="i-87"> Проверка </span></h3> <p> Браузеры, поддерживающие электронную почту типа ввода, предоставляют поддержку проверки различными способами. Однако все браузеры используют общий алгоритм проверки, следующий этому шаблону: </p> <p> name@subdomain.dom </p> <p> минимальные требования: @ и. символы и отсутствие пробелов между символами. Обратите внимание, что невозможно проверить, существует ли указанный адрес. Это проблема, которую должен решить ваш серверный скрипт. Хороший способ проверить действительные адреса электронной почты - отправить ссылку на адрес электронной почты, при нажатии на которую будет подтверждено, что адрес электронной почты действителен.</p> <h4><span class="ez-toc-section" id="Mozilla_Firefox"> Mozilla Firefox </span></h4> <p> Как только пользователь завершит ввод и перейдет к другому элементу, Firefox проверит введенные данные. Если это недействительный адрес электронной почты, ввод будет отображаться с красной рамкой, как показано ниже: <br/> </p> <p> Если пользователь нажимает кнопку отправки, не изменяя предоставленный адрес электронной почты, форма не будет отправлена, и появится всплывающая подсказка с сообщением об ошибке на вводе. <br/> </p> <h4><span class="ez-toc-section" id="Google_Chrome"> Google Chrome </span></h4> <p> Google Chrome не обеспечивает визуальной поддержки, когда пользователь вводит недопустимые данные.</p> <p> Однако при отправке появляется сообщение об ошибке со всплывающей подсказкой, которая подсказывает, что должен предоставить пользователь. </p> <p> Если вы хотите предоставить пользователю настраиваемое сообщение об ошибке, вы можете использовать атрибут title: </p><pre> <code data-lang="html"> <input type = "email" title = "Укажите действительный адрес электронной почты!"> </code> </pre><h3><span class="ez-toc-section" id="i-88"> Поддержка браузера </span></h3> <p> Тип ввода электронной почты широко поддерживается во всех современных браузерах. В таблице ниже указана минимальная поддерживаемая версия.IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0 </p> <p> Для получения дополнительной информации о поддержке браузера см .: Могу ли я использовать тип ввода электронной почты </p> <p> Обычно, если используемая версия браузера не поддерживает этот тип ввода, вместо него будет отображаться текст типа ввода. Когда вы обрабатываете данные, отправленные на стороне сервера, обязательно проверьте данные самостоятельно, прежде чем принимать их. </p> <p> На платформах Android и IOS клавиатура автоматически включает символы @ и. клавиши всякий раз, когда тип ввода - электронная почта.</p> <h3> </h3><strong> Зачем нужен этот новый тип ввода </strong> </h3> <ul> <li> Электронная почта с типом ввода упрощает веб-разработку, поскольку проверка выполняется в браузере. Если указан обязательный атрибут, браузер не примет форму для отправки. </li> <li> Вы можете выбрать стиль для всех электронных писем на вашем веб-сайте в определенном стиле, чтобы они отображались в стандартном стиле во всех направлениях. </li> <li> Мобильные устройства могут настроить программную клавиатуру в соответствии с вводом электронной почты (с @ и.легкодоступный </li> </ul> <h3><span class="ez-toc-section" id="_CSS"> Прикладной CSS </span></h3> <p> Чтобы применить определенный стиль только к полям ввода электронной почты, используйте селектор атрибутов следующим образом: </p><pre> <code data-lang="css"> input [type = "email"] { цвет фона: #ccc; } </code> </pre><h3><span class="ez-toc-section" id="i-89"> Демо </span></h3> <h4><span class="ez-toc-section" id="i-90"> См. Также </span></h4> <h2><span class="ez-toc-section" id="_input_type_email"> элемент input (type = email) </span></h2> <h4><span class="ez-toc-section" id="i-91"> Специальные атрибуты </span></h4> <h5><span class="ez-toc-section" id="i-92"> автофокус </span></h5> <p> Логическое значение, указывающее браузеру установить фокус на этот элемент управления, когда документ завершил загрузку или когда отображается диалоговое окно <code> </code>, в котором находится элемент управления.Если атрибут имеет значение «autofocus» или пустая строка («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после загрузки страницы или диалогового окна <code> </code>. </p> <p> Пример </p><pre> <code> <p> Адрес электронной почты: <input type = "email" name = "emailaddress" autofocus> </p> </code> </pre><h5><span class="ez-toc-section" id="i-93"> отключены </span></h5> <p> Логическое значение, указывающее, отключен ли элемент управления.Если атрибут принимает значение «отключен» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен. </p> <p> Отключенные элементы управления отображаются серым цветом (если они видны), блокируются от взаимодействия с пользователем и, что более важно, их значения (если есть) не отправляются при отправке формы <code> </code>. </p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Адрес электронной почты реферала: <input type = "email" name = "refereremail" value = "jhon @ yahoo.com "отключен> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-94"> форма </span></h5> <p> Значение атрибута <code> id </code> формы, с которой связан этот элемент управления. </p> <p> Этот атрибут является новым в <abbr title="Hypertext Markup Language"> HTML </abbr> 5 и помогает определять принадлежность элементов управления во вложенных или удаленных формах. </p> <p> Пример </p><pre> <code> <p> Электронная почта: <input type = "email" name = "emailaddress" form = "form1"> </p> <form action = "../../form-result.php "method =" post "target =" _ blank "> <p> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-95"> список </span></h5> <p> Маркер, соответствующий значению атрибута <code> id </code> списка данных <code> </code>, с которым связан этот элемент управления. Список данных <code> </code>, на который ссылается этот атрибут, предоставит ряд предложений, которые пользователи могут выбрать для автозаполнения элемента управления. </p> <p> Браузер поддерживает <code> datalist </code> не полностью.Авторам, возможно, придется полагаться на скрипты, чтобы обеспечить кроссбраузерность этой функциональности. </p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Контактный адрес: <input type = "email" name = "contactaddress" list = "emailslist"> <input type = "submit" value = "Отправить данные"> </p> </form> <datalist> <option value = "info@supermegaco.com"> <option value = "sales @ supermegaco.com "> <option value = "jhonsmith@supermegaco.com"> <option value = "alansmith@supermegaco.com"> </datalist> </code> </pre><h5><span class="ez-toc-section" id="i-96"> макс. Длина </span></h5> <p> Целое число, указывающее максимальное количество символов, которое может иметь значение этого элемента управления. </p> <p> Авторам не следует полагаться на атрибут <code> maxlength </code>. Пользователи всегда могут отправить форму <code> </code>, если браузеры (некоторые намеренно) не поддерживают эту функцию.</p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Электронная почта: <input type = "email" name = "emailaddress" maxlength = "30"> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-97"> мин. Длина </span></h5> <p> Целое число, указывающее минимальное количество символов, которое может иметь значение этого элемента управления.</p> <p> Авторы не должны полагаться на атрибут <code> minlength </code>. Пользователи всегда могут отправить форму <code> </code>, если браузеры (некоторые намеренно) не поддерживают эту функцию. </p> <p> Браузер поддерживает атрибут <code> minlength </code> на очень низком уровне (по состоянию на 2014/12/18). Авторам не следует полагаться на этот атрибут, пока поддержка не возрастет. </p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Электронная почта: <input type = "email" name = "emailaddress" minlength = "8"> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-98"> кратное </span></h5> <p> Логическое значение, указывающее, должен ли элемент управления принимать несколько значений или нет.Если значение в этом атрибуте "несколько" или пустая строка (""), или если атрибут просто присутствует, элемент управления должен принимать несколько значений. </p> <p> Браузеры должны предоставлять интерфейс, позволяющий пользователям добавлять, редактировать и удалять адреса электронной почты из элемента управления, но большинство из них предоставляет только текстовое поле с проверкой соответствия для списка адресов электронной почты, разделенных запятыми. </p> <p> Пример </p><pre> <code> <form action = "../../form-result.php "method =" post "target =" _ blank "> <p> Адреса электронной почты: <input type = "email" name = "emails" multiple> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-99"> название </span></h5> <p> Имя элемента управления. Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута <code> значение </code>. Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.</p> <p> В настоящее время значение <code> isindex </code>, ранее использовавшееся особым образом в некоторых браузерах и включенное в стандарт <abbr title="Lenguaje de marcas de hipertexto"> HTML </abbr>, в этом атрибуте не допускается. </p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Новый адрес электронной почты: <input type = "email" name = "newemail"> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-100"> узор </span></h5> <p> Регулярное выражение для сопоставления со значением элемента управления перед отправкой формы <code> </code>.Этот атрибут можно использовать для указания формата, который пользователи должны будут соблюдать при заполнении поля. Если этот шаблон не соблюдается, при отправке будет показано сообщение об ошибке, и процесс будет отменен (если атрибут <code> formnovalidate </code> не присутствует в форме <code> или кнопке отправки). </p> <p> Атрибут <code> title </code> имеет особое значение, когда присутствует этот атрибут: ожидается, что он предоставит объяснение правил, применимых к полю.Браузеры могут использовать информацию из <code>, заголовок </code>, чтобы составить сообщение об ошибке, показываемое пользователю при отмене процесса отправки. </p> <p> Регулярное выражение - это последовательность символов, которая формирует шаблон поиска, в основном для использования при сопоставлении шаблонов со строками или <i> операциях, подобных поиску и замене </i>. </p> <p> Браузеры могут выполнять некоторую проверку входных данных электронной почты. В таких случаях атрибут <code> шаблона </code> может использоваться для выполнения второй проверки после стандартной проверки, позволяя авторам устанавливать дополнительные ограничения.</p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Электронная почта (только для серверов .com): <input type = "email" name = "emailaddress" pattern = ". + \. Com" title = "Принимаются только правильно сформированные адреса электронной почты, принадлежащие серверам .com"> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-101"> заполнитель </span></h5> <p> Отрывок текста, который должен дать подсказку о том, как следует заполнять поле, например примеры или краткие описания.Браузеры могут отображать содержимое этого атрибута в элементе управления, пока он не имеет значения. Как только пользователи начнут записывать свой собственный текст, заполнитель <code> текст </code> должен исчезнуть из элемента управления. </p> <p> Авторам не следует использовать этот атрибут для замены метки. Ярлыки предназначены для обозначения заголовка, а заполнитель должен давать небольшую подсказку о том, как заполнить поле. Кроме того, ожидается, что текст-заполнитель исчезнет, когда пользователь начнет вводить элемент управления.</p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Электронная почта: <input type = "email" name = "emailaddress" placeholder = "user@server.com"> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-102"> только чтение </span></h5> <p> Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления.Если этот атрибут имеет значение «только для чтения» или пустую строку («»), или если он просто присутствует, пользователю не будет разрешено изменять значение в элементе управления. </p> <p> Хотя этот атрибут предотвращает изменение значения элемента управления, не все взаимодействия блокируются: пользователи по-прежнему смогут выбирать и копировать текст в элементе управления. </p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Рабочий адрес электронной почты: <input type = "email" name = "workemail" value = "jhon @ supermegaco.com "только для чтения> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-103"> требуется </span></h5> <p> Логическое значение, указывающее, можно ли оставить этот элемент пустым или нет. Если этот атрибут имеет значение «required» или пустую строку («»), или если он просто присутствует, пользователь должен будет заполнить элемент управления, чтобы иметь возможность отправить форму <code> </code>. </p> <p> Если элемент управления с присутствующим атрибутом <code> required </code> оставлен пустым, поддерживающие браузеры выдадут ошибку при отправке и немедленно отменит процесс.</p> <p> Браузер поддерживает атрибут <code> Требуется </code> не полностью. Авторам, возможно, придется полагаться на скрипты, чтобы обеспечить кроссбраузерность этой функциональности. </p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Электронная почта: <input type = "email" name = "emailaddress" обязательно> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-104"> размер </span></h5> <p> Целое число, используемое в качестве ширины элемента в количестве символов, которые должны отображаться в элементе управления одновременно.</p> <p> Поскольку символы обычно не имеют одинаковой ширины, браузеры могут определять символ в соответствии с определенными критериями (например, средней или максимальной шириной). </p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Новый адрес электронной почты: <input type = "email" name = "newemail" size = "20"> <input type = "submit" value = "Отправить данные"> </p> </form> </code> </pre><h5><span class="ez-toc-section" id="i-105"> тип </span></h5> <p> Значение, указывающее тип поля, которое представляет этот элемент.Есть двадцать два возможных значения (без учета регистра): </p> <ul> <li> скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями. </li> <li> текст: элемент управления, используемый для ввода однострочного фрагмента текста. </li> <li> поиск: то же, что и текст, но для целей поиска. </li> <li> tel: контрольная панель для ввода телефонного номера. </li> URL-адрес <li>: текстовое поле, используемое для ввода единственного и абсолютного URL-адреса <abbr title="Uniform Resource Loctor"> </abbr>.</li> <li> электронная почта: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты. </li> <li> пароль: текстовое поле для редактирования паролей, где символы представлены точками. </li> <li> дата: элемент управления для ввода определенной даты. </li> <li> месяц: элемент управления для ввода определенного месяца. </li> <li> неделя: элемент управления для ввода определенной недели. </li> <li> time: элемент управления для ввода определенного времени. </li> <li> datetime-local: элемент управления для ввода определенной местной даты и времени.</li> <li> номер: элемент управления для ввода числа. </li> <li> диапазон: элемент управления для ввода одного или двух чисел внутри диапазона. </li> <li> color: элемент управления для ввода цвета. </li> Флажок <li>: элемент управления для ввода логического значения (истина / ложь). </li> Радио <li>: элемент управления, используемый для выбора одного варианта из множества. </li> <li> файл: элемент управления, используемый для загрузки файлов на сервер. </li> <li> submit: кнопка, используемая для отправки формы.</li> Изображение <li>: то же, что и submit, но с возможностью отображения в виде изображения вместо использования кнопки по умолчанию. </li> <li> сброс: кнопка, используемая для сброса элементов управления формы до значений по умолчанию. </li> Кнопка <li>: кнопка, не связанная с действием по умолчанию. </li> </ul> <p> Если этого атрибута нет, элемент ведет себя так, как если бы он имел значение «текст». </p> <p> Пример </p><pre> <code> <input type = "email" name = "emailaddress"> </code> </pre><h5><span class="ez-toc-section" id="i-106"> значение </span></h5> <p> Начальное значение для элемента управления, которое будет установлено при загрузке страницы и при нажатии кнопки сброса.</p> <p> Пример </p><pre> <code> <form action = "../../ form-result.php" method = "post" target = "_ blank"> <p> Рабочий адрес электронной почты: <input type = "email" name = "workemail" value = "jhon@supermegaco.com"> </p> <p> <input type = "submit" value = "Отправить данные"> <input type = "reset" value = "Reset form"> <p> </form> </code> </pre><h2><span class="ez-toc-section" id="input_type_email_-_NEW"> input type = email - контроль ввода адреса электронной почты (NEW) </span></h2> <h3><span class="ez-toc-section" id="_input_type_email_-_NEW_T"> Ⓘ input type = email - контроль ввода адреса электронной почты NEW # T </span></h3> <p> Вход элемент с атрибутом типа, чей значение "<code> email </code>" представляет элемент управления для редактирования списка адресов электронной почты, приведенных в значение элемента.</p> <h3><span class="ez-toc-section" id="i-107"> Разрешенные атрибуты # </span></h3> <dl> <dt> Ⓘ глобальные атрибуты </dt> <dd> Любые атрибуты, разрешенные глобально. </dd> <dt title="input.email.attrs.name"> Ⓘ имя = строка # </dt> <dd> Имя часть пары имя / значение, связанной с этим элемент для отправки формы. </dd> <dt title="input.email.attrs.disabled"> Ⓘ отключен = "отключен" или "" (пустая строка) или пустая # </dt> <dd> Указывает, что элемент представляет отключенный контроль.</dd> <dt title="input.email.attrs.form"> Ⓘ форма = Ссылка на идентификатор НОВЫЙ # </dt> <dd> Стоимость я бы атрибут на форма с которым нужно связать элемент. </dd> <dt title="input.email.attrs.type"> type = "электронная почта" # </dt> <dd> Указывает, что его Вход элемент - это элемент управления для редактирования адреса электронной почты или списка адресов электронной почты, указанных в значении элемента. </dd> <dt title="input.email.attrs.autocomplete"> Ⓘ автозаполнение = "включено" или "выключено" НОВЫЙ # </dt> <dd> Определяет, представляет ли элемент вход элемент управления, для которого UA предназначен для хранения введенного значения пользователем (чтобы UA мог предварительно заполнить форму позже).</dd> <dt title="input.email.attrs.autofocus"> Ⓘ автофокус = «автофокус» или "" (пустая строка) или пустая НОВЫЙ # </dt> <dd> Указывает, что элемент представляет собой элемент управления, для которого UA предназначен для сосредоточения внимания, как только документ загружен. </dd> <dt title="input.email.attrs.list"> Ⓘ список = Ссылка на идентификатор НОВЫЙ # </dt> <dd> Стоимость я бы атрибут на даталист с которым нужно связать элемент.</dd> <dt title="input.email.attrs.maxlength"> Ⓘ maxlength = неотрицательное целое число # </dt> <dd> Максимально допустимая длина значения элемента. </dd> <dt title="input.email.attrs.pattern"> Ⓘ шаблон = шаблон НОВЫЙ # </dt> <dd> Задает регулярное выражение, с которым сравнивается UA. предназначен для проверки значения элемента управления, представленного его элемент. </dd> <dd> Регулярное выражение, которое должен соответствовать JavaScript <var> Узор </var> производство, как указано в [ECMA 262].</dd> <dt title="input.email.attrs.readonly"> Ⓘ readonly = "только для чтения" или "" (пустая строка) или пустая # </dt> <dd> Указывает, что элемент представляет собой элемент управления, значение которого не предназначен для редактирования. </dd> <dt title="input.email.attrs.required"> Ⓘ требуется = "обязательный" или "" (пустая строка) или пустая НОВЫЙ # </dt> <dd> Указывает, что элемент является обязательной частью формы подчинение. </dd> <dt title="input.email.attrs.size"> Ⓘ размер = положительное число # </dt> <dd> Количество вариантов, отображаемых элементом управления. представлен его элементом.</dd> <dt title="input.email.attrs.placeholder"> Ⓘ заполнитель = строка без разрывов строки НОВЫЙ # </dt> <dd> Короткая подсказка (одно слово или короткая фраза), предназначенная для помощь пользователю при вводе данных в элемент управления представлен его элементом. </dd> <dd> <p> Любая строка, не содержащая перевода строки (U + 000A, «LF») или каретки. вернуть (U + 000D, «CR») символов. </p> </dd> <dt title="input.attrs.multiple"> Ⓘ несколько = "несколько" или "" (пустая строка) или пустая НОВЫЙ # </dt> <dd> Указывает, что элемент допускает несколько значений.</dd> <dt title="input.email.attrs.value.multiple"> значение = список адресов электронной почты # </dt> <dd> Список адресов электронной почты. </dd> <dd/> <dt title="input.email.attrs.value.single"> значение = Адрес электронной почты # </dt> <dd> Единый адрес электронной почты. </dd> <dd> Любая строка, соответствующая следующий [ABNF] производство:<pre> <code> 1 * (atext / ".") "@" Ldh-str 1 * ("." Ldh-str) </code> </pre><p>… где <var> текст </var> как определено в [RFC 5322], а также <var> ldh-str </var> как определено в [RFC 1034]._` {|} ~ -] + @ [a-zA-Z0-9 -] + (?: \. [a-zA-Z0-9 -] +) * $ / </code> </pre> <p> Примеры: </p><pre> <code> foo-bar.baz@example.com </code> </pre></dd> </dl> <h3><span class="ez-toc-section" id="i-108"> Дополнительные ограничения и предостережения # </span></h3> <ul> <li> Ввод интерактивного элемента не должен появляются как потомок элемента a. </li> <li> Ввод интерактивного элемента не должен появляются как потомок элемента кнопки. </li> <li> Любой элемент ввода, являющийся потомком элемента метки с атрибутом for должен иметь Значение идентификатора, соответствующее этому атрибуту.</li> <li> Атрибут списка входного элемента должен ссылаться на элемент списка данных. </li> <li> Ввод элемента с типом атрибута со значением «кнопка» должно иметь непустое значение атрибута. </li> <li> Атрибут usemap во входном элементе устарел. Используйте элемент img вместо элемента ввода для карт изображений. </li> <li> Атрибут align входного элемента устарел. Вместо этого используйте CSS. </li> </ul> <h3><span class="ez-toc-section" id="i-109"> Разрешенные родительские элементы # </span></h3> <p> любой элемент, который может содержать элементы фразировки </p> <h2><span class="ez-toc-section" id="HTML_-_GeeksforGeeks"> HTML | - GeeksforGeeks </span></h2> <p> HTML | <input type = ”email”> </p> <p> HTML-код <strong> <input type = ”email”> </strong> используется для определения поля для адреса электронной почты.Входящий идентификатор электронной почты автоматически проверяется для проверки правильности формата идентификатора электронной почты. </p> <p> <strong> Синтаксис </strong> </p><pre> <input type = "email"> </pre><p> <strong> Пример: </strong> </p> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <! DOCTYPE html> </code> </p> <p> <code> <</code> <p>000 </code> </h2>13> <</code> <code> глава </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> титул </code> <code>> </code> </p> <p> <code> </code> <code> HTML тип ввода эл. </ </code> <code> head </code> <code>> </code> </p> <p> <code> </code> </p> <p> <code> </code> <code> <</code> <code> body </code> <code> style </code> <code> = </code> <code> "text-align: center;" </code> <code>> </code> </p> <p> <code> </code> </p> <p> <code> </code> <code> <</code> <code> h2 </code> <code> стиль </code> <code> = </code> <code> "цвет: зеленый;" </code> <code>> </code> </p> <p> <code> </code> <code> GeeksForGeeks </code> </p> <p> <code> </code> <code> </ </code> <code> h2 </code> <code>> </code> </p> <p> <code> </code> </p> <p> <code> </code> <code> 9000 9000 9000 9000 <code> <code> 9000 9000 9000 9000 <code> <code> 9000 9000 9000 <code> <code> = </code> <code> «электронная почта» </code> <code>> </ </code> <code> h3 </code> <code>> </code> </p> <p> <code> </code> </p> <p> <code> </code> <code> <</code> <code> форма </code> <code>> ввод </code> </p> <p> <code> </code> </code> </code> </code> </code> </code> </code> </code> <code> = </code> <code> "электронная почта" </code> </p> <p> <code> </code> <code> значение </code> <code> = </code> <code> "manaschhabra499 @ gmailo.com "</code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> form </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> корпус </code> <code>> </code> </p> <p> <code> </ <code>04 </code> <code> <h2><span class="ez-toc-section" id="0ml">0ml </span></h2></table> <p> <strong> Вывод: </strong> <br/> </p> <p> <strong> Поддерживаемые браузеры: </strong> Браузеры, поддерживаемые <strong> <input type = ”email”> </strong>, перечислены ниже: </p> <ul> <li> Google Chrome 5.0 </li> <li> Internet Explorer 10.0 </li> <li> Firefox 4.0 </li> <li> Safari 5.0 </li> <li> Opera 10.1 </li> </ul> <h2><span class="ez-toc-section" id="i-110"> тип ввода = электронная почта - управление вводом адреса электронной почты (НОВИНКА) </span></h2> <h3><span class="ez-toc-section" id="_input_type_email_-_NEW_T-2"> Ⓘ input type = email - контроль ввода адреса электронной почты NEW # T </span></h3> <p> Вход элемент с атрибутом типа, чей значение "<code> email </code>" представляет элемент управления для редактирования списка адресов электронной почты, приведенных в значение элемента. </p> <h3><span class="ez-toc-section" id="i-111"> Разрешенные атрибуты # </span></h3> <dl> <dt> Ⓘ глобальные атрибуты </dt> <dd> Любые атрибуты, разрешенные глобально.</dd> <dt title="input.email.attrs.name"> Ⓘ имя = строка # </dt> <dd> Имя часть пары имя / значение, связанной с этим элемент для отправки формы. </dd> <dt title="input.email.attrs.disabled"> Ⓘ отключен = "отключен" или "" (пустая строка) или пустая # </dt> <dd> Указывает, что элемент представляет отключенный контроль. </dd> <dt title="input.email.attrs.form"> Ⓘ форма = Ссылка на идентификатор НОВЫЙ # </dt> <dd> Стоимость я бы атрибут на форма с которым нужно связать элемент.</dd> <dt title="input.email.attrs.type"> Ⓘ type = "электронная почта" # </dt> <dd> Указывает, что его Вход элемент - это элемент управления для редактирования адреса электронной почты или списка адресов электронной почты, указанных в значении элемента. </dd> <dt title="input.email.attrs.autocomplete"> Ⓘ автозаполнение = "включено" или "выключено" НОВЫЙ # </dt> <dd> Определяет, представляет ли элемент вход элемент управления, для которого UA предназначен для хранения введенного значения пользователем (чтобы UA мог предварительно заполнить форму позже).</dd> <dt title="input.email.attrs.autofocus"> Ⓘ автофокус = «автофокус» или "" (пустая строка) или пустая НОВЫЙ # </dt> <dd> Указывает, что элемент представляет собой элемент управления, для которого UA предназначен для сосредоточения внимания, как только документ загружен. </dd> <dt title="input.email.attrs.list"> Ⓘ список = Ссылка на идентификатор НОВЫЙ # </dt> <dd> Стоимость я бы атрибут на даталист с которым нужно связать элемент.</dd> <dt title="input.email.attrs.maxlength"> Ⓘ maxlength = неотрицательное целое число # </dt> <dd> Максимально допустимая длина значения элемента. </dd> <dt title="input.email.attrs.pattern"> Ⓘ шаблон = шаблон НОВЫЙ # </dt> <dd> Задает регулярное выражение, с которым сравнивается UA. предназначен для проверки значения элемента управления, представленного его элемент. </dd> <dd> Регулярное выражение, которое должен соответствовать JavaScript <var> Узор </var> производство, как указано в [ECMA 262].</dd> <dt title="input.email.attrs.readonly"> Ⓘ readonly = "только для чтения" или "" (пустая строка) или пустая # </dt> <dd> Указывает, что элемент представляет собой элемент управления, значение которого не предназначен для редактирования. </dd> <dt title="input.email.attrs.required"> Ⓘ требуется = "обязательный" или "" (пустая строка) или пустая НОВЫЙ # </dt> <dd> Указывает, что элемент является обязательной частью формы подчинение. </dd> <dt title="input.email.attrs.size"> Ⓘ размер = положительное число # </dt> <dd> Количество вариантов, отображаемых элементом управления. представлен его элементом.</dd> <dt title="input.email.attrs.placeholder"> Ⓘ заполнитель = строка без разрывов строки НОВЫЙ # </dt> <dd> Короткая подсказка (одно слово или короткая фраза), предназначенная для помощь пользователю при вводе данных в элемент управления представлен его элементом. </dd> <dd> <p> Любая строка, не содержащая перевода строки (U + 000A, «LF») или каретки. вернуть (U + 000D, «CR») символов. </p> </dd> <dt title="input.attrs.multiple"> Ⓘ несколько = "несколько" или "" (пустая строка) или пустая НОВЫЙ # </dt> <dd> Указывает, что элемент допускает несколько значений.</dd> <dt title="input.email.attrs.value.multiple"> Ⓘ значение = список адресов электронной почты # </dt> <dd> Список адресов электронной почты. </dd> <dd/> <dt title="input.email.attrs.value.single"> Ⓘ значение = Адрес электронной почты # </dt> <dd> Единый адрес электронной почты. </dd> <dd> Любая строка, соответствующая следующий [ABNF] производство:<pre> <code> 1 * (atext / ".") "@" Ldh-str 1 * ("." Ldh-str) </code> </pre><p>… где <var> текст </var> как определено в [RFC 5322], а также <var> ldh-str </var> как определено в [RFC 1034]._` {|} ~ -] + @ [a-zA-Z0-9 -] + (?: \. [a-zA-Z0-9 -] +) * $ / </code> </pre> <p> Примеры: </p><pre> <code> foo-bar.baz@example.com </code> </pre></dd> </dl> <h3><span class="ez-toc-section" id="i-112"> Дополнительные ограничения и предостережения # </span></h3> <ul> <li> Ввод интерактивного элемента не должен появляются как потомок элемента a. </li> <li> Ввод интерактивного элемента не должен появляются как потомок элемента кнопки. </li> <li> Любой элемент ввода, являющийся потомком элемента метки с атрибутом for должен иметь Значение идентификатора, соответствующее этому атрибуту.</li> <li> Атрибут списка входного элемента должен ссылаться на элемент списка данных. </li> <li> Ввод элемента с типом атрибута со значением «кнопка» должно иметь непустое значение атрибута. </li> <li> Атрибут usemap во входном элементе устарел. Используйте элемент img вместо элемента ввода для карт изображений. </li> <li> Атрибут align входного элемента устарел. Вместо этого используйте CSS. </li> </ul> <h3><span class="ez-toc-section" id="i-113"> Разрешенные родительские элементы # </span></h3> <p> любой элемент, который может содержать элементы фразировки </p> . </div> </div> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/professionalnye-umeniya-marketing-klyuchevye-navyki-i-kompetencii-marketologa-menedzhera-po-marketingu-i-reklame-powerbranding-ru-7-glavnyx-navykov-uspeshnogo-marketologa-infografika.html" rel="prev">Профессиональные умения маркетинг: Ключевые навыки и компетенции маркетолога, менеджера по маркетингу и рекламе — PowerBranding.ru – 7 главных навыков успешного маркетолога. Инфографика</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/google-skorost-zagruzki-skorost-zagruzki-sajta-v-2020-i-google-pagespeed-insights-pro-skorost-sajta-razgonyaem-google-pagespeed-do-100-i-bolshe-habr.html" rel="next">Google скорость загрузки: Скорость загрузки сайта в 2020 и Google PageSpeed Insights про скорость сайта – Разгоняем Google PageSpeed до 100 и больше / Habr</a></div></div> </nav><div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/type-email-input-page-not-found-mdn-web-docs.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required> Имя * Email * Сайт

Type email input: 🤷🏽‍♀️ Page not found | MDN Web Docs

Адрес электронной почты | htmlbook.ru

Типы входных данных HTML уроки для начинающих академия

Текст типа ввода

Пример

Пароль типа ввода

Пример

Тип ввода отправить

Пример

Пример

Сброс типа ввода

Пример

Тип входного сигнала радио

Пример

Флажок «тип ввода»

Пример

Кнопка ввода типа

Пример

Типы входных данных HTML5

Цвет входного типа

Тип ввода Дата

Входной тип DateTime-локальный

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

Тип входного месяца

Тип входного номера

Ограничения ввода

Диапазон входного типа

Поиск типа ввода

Тип ввода тел

Время ввода типа

URL-адрес типа ввода

Тип ввода неделя

Атрибут типа ввода HTML

Формы и их составляющие (form, input) в HTML

input type=»radio»

input type=»checkbox»

input type=»file»

<textarea>

— HTML: язык разметки гипертекста

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

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

Заполнители

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

Физический размер входного элемента

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

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

Предлагаемые значения

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

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

Рубрики