типы html5 input

Поддержка HTML5 мобильных форм и типов HTML input

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

Типы HTML5 Input

HTML5 имеет кучу новых типов ввода для форм. Эти типы вводов позволяют лучше контролировать входные данные и проверять их. Некоторые из них особенно полезны для мобильных пользователей, у которых часто возникают трудности с работой HTML Input. Полный список типов входных данных приводится ниже:

  • color — выбор цвета
  • date — выбор даты
  • datetime — выбор даты и времени
  • email — валидация email-маски
  • number — ввод номер
  • range — слайдер диапзаонов
  • search — поле для поиска
  • tel — валидация маски телефона
  • time — выбор времени
  • url — валидация URL

Разумеется, данный перечень не полный. Сюда не включены типы, которые приняты стандартом, но суть их пока не ясна. Самые популярные  и актуальные из приведенных выше типов мы рассмотрим в данной статье с приведением примеров.

1. Input type color

Если поддерживается этот тип входного сигнала, то браузер пользователя вызовет встроенный color-picker (выбор цвета) на клиентском устройстве. Выбранный цвет будет представлен в соответствующем шестнадцатеричном значении RGB.

Код:

<input type="color" />

Пример работы:

Стиль всплывающего окна будет зависеть от Вашего браузера. Щелкните на кнопку, чтобы посмотреть, как это работает.

Выберите Ваш цвет: 

К сожалению, поддержка данного типа мобильными браузерами оставляет желать лучшего. Из всех существующих, корректное отображение можно найти только в Opera Mobile и Chrome Android. Для всех остальных обозревателей будет показано пустое текстовое поле. Это стоит иметь ввиду. Как вариант, можно набросать палитру на JS либо воспользоваться плагинами.

2. Input type date

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

Код:

<input type="date" />

Пример работы:

Выбор даты:

Обратите внимание, что тип ввода Date, а также варианты типа datetime и datetime-local предлагают полезные атрибуты, такие значения, как min и max, которые могут устанавливать ограничение и проверку данных, вводимых пользователем. Мы это продемонстрируем ниже по тексту.

Тип HTML Input Date поддерживается почти всеми браузерами. Исключение составляют Opera Mini и дефолтный браузер Android.

3. Input type datetime и datetime-local

Этот тип Input позволяет пользователю указывать дату и время в удобном формате. Если поддерживается, то будет отображен как родной виджет дата\время устройства. Разница между указанными типами ввода состоит в том, что первый привязывается к мировому времени, а второй не содержит никакой информации о временной зоне.

Код:

<input type="datetime-local" />

Пример работы:

Выбор даты и времени:

Не поддерживается в IE Mobile и Opera Mini. На остальных популярных обозревателях (мобильных) тип работает более мене корректно, однако не редки случаи багов и глюков. Имейте и это ввиду тоже, и не забывайте о запасных вариантов на JavaScript.

4. Input type email

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

Код:

<input type="email" />

Пример работы:

Введите Ваш e-mail адрес:

Перед отправкой, браузер проверяет корректность заполненного поля и сообщает пользователю в случае недопустимого формата ввода. Расчет идет по следующему выражению {text}@{domain}

5. Input type number и tel

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

Код:

<input type="number" />

Пример работы:

Введите цифры:

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

6. Input type range

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

Код:

<input type="range" />

Пример работы:

Выбор значения:

Диапазон по умолчанию в большинстве браузеров находится между 0 и 100. То есть крайнее левое положение ползунка соответствует 0, а правое 100. Можно изменить диапазон с помощью атрибутов min и Max. Мы также можем задать значение шага, через шаг атрибута. Так, чтобы указать диапазон от 5 до 50, с шагом 5, мы будем использовать:

<input type="range" min="5" max="50" step="5"/>

Поддержка всеми популярными браузерами, кроме Opera Mini.

7. Валидация формы

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

<input type="text" required />

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

Также можно задавать минимальные и максимальные значения. Например:

<input type="date" min="2013-10-01">

Будет означать запрет ввода даты, старше 2013-10-01.

Регулярные выражения

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

<input type="text" pattern="[a-zA-Z]*" />

Заключение

Грамотное использование типов HTML Input может неплохо сократить Ваши временные затраты на написание дополнительных обработчиков валидации, паттернов и т.д. Зная все возможности HTML5 можно смело создавать современные приложения.

Источник: Перевод - mobiforge.com

Телеграм-канал JavaScript Daily Practice