Фрэйн . - 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.
