HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

search

Настроить поле ввода под тип данных search можно следующим образом:

type="search"

Поля с этим типом ведут себя так же, как стандартные поля ввода текста. Рассмотрим следующий пример:

<div>

    <label for="search">Search the site...</label>

    <input id="search" name="search" type="search" placeholder= "Wyatt Earp">

</div>

Но программные клавиатуры, которые имеются на мобильных устройствах, зачастую предоставляют более подходящий набор клавиш. Вот как выглядит клавиатура iOS 8.2, появляющаяся при получении фокуса полем с типом вводимых данных search.

pattern

Поле ввода можно настроить на ожидание ввода конкретного шаблона:

pattern=""

Атрибут pattern позволяет с использованием регулярного выражения указать синтаксис данных, разрешенных для ввода в данном поле.

сведения о регулярных выражениях

Если вы еще не сталкивались с регулярными выражениями, я рекомендую начать их изучение со статьи, находящейся по адресу http://en.wikipedia.org/wiki/Regular_expressions.

Регулярные выражения используются во многих языках программирования в качестве средства выявления соответствия возможным строкам. Хотя поначалу их формат отпугивает, они обладают невероятными эффективностью и гибкостью. Например, можно создать регулярное выражение для проверки соответствия формату пароля или выбора конкретного стиля схемы наименования CSS-класса. В качестве вспомогательного средства создания собственного шаблона регулярного выражения и получения визуального представления о том, как он работает, я рекомендую для начала воспользоваться запускаемым в браузере средством http://www.regexr.com/.

Рассмотрим следующий пример кода:

<div>

    <label for="name">Your Name (first and last)</label>

    <input id="name" name="name" pattern="([a-zA-Z]{3,30}s*)+[a-zA- Z]

         {3,30}" placeholder="Dwight Schultz" required>

</div>

Работая над книгой, я приблизительно 458 секунд вел поиск в Интернете, чтобы найти регулярное выражение, которому бы соответствовал синтаксис имени и фамилии. Путем ввода регулярного выражения в атрибут pattern поддержива­ющим его браузерам предписывалось ожидать ввода в поле тех данных, у которых имеется соответствующий синтаксис. Затем в сочетании с атрибутом required неверно введенные данные получали в поддерживающих браузерах последующую трактовку. В данном случае я пытался отправить форму, не предоставляя фамилию.

И опять браузеры работают по-разному. Internet Explorer 11 требует, чтобы в поле вносились корректные данные, а Safari, Firefox и Chrome ничего не делают — ведут себя так, как будто имеют дело со стандартным вводом текста.

color

Хотите настроить поле ввода на прием значения цвета в шестнадцатеричном формате? Можете воспользоваться следующим кодом:

type="color"

Тип ввода color инициирует в поддерживающих его браузерах (на данный момент это Chrome и Firefox) появление панели выбора цвета, позволяя пользователям выбирать значения цвета в виде шестнадцатеричного числа. Рассмотрим в качестве примера следующий код:

<div>

    <label for="color">Your favorite color</label>

    <input id="color" name="color" type="color">

</div>

Ввод даты и времени

Новые типы вводимых данных date и time задумывались с целью дать пользователям единое представление о выборе значений дат и времени. Если вам когда-либо приходилось покупать на сайте билеты на какое-нибудь мероприятие, то, скорее всего, вы уже пользовались панелью выбора даты того или иного вида. Почти всегда эта функциональная возможность обеспечивалось средствами JavaScript (обычно с использованием библиотеки jQuery UI), но есть надежда, что данное необходимое всем средство станет доступным и при использовании простой разметки HTML5.

date

Рассмотрим в качестве примера следующий код:

<input id="date" type="date" name="date">

Как и в случае с вводом данных типа color, чисто браузерная поддержка этого типа развита пока еще слишком слабо. Изначально большинство браузеров работают с такими полями как с обычными, предназначенными для ввода текста. Эта функциональная возможность реализована только в двух современных браузерах: Chrome и Opera. И это неудивительно, поскольку оба они используют один и тот же движок (так называемый Blink, если вам интересно).

Существует множество типов вводимых данных, имеющих отношение к дате и времени. И вот их краткий обзор.

month

Рассмотрим в качестве примера следующий код:

<input id="month" type="month" name="month">

Интерфейс позволяет пользователю выбрать какой-нибудь месяц и предоставляет ввод в виде года и месяца, например 2012-06. Как это выглядит на экране браузера, показано на следующей копии экрана.

week

Рассмотрим в качестве примера следующий код:

<input id="week" type="week" name="week">

При использовании типа вводимых данных week панель позволяет пользователю выбрать какую-нибудь неделю года и предоставляет ввод в формате 2012-W47.

На следующей копии экрана показано, как это выглядит в окне браузера.

time

Рассмотрим в качестве примера следующий код:

<input id="time" type="time" name="time">

Тип вводимых данных time позволяет вводить в поле значение в 24-часовом формате, например 23:50.

Поле появляется в поддерживающих браузерах с элементами прокрутки, но допускает присутствие только подходящих для времени данных.

range

Указание типа вводимой информации range приводит к созданию элемента интерфейса под названием «ползунок». Рассмотрим пример:

<input type="range" min="1" max="10" value="5">

Здесь показано, как этот элемент выглядит в окне браузера Firefox.

По умолчанию устанавливается диапазон от 0 до 100. Но, указывая в нашем примере величины min и max, мы ограничили выбираемые числа, задав диапазон от 1 до 10.

Одна из существенных проблем, замеченных мною при указании типа вводимого значения range, заключается в том, что при перемещении ползунка пользователь не видит текущего значения. Хотя ползунок предназначен только для произвольного выбора чисел, я часто испытывал желание увидеть текущее значение в процессе изменения положения ползунка. Пока способов сделать это средствами HTML5 не существует. Но при крайней необходимости отображения текущего значения при перемещении ползунка этого нетрудно добиться с помощью несложного фрагмента кода JavaScript. Внесем в код предыдущего примера следующие изменения:

<input id="howYouRateIt" name="howYouRateIt" type="range" min="1"

max="10" value="5" onchange="showValue(this.value)"><span

id="range">5</span>

К коду были добавлены два фрагмента: атрибут onchange и элемент span, име­ющий идентификатор range. Теперь добавим следующий небольшой фрагмент кода JavaScript:

<script>

    function showValue(newValue)

    {

        document.getElementById("range").innerHTML=newValue;

    }

</script>

Все это позволяет получить текущее значение ползунка и показать его в элементе с идентификатором range (в нашем теге span). Затем для изменения внешнего вида значения можно воспользоваться каким угодно кодом CSS.

В HTML5 есть и другие функциональные возможности, имеющие отношение к формам. Их полную спецификацию можно найти по адресу http://www.w3.org/TR/html5/forms.html.

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

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

Если есть необходимость поддержки некоторых из этих свойств в тех браузерах, в которых они не реализованы, обратите внимание на библиотеку Webshims Lib, которую можно загрузить по адресу http://afarkas.github.com/webshim/demos/. Эта библиотека полифиллов, написанная Александром Фаркашем (Alexander Farkas), может загружать полифиллы форм, заставляя тем самым браузеры, не поддерживающие соответствующие основные свойства форм HTML5, успешно справляться с решаемыми с их помощью задачами.

применяя полифиллы, проявляйте осмотрительность

При каждом применении полифилльного сценария не забудьте правильно оценить обстановку. Несмотря на свою несомненную пользу, эти сценарии утяжеляют ваш проект. К примеру, для работы Webshims также требуется применение библиотеки jQuery, а там, если вы раньше не работали с jQuery, следует иметь в виду наличие дополнительных зависимостей. Так что связываться с полифиллами без острой необходимости я бы не советовал.

Библиотека Webshims хороша тем, что она добавляет только нужные полифиллы. Если форма просматривается в браузере, имеющем встроенную поддержку соответствующих свойств HTML5, то добавляется совсем мало кода. Более старые браузеры, хотя для них и требуется загрузка большего объема кода (поскольку они изначально обладают меньшей функциональностью), получают возможность обеспечить пользователям сходное восприятие, но уже с соответствующими функциональными возможностями, реализованными с помощью JavaScript.