Эра  HTML5 всё близится и близится.

В новой спецификации HTML у тэга input появятся новые значения атрибута type. При этом каждый из них будет обрабатываться по-своему и будет дополнять интерфейс и удобство пользования.

Не все эти типы данных поддерживаются сейчас, но в скором времени надеюсь все станет лучше. Сегодня большинство типов данных поддерживает Chrome любых версий.

 

input type = numbers (Chrome all, Opera 11+)

Позволяет добавить к полю для ввода стрелочки вверх и вниз, как на стандартных полях для ввода чисел в операционной системе. Кроме того при потере фокуса поля для ввода срабатывает аналог функции parseInt, которая пытается оставить в поле для ввода только цифры. Очень удобно. На деле эо выглядит вот так (по крайней мере в текущей версии Chrome для MacOs):

 

input type = range (Chrome all, Opera 11+)

Тоже достаточно удобная фишка. Позволяет сделать стандартно-операционно-системный ползунок. У меня это выглядит вот так:

 

input type = email, input type = tel, input type = url (Chrome all, Opera 11+,email Firefox 4+)

Поле для ввода с автоматической валидацией введенной строки на Email, телефон или URL. Удобно. Скоро не нужно будет вручную писать регулярные выражения. Визуально поле для ввода ничем не отличается от обычного, но при отправке формы должна сработать валидация.

 

input type = search (Chrome all, Opera 11+, Safari 5+)

Наверняка многие уже об этом поле знают. Именно так делаются поля для поиска в стиле MacOs (правда работает только на Webkit: Chrome + Safari). Внешне очень привлекательный. На MacOs автоматически скругляются уголки, а после введения информации появляется симпатичная кнопочка очистить в правом углу. А еще можно задать количество предлагаемых популярных запросов (что-то вроде автокомплита) при помощи дополнительного атрибута results.

 

input type = time, input type = week, input type = month, input type = time, input type = datetime, input type = datetime-local (Chrome all, Opera 11+)

Достаточно интересная идея, но пока не очень хорошо реализованная. Позволяют выбирать время, дату, номер надали, номер месяца, текущие дату и время. Но при этом все это пока сделано так же, как и у input type=number (то есть стрелочки вверх/вниз). У меня это работает вот так:

 

input type=color (работает только в Opera 11+)

Не знаю что должно происходить с этим полем для ввода (нет возможности проверить в Opera. Но надеюсь, что это все скоро будет работать, и будет появляться диалог выбора цвета.

 

Не HTML5, но тем не менее редко используемые тип поля для ввода: input type=reset

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