Лучше использовать тот тип input, который необходим для поставленных задач. Браузеры проверяют правильность ввода после заполнения конкретного элемента, а не всей формы. В настоящее время не все типы поддерживаются браузерами (кроме Оперы), но это только вопрос времени (подробнее).
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr" class=" ya-page_js_yes">
| Тип | Описание |
|---|---|
| <input type="text" autofocus maxlength="10"/> | |
| текстовое поле | |
| <input type="password"/> | |
| при вводе символы отмечаются звёздочками | |
| <input type="email"/> | |
| показывает ошибку, если введён не email | |
| <input type="file"/> | |
| для ввода файла с компьютера | |
| <input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##"/> | |
| номер телефона в определённом формате | |
| <input type="URL"/> | |
| URL | |
| <input type="search" results="5" autosave="some_unique_value"/> | |
| форма поиска. Для отмены стандартных стилей в Safari и Chrome применяется свойство: -webkit-appearance: none; | |
| <input type="color"/> | |
| для выбора цвета | |
| <input type="number" min="0" max="100" step="5"/> | |
для выбора цифр, например, количества единиц товара. Рядом отображаются стрелочки-переключатели. Узнать больше об input type="number". | |
| <input type="date" max="2012-04-20" min="2012-04-10" value="2012-04-10"/> | |
| для выбора даты в формате yyyy-mm-dd. Выводит выпадающий календарь. | |
| <input type="datetime"/> | |
| для выбора даты и времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь. | |
| <input type="datetime-local"/> | |
| для выбора даты и местного времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь. | |
| <input type="month"/> | |
| для выбора года и месяца в формате yyyy-mm. Выводит выпадающий календарь. | |
| <input type="week"/> | |
| для выбора года и недели в формате yyyy-W. Выводит выпадающий календарь. | |
| <input type="time"/> | |
| для выбора времени в формате HH:MM. Выводит выпадающий календарь. | |
| <input type="range"/> | |
показывает ползунок. Узнать больше об input type="range". | |
| <input type="checkbox"/> <input type="checkbox"/> | |
| позволяет выбрать несколько вариантов | |
| <input type="radio" checked="checked" name="raz"/> <input type="radio" name="raz"/> | |
| выбор одного из вариантов | |
| <input type="button" value="кнопка"/> | |
| кнопка | |
| <input type="submit" value="кнопка"/> | |
| кнопка для отправки данных на сервер | |
| <input type="image" src="http://1.bp.blogspot.com/_hljKDuw-cxQ/SDEJPIeJG2I/AAAAAAAAGaM/N_Lu4sxLH_4/s00/lpDemoBuscador.gif"/> | |
| рисунок для отправки данных на сервер | |
| <input type="reset" value="сброс"/> | |
| кнопка для возврата к исходному состоянию | |
| <input type="hidden" value="скрытое поле"/> | |
| скрытое поле | |