Статьи

Введите это — введите это, HTML5 новые типы ввода

Сентябрь 28, 2018

Мы привыкли вводить типы, такие как «submit», «radio» или «hidden», но в наши дни есть такие распространенные компоненты, которые являются частью почти любой веб-инфраструктуры, независимо от того, используется ли она на Java, Ruby, Python. или любой другой язык. Я дам краткий обзор того, что добавляется в HTML5. Их текущее состояние таково … они вроде работают, в основном не все функции поддерживаются во всех современных браузерах или IE.

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

Выбор даты связан.

Много раз вам нужно было создать или интегрировать какой-то элемент управления, который будет использоваться для выбора даты и времени, я делал это часто, и я уверен, что у вас тоже есть. Но почему мы должны делать что-то подобное, это должно быть частью HTML, и мы должны просто стилизовать его с помощью CSS. HTML5 делает это очень просто с типами ввода даты.

<input type="datetime" />
<input type="datetime-local" />
<input type="date" />
<input type="week" />
<input type="time" />

Живой пример:

 

Электронная почта, телефон и URL

Пример проверки электронной почты в Opera 12
Тип ввода электронной почты на iOS

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

Вы также можете создавать стили с помощью CSS, используя специфичные для типа ввода селекторы, такие как
input [type = radio] На сегодняшний день самое лучшее в типах ввода — это то, что они семантически правильны, поэтому мобильные телефоны открывают специфический вид ввода на клавиатуре.
 

 <form>
    <input name="email" type="email" pattern="[^ @]*@[^ @]*" value="" />
    <input id="url" type="url" />
    <input id="phone" type="tel" />
    <input type="submit" />
  </form>

Живой пример:

Тип входа телефона на iOS

 

цвет

Тип ввода, который приводит к палитре цветов.
 


<input type="color" />

Разве это не то, что вы всегда хотели? … по крайней мере, когда дело доходит до ввода HTML.

TL; DR версия


НОВЫЕ типы ввода HTML5, потрясающе !!! посмотреть
демо

Ссылки по теме

Демоверсии — 
 http://mitemitreski.com/demo/html5/input.html

Спецификация элемента ввода W3 — 
 http://www.w3.org/TR/2011/WD-html5-20110525/the-input-element.

Тест поддержки html — 
 http://www.quirksmode.org/html5/tests/inputs_dates.html

Статья для разработчиков Mozzila — 
 https://developer.mozilla.org/en-US/docs/HTML/Element/Input

Страница веб-платформы —
 http://docs.webplatform.org/wiki/html/elements/input/type/search

 

36
Share: