В 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" id="mycolor">
</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" id="mydate">
</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" id="mydatetime">
</form>

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

Input type Email

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

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

<form>
    <label for="myemail">Enter Email Address:</label>
    <input type="email" id="myemail" 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" id="mymonth">
</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" id="mynumber">
</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" id="mynumber">    
</form>

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

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

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

<form>
    <label for="mysearch">Search Website:</label>
    <input type="search" id="mysearch">
</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" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>

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

Input type Time

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

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

<form>
    <label for="mytime">Select Time:</label>
    <input type="time" id="mytime">
</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" id="myurl" 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" id="myweek">
</form>

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

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.