Html5 input type: The HTML5 input types — Learn web development

Руководство по новым типам input в HTML5

В HTML5 было введено несколько новых типов <input>, например электронная почта (email), дата (date), время (time), цвет (color), диапазон (range) и т. д., чтобы сделать формы более интерактивными. Однако, если браузер не сможет распознать эти новые типы <input>, он будет обрабатывать их как обычные текстовые поля.

В этом разделе мы кратко рассмотрим каждый из новых типов <input>:

Еще был введен тип datetime, но на данный момент он уже устарел.

Input type Color

Тип color позволяет пользователю выбрать цвет из палитры и возвращает значение цвета в шестнадцатеричном формате (#rrggbb). Если вы не укажете значение, по умолчанию вернется #000000 — это черный цвет.

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

<form>
    <label for="mycolor">Select Color:</label>
    <input type="color" value="#00ff00">
</form>

Ввод цвета (т. е. type="color") поддерживается во всех современных веб-браузерах, таких как Firefox, Chrome, Opera, Safari (12.1+), Edge (14+). Не поддерживается Microsoft Internet Explorer и более старой версией браузеров Apple Safari.

Input type Date

Тип date позволяет пользователю выбрать дату в раскрывающемся календаре.

Значение даты включает год, месяц и день, но не время.

<form>
    <label for="mydate">Select Date:</label>
    <input type="date" value="2019-04-15">
</form>

Ввод даты (т.е. type="date") поддерживается браузерами Chrome, Firefox, Opera и Edge. Не поддерживается браузерами Internet Explorer и Safari.

Input type Datetime-local

Тип datetime-local позволяет пользователю выбирать как локальную дату и время, включая год, месяц и день, так и время в часах и минутах.

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

<form>
    <label for="mydatetime">Choose Date and Time:</label>
    <input type="datetime-local">
</form>

Тип ввода type="datetime-local" не поддерживается браузерами Firefox, Safari и Internet Explorer. В настоящее время поддерживается браузерами Chrome, Edge и Opera.

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

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

Посмотрим на примере:

<form>
    <label for="myemail">Enter Email Address:</label>
    <input type="email" required>
</form>

Вы можете стилизовать поле input электронной почты для различных состояний валидации, когда значение с использованием псевдоклассами: :valid, :invalid или :required.

Проверка правильности ввода электронной почты (то есть type="email") поддерживается всеми основными браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.

Input type Month

Тип month позволяет пользователю выбрать месяц и год из выпадающего календаря.

Значением является строка в формате «YYYY-MM», где YYYY — четырехзначный формат года, а MM — номер месяца. Давайте посмотрим пример, чтобы увидеть, как это работает:

<form>
    <label for="mymonth">Select Month:</label>
    <input type="month">
</form>

Тип ввода type="month" не поддерживается браузерами Firefox, Safari и Internet Explorer. В настоящее время поддерживается в браузерах Chrome, Edge и Opera.

Input type Number

Тип number может использоваться для ввода числового значения. Вы также можете разрешить пользователю вводить только допустимые значения, используя дополнительные атрибуты min, max и step.

Следующий пример позволит вам ввести числовое значение от 1 до 10.

<form>
    <label for="mynumber">Enter a Number:</label>
    <input type="number" min="1" max="10" step="0.5">
</form>

Ввод чисел (т.е.

type="number") поддерживается всеми основными веб-браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше. Internet Explorer, распознает число, но не предоставляет кнопок увеличения и уменьшения.

Input type Range

Тип range может использоваться для ввода числового значения в указанном диапазоне. Он работает очень похоже на number, но предлагает более простое управление для ввода чисел.

Посмотрим на примере:

<form>
    <label for="mynumber">Select a Number:</label>
    <input type="range" min="1" max="10" step="0.5">    
</form>

Ввод диапазона (то есть type="range") поддерживается всеми основными веб-браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.

Input type Search

Тип search можно использовать для создания полей поиска.

Поле поиска обычно ведет себя как обычное текстовое поле, но в некоторых браузерах, таких как Chrome и Safari, как только вы начинаете вводить текст в поле, в правой части поля появляется небольшой крестик, который позволяет быстро очистить поле поиска. Давайте посмотрим на примере:

<form>
    <label for="mysearch">Search Website:</label>
    <input type="search">
</form>

Ввод поиска (то есть type="search") поддерживается всеми основными веб-браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.

Input type Tel

Тип tel можно использовать для ввода номера телефона.

Браузеры изначально не поддерживают проверку ввода tel. Однако вы можете использовать атрибут placeholder, чтобы помочь пользователям ввести телефонный номер в правильном формате или указать регулярное выражение для проверки ввода с помощью шаблона. Давайте посмотрим на пример:

<form>
    <label for="myphone">Telephone Number:</label>
    <input type="tel" placeholder="xx-xxxx-xxxx" required>
</form>

Проверка ввода телефона (т.е. type="tel") в настоящее время не поддерживается ни одним браузером, поскольку формат телефонных номеров сильно различается в разных странах, но он все еще полезен. Мобильные браузеры отображают цифровую клавиатуру для ввода телефонных номеров.

Input type Time

Тип time можно использовать для ввода времени (часы и минуты).

Браузер может использовать 12- или 24-часовой формат для ввода времени, основываясь на настройках времени локальной системы пользователя.

<form>
    <label for="mytime">Select Time:</label>
    <input type="time">
</form>

Тип ввода type="time" не поддерживается браузерами Internet Explorer и Safari. В настоящее время поддерживается браузерами Chrome, Firefox, Edge и Opera.

Input type URL

Тип url может использоваться для ввода URL или веб-адресов.

Вы можете использовать атрибут multiple для ввода более одного URL. Кроме того, если указан атрибут required, браузер автоматически выполнит проверку, чтобы убедиться, что в поле вводится только текст, соответствующий стандартному формату для URL. Давайте посмотрим, как это работает:

<form>
    <label for="myurl">Enter Website URL:</label>
    <input type="url" required>
</form>

Проверка ввода URL (т.е. type="url") поддерживается всеми основными браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.

Input type Week

Тип week

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

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

<form>
    <label for="myweek">Select Week:</label>
    <input type="week">
</form>

Тип type="week" не поддерживается браузерами Firefox, Safari и Internet Explorer. В настоящее время поддерживается браузерами Chrome, Edge и Opera.

UX и HTML5: Поможем пользователю заполнить вашу мобильную форму. 3/4

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

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

Помогаем пользователю отформатировать контент с помощью HTML5

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

Плюсы использования HTML5 при оптимизации мобильных устройств

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

Вводим числовые данные

input type=number

Аттрибут HTML5 input type=number ограничивает поле ввода числами. Он имеет встроенную систему валидации, которая не даёт вводить в поле ничего, кроме чисел.

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

Слева клавиатура Android, справа клавиатура iOS с цифрами

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

В спецификации W3C объясняется: «простой способ определить, нужно ли использовать type=number, это понять,есть ли смысл добавлять к контролу ввода данных спинбокс (spinbox) — например, стрелочки «вверх» и «вниз». Это означает, что такой input type не предназначен для ввода данных кредитных карт или индексов.

Аттрибуты pattern и inputmode

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

Выглядит это примерно так:

<input type=»number»id=»quantity»name=»quantity»pattern=»[0-9]*»inputmode=»numeric«/>

Этот паттерн можно использовать, чтобы вызвать числовую клавиатуру с крупными кнопками на экран iPhone (но не на iPad). На этой клавиатуре нет символа «минус» и запятой, так что пользователь теряет возможность вводить отрицательные числа и десятичные дроби. Кроме того, тип клавиатуры изменить будет нельзя — поэтому принимать решение вызывать числовую клавиатуру нужно с осторожно.

Помните, что эти паттерны могут применяться к любым другим типам ввода (input types).

На большинстве смартфонов на Android один этот паттерн ничего не даст. Чтобы всё заработало, воспользуйтесь комбинацией аттрибута и input type=number.

Демо на Android и iOS с использованием input type=number, pattern и inputmode

inputmode

Если вам нужно просто запустить мобильную клавиатуру с цифрами и не хотите связываться с заморочками type=number и pattern, вы можете использовать текстовое поле ввода и обратиться к аттрибуту inputmode=numeric. Это будет выглядеть так:

<input type=»text»id=»quantity»name=»quantity»inputmode=»numeric«/>

К сожалению (на момент написания статьи), его поддерживает только Chrome 67 mobile, но и на Chrome desktop 66 поддержка должна появиться довольно-таки скоро. Чтобы узнать больше о том, как вводить числа в форму, почитайте статью «Я хотел ввести число».

input type=tel

Если вам нужно, чтобы пользователь ввел номер телефона, можно использовать input type=tel. Как показано на скриншоте ниже, он вызывает те же цифры на клавиатуре iOS, как и аттрибут pattern, описанный выше. В этом типе поля ввода нет автоматической валидации из-за отсутствия единого формата для телефонных номеров во всем мире.

input type=tel на Android и iOS

Вводим даты

С технической точки зрения даты — это числовые значения. Тем не менее, они заслуживают свой собственный раздел. В HTML5 существует несколько типов ввода данных для дат. Наиболее часто используемый — input type=date. Он открывает календарь в браузерах, которые его поддерживают. Появление календаря зависит от типа браузера и ОС. Чтобы узнать больше о том, как браузеры обрабатываютinput type=»date«, я советую почитать статью «Как усложнить input type=date».

Календарь на основе input type=date на Android и iOS

Для выбора недели есть type=week, а для выбора времени type=time (вплоть до часа и минуты), а для выбора даты и времени (местного времени пользователя) существует type=datetime-local. Столько вариантов!

Пример календаря с расширенными опциями на Android (неделя, дата и время, и т.д.)

input type=date хорош, к примеру, для интерфейсов бронирования. Конечно, у вас могут быть особенные нужды, из-за которых вам потребуется создать собственный календарь (об этом мы уже говорили в главе «Задумайтесь о дефолтных значениях»). Но input type=date — всегда отличный вариант, если вам нужен календарь, и вы не хотите подключать целую библиотеку JavaScript ради этого.

Тем не менее, есть случаи, когда лучше не использовать type=date для дат. Возьмем дату рождения. Если я родилась в 1960 году (на самом деле нет, это просто пример), то мне придётся много раз тыкать в экран, чтобы добраться до своего года, начиная с 2018. Я недавно обнаружила, что на Android при нажатии на год в календаре появляется что-то вроде прокручивающегося дропдауна со всеми годами. Немного лучше, но всё же приходится изрядно поскроллить.

Один пользователь написал мне в Твиттере:

«Я родился в 1977 году и могу подтвердить, как это неудобно. Чем больше приходится листать, тем более старым ты себя ощущаешь :-(».

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

В календаре на Android вы можете нажать и удерживать год, чтобы появился список с годами, но всё равно выбор даты рождения остается довольно утомительным процессом

URL, email, телефон и поиск

Смартфоны прячут от нас несколько видов клавиатур и много других классных штук для оптимизации ввода, которые улучшают UX при заполнении формы. Дьявол кроется в деталях, как говорится.

Использование поля input type=url откроет оптимизированную клавиатуру на мобильнике с прямым доступом к / (клавиша слэш). В зависимости от ОС, вы можете предоставить быстрый доступ к обозначениям наиболее популярных доменов, как например . fr на скриншоте ниже. При длительном нажатии на эту клавишу появятся кнопки для быстрого ввода других популярных доменов. Ещё в нем есть автоматическая валидация браузера, которая проверяет корректность формата URL.

Клавиатура input type=url на Android и iOS

Поле input type=email вызывает клавиатуру, оптимизированную под email, и предоставляет быстрый доступ к значку @. Это поле ввода требует присутствие символа @ для прохождения валидации — и это единственная верификация, которая здесь выполняется.

Клавиатура input type=email на Android и iOS

Поле input type=search открывает клавиатуру, оптимизированную под поиск. У пользователя появляется прямой доступ к поиску с кнопки на клавиатуре. И тут есть маленький крестик, очищающий поле, чтобы можно было напечатать новый запрос.

Клавиатура input type=search на Android и iOS

Диапазон и цвет

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

input type=range предоставляет визуальный UI-ползунок для ввода количества. UI этого элемента управления зависит от браузера.

input type=color предоставляет пользователю простой способ задать значение цвета. Во многих браузерах он выглядит как палитра.

input type=range и input type=color на Android и iOS

HTML Media Capture: снимаем и загружаем фотографии, записываем аудио

Я вспоминаю времена iPhone 3, когда Apple по причинам безопасности не позволял использовать на вебсайте даже простой input type=file. Те времена давно прошли. Теперь с HTML media capture API стало возможным получать доступ к различным сенсорам устройства. Мы можем снимать фото и видео, и даже записывать голос прямо в браузере.

Аттрибут accept позволяет вам определить, медиа какого типа разрешить в поле ввода: аудио, изображения, видео. Пользователь может разрешить браузеру прямой доступ, например, к камере.

Код выглядит так:

<input type=»file»id=»take-picture»accept=»image/*»>

Аттрибут accept настроен на изображение. Браузер запрашивает разрешение на прямой доступ к камере или к изображениям на устройстве

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

<input type=»file»accept=»image/*»capture> // открывает камеру

<input type=»file»accept=»video/*»capture> // открывает камеру в режиме видео

<input type=»file»accept=»audio/*«capture> // открывает запись голоса

Мобильный браузер напрямую открывает механизм записи: слева — камеру, справа — запись видео

Чтобы узнать больше о том, как напрямую использовать медиа в браузере, прочитайте главу «Работа с изображениями, видео и аудио непосредственно в браузере» (Accessing And Handling Images, Video And Audio Directly In The Browser) в моей статье о секретных возможностях мобильных браузеров.

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

Как использовать HTML5 Тип ввода Электронная почта

• Домашняя страница
• HTML5 Формы

HTML inputHTML5HTML5 Тип ввода Электронная почта

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

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

Пример кода:

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

 

Общего назначения

Сохраните следующий код в текстовом документе и откройте его в веб-браузере.

 

<голова>
    <стиль>
        тело {
            отступ сверху: 200px;
            отступ слева: 300px
        }
    

<тело>
    
Пожалуйста, укажите ваш текущий адрес электронной почты
        <форма>
             
        

 

Вот как должна выглядеть страница:

Если вы хотите собрать сразу несколько адресов, вы можете добавить множественный атрибут:

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

Теперь пользователь может ввести один или несколько адресов, разделенных запятой.

Валидация

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

.

имя@субдомен.дом

минимальными требованиями являются @ и . символы и отсутствие пробелов между символами. Обратите внимание, что невозможно проверить, существует ли указанный адрес. Это проблема, которую должен решить ваш сценарий на стороне сервера. Хороший способ проверить действительные адреса электронной почты — отправить ссылку на адрес электронной почты, при нажатии на которую подтверждается, что адрес электронной почты действителен.

Мозилла Фаерфокс

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

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

Гугл Хром

Google Chrome не обеспечивает визуальную поддержку, когда пользователь вводит неверные данные.

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

Если вы хотите предоставить пользователю собственное сообщение об ошибке, вы можете использовать атрибут title:

Поддержка браузера

Тип ввода электронной почты широко поддерживается во всех современных браузерах. В таблице ниже указана минимальная поддерживаемая версия. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0

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

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

На платформах Android и IOS клавиатура автоматически включает символы @ и . keys всякий раз, когда тип ввода — электронная почта.

 

Зачем использовать этот новый тип ввода

• Тип ввода электронной почты упрощает веб-разработку, поскольку проверка выполняется браузером. Если обязательный атрибут был указан, браузер не примет форму для отправки.
• Вы можете оформить все электронные письма с типами ввода на своем веб-сайте в определенном стиле, чтобы они отображались в стандартном стиле по всем направлениям.
• Мобильные устройства могут настроить виртуальную клавиатуру в соответствии с вводом электронной почты (с легко доступными символами @ и .

Прикладной CSS

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

ввод[тип="электронная почта"]
{
 цвет фона:#ccc;
}
 

Демо

См. также

• Как создать поле ввода телефона в HTML5
• Как получить значение флажка при отправке формы

Категории

• Контактные формы
• Снаски кодов
• HTML Forms
• Лучшие практики
• HTML5 Forms
• Виджеты формы
• ПРИМЕНЕНИЯ ПРИМЕНЕНИЯ
• Обработка формы
• Form
• Mail
• Weber
• Флажки
• Загрузка файла
• Действие формы
• Формы Google

Типы ввода и атрибуты HTML5

Последнее обновление: 01. 02.2023

HTML &linput> — один из самых важных элементов формы, обладающий множеством полезных функций, которые помогают нам собирать информацию на веб-странице. Позже в HTML5 появилось около новых типов ввода и атрибутов, которые сделали элемент ввода более динамичным и полезным, и здесь, в этой статье, мы обсудим типы ввода и атрибуты HTML5.

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

Новые типы ввода и атрибуты

1) Тип ввода «число»

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

&linput />

Если мы добавим вышеупомянутый тег на нашу веб-страницу без упоминания типа, он будет вести себя как поле ввода. В HTML5 введен тип номер специально для приема числовых значений (значения +ve и -ve). На первый взгляд это обычное текстовое поле. Однако, когда мы установим фокус на поле ввода (или наведем курсор на поле), вы увидите, что это спиннер .

Примечание : Оберните элемент ввода внутри тега &ltform>, чтобы получить желаемый результат.

<form метод="получить" действие="">
    Выберите номер <br />
        &linput type="number" name="number-game" />
</форма>
 

Попробуйте

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

изображение

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

2) Входные атрибуты «мин. и макс.»

Я использую приведенный выше (1-й) пример, понимаю мин. и макс. атрибутов.

В то время как тип ввода «число» позволит вам выбрать числа (положительные или отрицательные числа), вы можете ограничить или установить диапазон . Например, мы хотим, чтобы наши пользователи выбирали или вводили числа от 5 до 15, все положительные числа. Однако, если они ошибаются или намеренно вводят значение, которое меньше или больше указанного диапазона, он покажет сообщение и не будет принимать дальнейшие команды.

<form метод="получить" действие="">
    Выберите числа от 5 до 15 

    &linput type="число" мин="5" макс="15" />
    &linput type="отправить" value="Отправить" />
</form> 

Попробуйте

изображение

Поддержка браузера:
Chrome — да | Край — Да | FireFox — Да | Internet Explorer 10 — Да

3) Атрибут ввода «шаг»

Вот еще один интересный атрибут ввода, называемый шаг . Атрибут step ограничивает значения на основе числовых интервалов. Поэтому, если вы установите значение шага как «2», ваши пользователи смогут выбрать такие значения, как 2, 4, 6 или -2, -4, -6 и т. д.

<form метод="получить" действие="">
    &linput type="number" step="2" min="2" max="10" />
</form> 

В приведенном выше примере мы ограничиваем отрицательные значения, а также устанавливаем предел между 2 и 10.

Поддержка браузера:
Хром — Да | Край — Да | FireFox — Да

4) Входной атрибут «required»

Атрибут required имеет тип Boolean, что означает, что он принимает такие значения, как true или false. Значение по умолчанию верно. Используйте этот атрибут с полем ввода, если вы хотите, чтобы ваши пользователи вводили какое-либо значение в поле ввода.

Примечание : Мы не уверены на 100%, если это надежное решение для обязательного поля.

<form метод="получить" действие="">
    Пожалуйста, введите ваше имя <br />
        &linput type="text" требуется />
        &linput type="отправить" value="Отправить" />
</форма> 

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

5) Тип ввода «email»

Тип ввода электронная почта позволяет пользователям вводить один или несколько действительных адресов электронной почты. Да, действующий, поскольку он будет проверять адрес электронной почты на наличие таких символов, как «@», «.com» и т. д. Хотя веб-разработчик избавляет веб-разработчика от написания сценариев для проверки адреса электронной почты, всегда рекомендуется писать сценарии на стороне клиента, а также на стороне сервера, чтобы дважды проверить введенный адрес электронной почты.

<form метод="получить" действие="">
    Введите адрес электронной почты
        &linput type="email" name="comp-email" />
        &linput type="отправить" value="Отправить" />
</form> 

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

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

6) Входной атрибут «multiple»

Множественный атрибут имеет тип Boolean и принимает значение true или false. Если мы добавим этот атрибут с типом электронной почты и установим его значение «true», то мы можем добавить более одного адресов электронной почты. Однако вы можете использовать множественный атрибут и с другими типами ввода, такими как тип файла.

<form метод="получить" действие="">
    &linput type="электронная почта" несколько="true" />
    ИЛИ
    &linput тип="файл" несколько="истина" />
</форма> 

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

7) Атрибут ввода «заполнитель»

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

Например, у нас есть поле ввода, и ограничение на количество символов установлено на 5.

<form метод="получить" действие="">
    &linput type="text" maxlength="5" placeholder="Ограничение на пять символов" name="код города" />
</form> 

Для параметра maxlength установлено значение 5, а в заполнителе явно содержится сообщение для пользователя, что избавляет его от догадок.

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

8) Входной атрибут «список»

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

<form метод="получить" действие="">
    Список книг &linput type="text" list="books">

    <datalist>
        <option value="Синяя книга Asp.Net 4" label="Asp.Net">
        <option value="Обучение науке" label="Наука">
        <option value="Изгиб цепи" label="Электричество">
    </список данных>
</форма> 

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

9) Атрибут ввода «шаблон»

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

.
<form метод="получить" действие="">
    &linput type="text" pattern="[a-z]{5}" name="short-name" />
</форма> 

Никаких специальных символов, пробелов, только пять букв. Вы можете добавить атрибут шаблона с типом электронной почты, текстом (в нашем примере), телефоном, паролем, URL-адресом и поиском.

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

10) Тип ввода «url»

Тип ввода url принимает веб-адрес в качестве значения. Веб-адрес — это адрес веб-сайта, который мы вводим в адресной строке браузера. Вы можете ввести один или несколько адресов в поле ввода типа URL. Чтобы разрешить пользователям вводить более одного URL-адреса, вам необходимо добавить множественный атрибут с типом URL-адреса.

<form метод="получить" действие="">
    &linput type="url" name="url"multiple="true" />
</form> 

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

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

11) Тип ввода «tel»

Этот тип ввода предназначен исключительно для смартфонов, но не для обычных браузеров. Добавьте этот тип на веб-страницу и проверьте его на смартфоне. Когда фокус установлен на поле (с типом тел), мобильный браузер показывает телефон клавиатура для ввода телефонных номеров. Клавиатура телефона обычно имеет цифры и знак «+».

<form метод="получить" действие="">
    &linput type="тел" name="телефон" />
</form> 

Однако, мы проверили type tel в обычном браузере, мы не увидели никакой видимой разницы между Input Type tel и text .

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

12) Тип ввода «дата»

Дата типа позволит нам выбрать дату из элемента управления Datepicker. До HTML5 веб-разработчики обычно добавляли два разных элемента управления, поле ввода и средство выбора даты, чтобы выполнить эту задачу. Однако тип даты HTML5 упростил этот процесс.

<form метод="получить" действие="">
    &linput type="дата" name="дата присоединения" />
    &linput type="отправить" value="Отправить" />
</форма> 

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

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

<form метод="получить" действие="">
    &linput type="date" value="2014-12-04" name="дата вступления" />
</form> 

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

13) Тип ввода «datetime-local»

Позволяет пользователю вводить (или выбирать) как дату , так и время .

<form метод="получить" действие="">
    &linput type="datetime-local" />
</форма> 

Попробуйте

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

14) Тип ввода «неделя»

Отлично работает с браузерами Chrome и Edge . Этот тип ввода позволит пользователям выбирать и отображать недель выбранного месяца. В поле ввода есть счетчик и раскрывающийся список, чтобы выбрать неделю из Datepicker.

<form метод="получить" действие="">
    &linput тип="неделя" значение="2019-W49" />
</form> 

Приведенное выше значение отображает 49-ю неделю 2019 года.

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Нет

15) Тип ввода «месяц»

Тип месяца покажет выбранный месяц и год. Как обычно, он выглядит и работает как Datepicker, который мы видели выше.

<form метод="получить" действие="">
    &linput type="месяц" name="месяц" />
</форма> 

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

&linput type="month" value="2019-12" /> 

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — №

16) Тип ввода «time»

Тип time позволяет пользователям выбирать время (цифровое) с помощью регулятора spinner . Многие браузеры до сих пор не поддерживают этот тип. Отлично работает с последними версиями Хром и Край .

<form метод="получить" действие="">
    &linput type="time" name="nop" />
</form> 

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

&linput type="time" value="12:51" /> 

Если вы хотите, чтобы время отображалось как «12:51:20», значения выглядят следующим образом.

&linput type="time" value="00:51:20" /> 

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — №

17) Тип ввода «color»

Тип color позволяет пользователям выбирать цвета из элемента управления Color Picker. Цвет по умолчанию — черный . Когда вы впервые загружаете тип ввода в браузере, он показывает черный цвет. Мы можем использовать HEX-код, чтобы определить цвет по нашему выбору.

<form метод="получить" действие="">
    &linput type="color" name="color-me" />
</форма> 

Добавьте значение шестнадцатеричного кода вместе с типом.

&linput type="color" value="#CCCCCC" /> 

Поддержка браузера:
Chrome — Да | Край — Да | FireFox — Да

18) Тип ввода HTML5 «search»

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

&linput type="поиск" /> 

19) Тип ввода «range»

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

&linput type="range" name="carat-range" /> 

Так как это диапазон, он должен иметь минимальное значение и максимальное значение . Для этого мы добавим атрибут min и max с диапазоном типов.

&linput type="range" min="1" max="10" value="3" name="carat-range" /> 

Итак, теперь диапазон имеет минимальное значение 1 и максимальное значение 10. Его значение по умолчанию — 3.

Попробуйте

Поддержка браузера:
Chrome — Да | Край — Да | FireFox 34.