158 |
Глава 9.. Веб-формы как форма безумия |
|
|
сценарий потенциально способен перенести фокус |
Может случиться так, что ваша серверная система |
в одно из полей уже после того, как пользователь |
проявит недостаточно гибкости для реализации по- |
начал работать с другим элементом страницы (вот |
добного решения. Тогда, если сценарий нельзя вста- |
почему «продвинутые» пользователи так не любят |
вить посередине страницы, следует устанавливать |
сценарии автофокусировки). В предыдущем примере |
фокус по срабатыванию такого пользовательского |
сценарий расположен в коде страницы непосред- |
события, как $(document).ready() в jQuery, а не стан- |
ственно после поля формы, на которое он ссылается. |
дартного window.onload. |
|
|
Адреса электронной почты
Больше десятка лет веб-формы могли включать поля лишь нескольких типов, самые популярные из которых перечислены в табл. 9.3.
Таблица 9.3. Типы полей ввода в HTML 4
Тип поля |
HTML-код |
Примечание |
Флажок |
<input type="checkbox"> |
Может быть установлен и снят |
Переключатель |
<input type="radio"> |
Способен объединяться в груп- |
|
|
пы с другими полями ввода |
Поле ввода пароля |
<input type="password"> |
Вместо любых символов, вво- |
|
|
димых пользователем, |
|
|
отображает точки |
Раскрывающийся список |
<select><option>… |
|
Выборщик файла |
<input type="file"> |
Выводит окно открытия файла |
Кнопка отсылки формы |
<input type="submit"> |
|
Поле текстового ввода |
<input type="text"> |
Атрибут type может быть |
|
|
опущен |
Все эти типы полей работают и в HTML5. При обновлении до HTML5 (то есть, как правило, при смене определения типа документа, о чем читайте в разделе «Определение типа документа» главы 3) вам не придется вносить в веб-формы никаких изменений. Да здравствует обратная совместимость!
Впрочем, в HTML5 появились некоторые новые типы полей, за использование которых (по причинам, которые сейчас станут ясны) единогласно выступают профессионалы.
Первый из этих новых типов полей предназначен для ввода адресов электронной почты. Вот код простейшей формы с таким полем:
<form>
<input type="email">
<input type="submit" value="Go"> </form>
Только что я с большим трудом удержался от того, чтобы написать: «В браузерах, которые не поддерживают type="email"…» Что же меня останавливает? Видите ли, я не уверен в смысле выражения «не поддерживать type="email"». В определенном смысле «поддерживают» type="email" все браузеры. Браузер может не
Адреса электронной почты |
159 |
делать с таким полем ничего особенного (далее будет несколько примеров спе цифической обработки), но браузеры, незнакомые с type="email", во всяком случае распознают такое поле как type="text" и отобразят его как обычное поле текстового ввода.
Мне буквально не хватает слов для доказательства важности этого факта. Миллионы форм в Интернете, в которых предлагается ввести адрес электронной почты, построены на основе <input type="text">. Пользователь видит перед собой поле текстового ввода, вписывает в это поле свой электронный адрес — и все. Но вот появляется HTML5, в котором определен type="email". Какой будет реакция браузеров? Неужели они сойдут с ума? Вот и нет. Все браузеры мира, даже IE6, воспринимают неизвестное значение атрибута type как type="text". Так что обновить веб-формы, вписывая в них type="email", можно уже сейчас.
Что же имеется в виду, когда говорят, что браузер поддерживает type="email"? Собственно, что угодно. В спецификации HTML5 не предписан какой-либо определенный вид пользовательского интерфейса для новых типов полей. Opera помещает рядом с полем type="email" значок электронной почты. Другие HTML5браузеры, например Safari и Chrome, отображают обычное поле текстового ввода, такое же, как type="text". Поэтому пользователь, если только он не заглянет в исходный код страницы, так и не увидит разницы.
Есть еще iPhone. Физическая клавиатура у iPhone отсутствует, а текст набирается посредством прикосновений к экранной клавиатуре, которая всплывает в подходящее для этого время, например при фокусировке одного из полей формы на веб-странице. Браузер iPhone устроен очень интересно: распознавая некоторые
HTML5-типы полей ввода, он динамически |
|
|
меняетвидэкраннойклавиатуры, чтобы соот- |
|
|
ветствующие символы было удобнее вводить. |
|
|
Так, например, адрес электронной почты — |
|
|
это текст, не правда ли? Да, но текст особого |
|
|
рода. Практически во всех адресах электрон- |
|
|
ной почты содержатся символ @ и по крайней |
|
|
мере одна точка (.), а пробела ожидать не сле- |
|
|
дует. Поэтому, когда пользователь iPhone фо- |
|
|
кусирует на странице тег <input type="email">, |
|
|
всплывающая экранная клавиатура содержит |
|
|
пробелменьшеобычныхразмеров,атакжеспе- |
|
|
циальные клавиши для символов . и @, как по- |
|
|
казано на рис. 9.3. |
|
|
Если подвести итог, то окажется, что нет |
|
|
никаких препятствий, которые бы заставля- |
|
|
ли повременить с превращением полей ввода |
|
|
электронных адресов в type="email". Этого |
|
|
превращения, правда, почти никто не заме- |
|
|
тит, кроме пользователей iPhone. Но кто заме- |
|
|
тит, тот, тихонько улыбнувшись, поблагодарит |
Рис. 9.3. Клавиатура, |
|
вас за возможность работать в Сети чуть-чуть |
||
оптимизированная для ввода адреса |
||
проще. |
||
электронной почты |
160 |
Глава 9.. Веб-формы как форма безумия |
Веб-адреса
Веб-адреса, известные многим как URL, а малочисленным педантам как URI, — это еще один тип специализированного текста. Соответствующие сетевые стандарты определяют синтаксис веб-адресов. Если веб-приложение просит вас ввести в форму веб-адрес, то ожидается, что вы напишете что-то наподобие http://www..google.. com/, а не «Петровка, 38». В адресах часто применяются правые слеши и точки, а пробелы запрещены. Каждому веб-адресу
свойствен суффикс домена: ..com, ..org и др. Леди и джентльмены, представляю вашему
вниманию (барабанная дробь, все глаза при-
кованы ксцене)… <input type="url">! На iPhone
этот тип поля текстового ввода выглядит, как показано на рис. 9.4.
Какивслучаесадресомэлектроннойпочты, iPhone предоставляет пользователю виртуальную клавиатуру особого вида, приспособленную для веб-адресов. Пробел здесь полностью заменен тремя виртуальными клавишами: правый слеш (/), точка (..) и .com. Удерживая нажатой клавишу ..com, можно выбрать другой популярный домен: ..org, ..net и т. п.
Браузеры без поддержки HTML5 будут обрабатывать type="url" в точности так же, как type="text", что снимает все вопросы по поводу использования полей этоготипадля ввода вебадресов.
|
Рис. 9.4. Клавиатура, |
|
Числа как счетчики |
оптимизированная для ввода |
|
URL-адреса |
||
|
Далее у нас на очереди числа. Спрашивать о числе во многих отношениях сложнее, чем об адресе электронной почты или веб-адресе. Прежде всего числа не так просты сами по себе. Вот выберите какое-нибудь число. –1? Нет, я имел в виду число из интервала от 1 до 10. 7 1/2? Нет, нет, только не дробь, пожалуйста. А как насчет π? Ну, это совсем уж иррациональный выбор.
Я хочу показать, что о «числах вообще» спрашивают не так часто. Чаще запрашивается число определенного вида (например, целое, но не обыкновенная или десятичная дробь; либо что-либо более сложное, скажем, кратное 10) из определенного диапазона. Возможность сделать все это и предоставляет HTML5.
Рассмотрим такой пример:
<input type=”number” min="0" max="10" step="2" value="6">
Числа как счетчики |
161 |
Будем рассматривать атрибуты по порядку (если хотите, можете в браузере экспериментировать с их значениями).
type="number" — означает, что поле ввода — числовое.
min="0" — говорит, чему равно минимально допустимое значение поля.max="10" — говорит, чему равно максимально допустимое значение поля.
step="2" — в сочетании со значением min определяет множество разрешенных чисел внутри диапазона: 0, 2, 4 и т. д. вплоть до значения max.
value="6" — значение по умолчанию. Этот атрибут должен быть вам знаком: он традиционно применяется, чтобы выставить значения по умолчанию в полях формы. (Хочу напомнить, что HTML5 основан на предыдущих версиях HTML. Чтобы делать уже знакомые операции, вам незачем переучиваться со старого стандарта на новый.)
Таков HTML-код поля ввода числа. Надо помнить, что все перечисленные атрибуты необязательны. Если вы почему-либо решили ограничить интервал только минимальным значением, а не максимальным, задайте атрибут min и не указывайте max. По умолчанию шаг счета равен единице, что позволяет опустить атрибут step во всех тех случаях, когда другое значение шага не требуется. Если значение по умолчанию не задано, то атрибут value может принять вид пустой строки или вообще исчезнуть.
На этом HTML5 не останавливается. По той же самой милой сердцу цене: ноль целых ноль десятых — программист приобретает следующие замечательные мето-
ды JavaScript:
input.stepUp(n) —увеличиваетзначениеполя на n единиц;
input.stepDown(n) —уменьшаетзначениеполя на n единиц;
input.valueAsNumber — возвращает текущее значениеполяввидечисласплавающейзапятой (свойство input.value, напомню, всегда строкового типа).
Возникли проблемы с отображением в браузере? Надо сказать, что интерфейс числовых встраиваемых компонентов в различных браузерах реализован по-разному. На iPhone, где проблематиченглавнымобразомпользовательский ввод, браузер вновь оптимизирует виртуальную клавиатуру, на этот раз для ввода чисел, как показано на рис. 9.5.
ВдесктопнойверсииOperaтожесамоеполе type="number" отображаетсяввидесчетчикаснебольшими стрелками, направленными вверх
ивниз. Щелкая на них, можно увеличивать
иуменьшать числовое значение (рис. 9.6).
Рис. 9.5. Клавиатура, оптимизированная для ввода числа