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

<form id="redemption" method="post" autocomplete="off">

Атрибут list и связанный с ним элемент datalist

Атрибут list и связанный с ним элемент datalist позволяют ряду вариантов выбора быть представленными пользователю сразу же, как только он начнет вводить значение в поле. В следующем примере кода атрибут list используется вместе со связанным с ним элементом datalist, и все это заключено в контейнер div:

<div>

    <label for="awardWon">Award Won</label>

    <input id="awardWon" name="awardWon" type="text" list="awards">

    <datalist id="awards">

        <select>

            <option value="Best Picture"></option>

            <option value="Best Director"></option>

            <option value="Best Adapted Screenplay"></option>

            <option value="Best Original Screenplay"></option>

        </select>

    </datalist>

</div>

Значение, указываемое для атрибута list (в данном случае это awards), является ссылкой на идентификатор элемента datalist. Таким способом datalist привязывается к полю ввода. Хотя здесь варианты заключены в элемент <select>, в его использовании нет особой необходимости, но он помогает при применении полифиллов для тех браузеров, у которых это свойство не реализовано.

примечание

Как ни удивительно, но к середине 2015 года элемент datalist все еще не поддерживался естественным образом в iOS, Safari и Android 4.4 и более ранних версиях (см. сайт http://caniuse.com/).

Спецификацию по datalist можно найти по адресу http://www.w3.org/TR/html5/forms.html.

Хотя это поле ввода ничем не отличается от обычного поля, предназначенного для ввода текста, при наборе в нем данных под ним появляется окно выбора (в тех браузерах, где это свойство поддерживается) с наиболее подходящими результатами из перечня, указанного в datalist. Работа атрибута list (в браузере Firefox) показана в следующей копии экрана.

В данном примере, поскольку буква «B» присутствует во всех вариантах, перечисленных в datalist, пользователю для выбора показываются все варианты.

Но если набрать вместо этого букву «D», то будут выведены только те варианты, которые могут подойти.

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

Типы вводимой информации, определяемые в HTML5

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

email

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

type="email"

Поддерживающие это свойство браузеры будут ожидать пользовательского ввода, соответствующего синтаксису электронного адреса. В следующем примере кода объявление type="email" используется вместе с атрибутами required и placeholder:

<div>

    <label for="email">Your Email address</label>

    <input id="email" name="email" type="email"

        placeholder="[email protected]" required>

</div>

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

Кроме того, многие устройства с сенсорным экраном (например, Android, iPhone и т. д.) на основе данного типа вводимой информации изменяют экран ввода. В следующей копии экрана показано, как экран с настройкой ввода type="email" выглядит на iPad. Обратите внимание на то, что для упрощения ввода адреса электронной почты на программную клавиатуру был добавлен символ @.

number

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

type="number"

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

<div>

    <label for="yearOfCrime">Year Of Crime</label>

    <input id="yearOfCrime" name="yearOfCrime" type="number"

           min="1929" max="2015" required>

</div>

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

Существуют разные варианты реакции браузеров на оставшиеся пустыми поля для числовых значений. К примеру, Chrome и Firefox ничего не делают, пока форма не отправлена, а при попытке ее отправки выводят предупреждающее сообщение о незаполненном поле. А Safari вообще ничего не делает и позволяет отправить форму. Internet Explorer 11 просто оставляет поле пустым, как только оно теряет фокус.

Диапазоны min и max

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

type="number" min="1929" max="2015"

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

Сведения о том, что существует разная реализация диапазонов min и max в брау­зерах, вас уже вряд ли удивят. Например, Internet Explorer 11, Chrome и Firefox выдают предупреждения, а Safari не выдает.

Изменение шагов приращения

Вы можете изменить шаг приращения (степень детализации) элементов управления с прокручиваемыми числовыми значениями, воспользовавшись атрибутом step. Например, прокрутку с шагом десять единиц можно получить благодаря следу­ющему объявлению:

<input type="number" step="10">

url

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

type="url"

Нетрудно догадаться, что тип вводимых данных url предназначен для ввода значений URL-адресов. Он похож на типы вводимых данных tel и email и приводит к настройке на поведение, практически аналогичное поведению стандартного поля ввода текста. Но некоторые браузеры добавляют к предупреждающему сообщению специальную информацию, предоставляемую в случае отправки некорректных значений. В следующий пример кода включен также атрибут placeholder:

<div>

<label for="web">Your Web address</label>

<input id="web" name="web" type="url" placeholder="www.mysite.com">

</div>

На показанной далее копии экрана можно увидеть, что произойдет при некорректном заполнении поля URL-адреса и попытке отправки формы в Chrome.

Здесь так же, как и при объявлении type="email", устройства с сенсорным экраном зачастую вносят изменения в экран ввода на основе данного типа вводимых данных. На следующей копии экрана показано, как выглядит экран ввода устройства iPad при объявлении type="url".

Заметили клавишу .com? Поскольку был использован тип вводимых данных URL, такие клавиши предоставляются устройством, чтобы было проще выполнить ввод URL-адреса (если на устройствах под управлением iOS нужен сайт в домене, отличном от .com, можно нажать и удерживать клавишу до появления нескольких других популярных доменов верхнего уровня).

tel

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

type="tel"

А вот как выглядит более сложный пример:

<div>

    <label for="tel">Telephone (so we can berate you if you're wrong)</label>

    <input id="tel" name="tel" type="tel" placeholder="1-234-5 46758"

     autocomplete="off" required>

</div>

Хотя числовой формат ожидается во многих браузерах, даже самые современные и востребованные из них, такие как Internet Explorer 11, Chrome и Firefox, ведут себя так, как будто это поле ввода текста. Когда введено неверное значение, они не выдают соответствующее предупреждающее сообщение ни при потере полем фокуса, ни при отправке данных формы.

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

Обратили внимание на отсутствие букв в области клавиатуры? Это позволяет пользователям вводить значение в нужном формате намного быстрее.

Подсказка

Если используемый по умолчанию синий цвет телефонных номеров в iOS Safari при вводе данных типа tel вас раздражает, можно его изменить, воспользовавшись следующим селектором: a[href^=tel] { color: inherit; }.