Хотя у HTML5-форм есть гораздо больше функций, чем у их предшественников, их так же просто определять.
HTML5 действительно предлагает много новых типов полей. Поддержка в современных браузерах уже сейчас достаточно хороша. В любом случае я сейчас покажу вам только те типы полей, которые практически пригодны для использования.
Выбор цвета
Вы можете дать возможность вашим посетителям выбирать цвет.
Когда нажимаешь на такое поле, открывается типичный селектор цвета.
Затем можно выбрать желаемый цвет. Такое поле цвета определяется с помощью <input type="color" />.
Выберите свой любимый цвет: <input type="color" name="lf" />
Полю всегда должно быть присвоено значение. Если это отсутствует или недействительно, автоматически будет принято значение #000 (черный).
Дата и время
Существует множество новшеств в HTML5, касающихся типов полей для даты и времени. И эти типы полей действительно интересны. Подумайте, например, какие шаги нужно предпринять, чтобы предложить посетителям поле выбора даты. Обычно без JavaScript (или Flash) ничего не поделаешь. Благодаря HTML5 это теперь гораздо проще. Здесь нужно просто определить поле ввода типа date.
<input type="date" />
За отображение и реализацию календаря ответственен исключительно браузер. Браузеры должны показывать соответствующий виджет для отображения календаря. В Google Chrome это выглядит следующим образом:
При помощи date определяется календарь, через который пользователи могут выбрать нужную дату. После выбора дата автоматически передается в текстовое поле.
Также легко создать поле для времени. Используется поле типа time.
<input type="time" />
С помощью time браузеры должны показывать элементы управления для выбора времени.
Подобным образом работает week. Через него отображается поле для выбора недели.
<input type="week" />
Также можно показать поле для месяца.
<input type="month" />
Оба типа полей показывают элементы управления, с помощью которых можно задать нужные данные.
Хотя time и date позволяют только выбирать дату или только время, datetime и datetime-local позволяют выбрать и то, и другое.
В datetime отображаются поле даты и поле для выбора времени рядом друг с другом. (datetime в настоящее время поддерживается только Safari и Opera).
Уже упоминалось, что представленные в этом разделе элементы формы в настоящее время не поддерживаются всеми браузерами. Тем не менее, те, кто хочет их использовать, могут прибегнуть к соответствующим решениям на JavaScript. Такие крупные JavaScript-фреймворки, как jQuery и Dojo, предлагают подходящие скрипты. С jQuery UI это выглядит так:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Таким образом, вы находитесь на безопасной стороне, даже если браузер не поддерживает классический date.
Поля для чисел
number предлагает поле, предназначенное специально для ввода чисел.
В наиболее простом случае определение поля number выглядит так:
<input type="number" />
Числа можно вводить в такие поля двумя способами:
• с клавиатуры
• через элементы управления
Добавление дополнительных атрибутов позволяет более подробно описать поля с типом number. Сначала идут два атрибута: min и max, через которые можно определить диапазоны значений полей.
• min - наименьшее возможное значение
• max - наибольшее возможное значение
Однако эти два атрибута применяются только к элементам управления браузера. Они не влияют на ручной ввод пользователей с клавиатуры.
Обоим атрибутам могут быть назначены целые и десятичные числа.
Через атрибут step можно установить шаг, который должны соблюдать элементы управления браузера.
<input type="number" min="0" max="8" step="2" />
Таким образом, через элементы управления браузера можно выбрать значения только 0, 2, 4, 6 и 8.
Ползунок
Поля с типом range позволяют выбрать значение в определенном диапазоне.
Браузеры интерпретируют поле типа range как ползунок.
<input type="range" min="0" max="10" step="2" value="6">
Минимальное значение указывается через атрибут min. max определяет наибольшее возможное значение. Если отсутствуют оба атрибута min и max, то браузеры считают их равными 0 и 100.
Через step можно определить шаг.
Создание поля поиска
search изначально не имеет функции. Скорее всего, этот тип поля предназначен как дополнение к классическому полю ввода текста. Главная задача полей search заключается в том, чтобы они отличались внешне от обычных текстовых полей. Обычно браузеры отвечают за отображение полей search.
<input type="search" />
Как это будет реализовано в итоге, остается на усмотрение производителей. Хорошим дополнением является добавление атрибута results.
<input type="search" results="5" placeholder="Поиск..." />
Атрибут results определяет, сколько предыдущих поисковых запросов должно быть показано в поле.
Но осторожно: Атрибут results не является частью спецификации HTML5.
