162 |
Глава 9.. Веб-формы как форма безумия |
Operaбережноотноситсякатрибутамmin,max иstep, поэтому вы легко добьетесь приемлемого числового значения.Придостижениимаксимумастрелка«вверх» в счетчике «выцветает» и становится серой (рис. 9.7).
Правило,которомуподчиненывседругиеполяввода,упоминавшиесявэтойглаве,распространяетсяина type="number": браузер, который не поддерживает этот тип,будетрасцениватьегокакtype="text".Вполебудет отображено значение по умолчанию (так как оно хранится в атрибуте value), а прочие атрибуты — min, max и др. — будут проигнорированы. Вы можете реализовать их самостоятельно, а можете воспользоваться од- нимизмногочисленныхJavaScript-фреймворков,вко- торых компоненты типа «счетчик» уже реализованы. Но не забудьте сначала протестировать встроенную поддержку HTML5 (см. раздел «Типы полей ввода» главы 2), например, таким образом:
if (!Modernizr.inputtypes.number) {
//встроенной поддержки полей type="number" нет,
//можно попробовать решить проблему с помощью Dojo
//или другого JavaScript-фреймворка
}
Рис. 9.6. Счетчик
Рис. 9.7. На счетчике достигнуто максимальное значение
Числа как ползунки
Счетчики, о которых речь шла в предыдущем разделе, — не единственный способ представления вводимых чисел. Вам, наверное, знакомы также компоненты типа «ползунок», внешний вид одного из которых показан на рис. 9.8.
Теперь ползунки доступны и в веб-формах. По своему
HTML-коду ползунок фантастически похож на счетчик: |
|
|
<input type=”range” |
Рис. 9.8. Ползунок |
|
min="0" |
||
|
||
max="10" |
|
|
step="2" |
|
|
value="6"> |
|
Доступны те же самые атрибуты, что и у поля ввода type="number": min, max, step, value. Они и означают то же самое. Отличается только внешний вид пользовательского интерфейса. Как ожидается, вместо обычного поля для ввода браузеры будут отображать type="range" в виде ползунка. Ко времени написания данной главы это уже умели делать последние версии Safari, Chrome и Opera. К сожалению, iPhone выводит на экран просто текстовое поле и даже не оптимизирует экранную клавиатуру для ввода чисел. Все остальные браузеры рассматривают поля такого типа как type="text". В общем, не усматривается серьезных причин, которые мешали бы уже сейчас начать пользоваться ползунками на веб-страницах.
Выборщики даты |
163 |
Выборщики даты
В HTML4 не было компонента для выбора даты. Решение было найдено в различ-
ных JavaScript-фреймворках (Dojo, jQuery UI, YUI и библиотека Closure), но, ко-
нечно, каждое такое решение требует постоянной опоры на фреймворк, с помощью которого построен выборщик.
В HTML5 был в конце концов определен встроенный элемент управления — выборщик даты, не полагающийся на пользовательские сценарии. Фактически есть шесть разных выборщиков: дата, месяц, неделя, время, дата + время и дата + время с часовым поясом.
Из табл. 9.4 видно, что в настоящее время поддержка этой функциональности, мягко скажем, неширока.
Таблица 9.4. Поддержка выборщиков даты
Тип |
Opera |
Остальные браузеры |
type="date" |
9..0+ |
– |
type="month" |
9..0+ |
– |
type="week" |
9..0+ |
– |
type="time" |
9..0+ |
– |
type="datetime" |
9..0+ |
– |
type="datetime-local" |
9..0+ |
– |
Как Opera отображает <input type="date">, показано на рис. 9.9.
Рис. 9.9. Выбор даты |
Рис. 9.10. Выбор даты |
Рис. 9.11. Выбор месяца |
|
и времени |
|
На тот случай, если требуется дата вместе с временем, Opera поддерживает <input type="datetime"> — выборщик, внешний вид которого показан на рис. 9.10.
Если нужны только месяц и год (может иметься в виду, например, месяц, когда истекает срок действия кредитной карты), Opera отобразит объект <input type="month">, показанный на рис. 9.11.
Менее распространен, но также доступен выбор определенной недели года. Это позволяет сделать объект <input type="week"> (рис. 9.12).
164 |
Глава 9.. Веб-формы как форма безумия |
|
Можно, наконец, выбирать только время с помо- |
|
|
щью объекта <input type="time"> (рис. 9.13). |
|
|
Вероятно,вконцеконцовидругиебраузерыначнут |
|
|
поддерживатьэтитипыполейввода.Поначалув брау- |
|
|
зерах,нераспознающихtype="date" иеговарианты,эти |
|
|
поля, как поля type="email" (см. раздел «Адреса элек- |
|
|
троннойпочты»этойглавы)идругихтипов,будутото- |
|
|
бражаться в виде полей ввода обычного текста. Если |
|
|
хотите, <input |
type="date"> и его «родню» можно уже |
|
внедрять: это обрадует пользователей Opera, а другие |
|
|
браузерытемвременемуспеютнаверстатьупущенное. |
|
|
Как вариант, |
можно, пользуясь <input type="date">, |
Рис. 9.12. Выбор недели |
проверять,встроеналивбраузерподдержкавыборщи- |
||
ков даты (см. раздел «Типы полей ввода» главы 2), |
|
|
и как запасным решением пользоваться одним из сце- |
|
|
нариев по вашему выбору: |
|
|
<form> |
|
Рис. 9.13. Выбор времени |
<input type="date"> |
|
|
</form> |
|
|
…
<script>
var i = document.createElement("input"); i.setAttribute("type", "date");
if (i.type == "text") {
//Встроенной поддержки выборщиков даты нет.
//Воспользуйтесь Dojo/jQueryUI/YUI/Closure или другим решением, чтобы
//создать компонент-выборщик и динамически заменить им тег <input>
}
</script>
Формы поиска
Вот действительно интересная тема. Суть всего достаточно проста, объяснять нужно только некоторые детали реализаций. Итак… поиск.
В наши дни это далеко не только поиск от Google или Yahoo! (хотя и это тоже). Вспомните любую форму поиска на любой странице или сайте. Окна поиска имеют Amazon, Newegg, большинство блогов и т. д. Как сделаны эти формы? В их основе, как и в основе большинства полей текстового ввода в современном Интернете, лежит тег <input type="text">. HTML5 исправляет дело:
<form>
<input name="q" type=”search”> <input type="submit" value="Find">
</form>
В некоторых браузерах такое поле будет неотличимо от обычного текстового. Но при пользовании Safari на Mac OS X форма поиска будет выглядеть так, как показано на рис. 9.14.
И еще об одной вещи |
165 |
Улавливаете разницу? У поля ввода скругленные углы! Да, конечно, вам сейчас трудно сдержать эмоции, но погодите: это еще не все! Когда вы начнете вводить текст вполеtype="search",Safariсправаотполяотобразиткнопочкускрестиком.Еенажатие позволиточиститьполеоттекста(GoogleChrome,посвоейтехнологическойначинке родственныйSafari,ведетсебятакже).Обеэтихитростисозданыпообразу«родных» форм поиска в iTunes и других клиентских приложениях Mac OS X (рис. 9.15).
Рис. 9.14. Форма поиска |
Рис. 9.15. Форма поиска, несущая фокус |
Apple применяет тег <input type="search"> в форме поиска по своему сайту, чтобы на нем чувствовалась атмосфера Macintosh. Но ничего специфического для Macintosh в этой функциональности нет. В сущности, это просто гипертекстовая разметка. Любой браузер на любой платформе может прорисовывать форму поиска в соответствии с общей стилистикой платформы.
Браузеры, которые не воспринимают type="search", будут видеть в нем, как и в остальных новых типах, не более чем обычный type="text". Стоит уже сейчас задуматься об использовании полей type="search" во всех окнах поиска.
Выборщики цвета
В спецификации HTML5 описано также поле ввода <input type="color">, которое позволяет выбрать цвет и возвращает его шестнадцатеричный код. Браузеры пока не поддерживают выбор цвета — и это, честно говоря, очень плохо. Мне всегда нравились панели выбора цвета в Mac OS. Может быть, когда-нибудь что-то подобное будет реализовано и в браузерах.
Секреты разметки
Есть, впрочем, одна причина, осложняющая приме- |
я называю самые базовые вещи: границы, фоновые |
нение <input type="search">. К полям поиска Safari |
цвета, фоновые изображения, отступы и пр.). Зато есть |
не применяет стандартные CSS-стили (стандартными |
круглые уголки!.. |
|
|
Иеще об одной вещи
Вэтой главе я рассказывал о новых типах полей ввода и таких новых функциях, как автофокусировка поля формы. За кадром осталось самое, пожалуй, захватывающее, что можно сообщить об HTML5-формах: автоматическая проверка (валидация) пользовательского ввода. Рассмотрим популярную проблему ввода адреса