Новые поля ввода в HTML5

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

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

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

Раньше, к примеру, чтобы проверить правильность ввода Email адреса, приходилось использовать довольно нетривиальные регулярки, которые, кстати отталкивают немалый процент новичков. Теперь для этого существует input type="email". А для проверки URL-адреса — input type="url".

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

Кроме того, теперь можно указывать обязательные для заполнения поля (с помощью атрибута required), задавать автофокус и заменяющий текст, без использования скриптов.

<form name="example" action="#form-example">
    <input type="email" placeholder="Адрес электронной почты" autofocus>
    <input type="url" placeholder="Домашняя страцица">
    <input type="search" placeholder="Текст для поиска">
    <input type="number" min="5" max="50" step="5" value="5" placeholder="Возраст">
    <input type="range" max="100" step="2" value="10">
    <input type="date" required>
    <input type="color" required>
    <input type="submit" value="Отправить">
</form>

Пока что, наиболее полную поддержку новых полей сделали в Опере.

Подробнее, советую почитать в статье про «Сумасшедшие формы».