Типы полей input

Ты знаешь о веб-формах все, да? Создаем <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
}

Куда дальше

• следующая — Замещаемый текст
• предыдущая — Геолокация
• содержание