Типы полей input

Подготовили: Евгений Рыжков и Татьяна Головко Дата публикации: 09.03.2011

Ты знаешь о веб-формах все, да? Создаем <form>, добавляем несколько элементов <input type="text" /> и, может быть, <input type="password" />. В конце ставим кнопку <input type="submit" />.

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

  • <input type="search"/>— для блоков поиска;
  • <input type="number"/>— для счетчика;
  • <input type="range"/>— для «ползунка»;
  • <input type="color"/>— для выбора цвета;
  • <input type="tel"/>— для телефонного номера;
  • <input type="url"/>— для веб адреса;
  • <input type="email"/>— для адреса электронной почты;
  • <input type="date"/>— для выбора даты из календаря;
  • <input type="month"/>— для месяца;
  • <input type="week"/>— для недели;
  • <input type="time"/>— для временной метки (timestamp);
  • <input type="datetime"/>— для точной абсолютной даты/времени;
  • <input type="datetime-local"/>— для локальных даты и времени.

Определить поддержку HTML5 типов полей можно приемом №4, описанным ранее. Сначала создаем фиктивный элемент input.

var i = document.createElement("input");

По умолчанию все поля имеют тип "text". Это важно.

Далее устанавливаем полю тип, поддержку которого хотим проверить

i.setAttribute("type", "color");

Если браузер поддерживает конкретный тип, это тип будет сохранен. В противном случае, тип поля будет проигнорирован и останется тип "text".

return i.type !== "text";

Чтобы не выполнять самому проверку 13 типов полей, можно воспользоваться Modernizr, который повторно использует один и тот же фиктивный элемент для определения поддержки всех тринадцати типов. Modernizr строит хеш из 13 ключей (типы полей) и 13-ти логических значений (true – если поддерживается и false – Если нет)

if (!Modernizr.inputtypes.date) {
// если нет встроенной поддержки <input type="datetime"/> :(
// делаем это по старинке с помощью
// Dojo
// или jQueryUI
}

Куда дальше

Показать комментарии