От автора: вторая часть статьи, посвященной типам тега input. Вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.
Числа
Тип number (type=”number”) предназначен для ввода чисел. Обычно это прямоугольник, в который можно вбить числа вручную или с помощью стрелок вверх/вниз.
Давайте изменим тип нашего поля с количеством на number:
|
1 2 |
<label for="quantity">I would like to receive <input type="number" min="1" name="quantity" id="quantity"> copies of <cite>The HTML5 Herald</cite></label> |
На Рисунке 4.8 показан результат в Opera.
Рисунок 4.8 поле типа number в Opera
У поля number есть атрибуты min, max и step, с помощью которых можно задать минимальное значение, максимальное и шаг увеличения. Если step не задан, используется значение по умолчанию 1. Если в значениях можно использовать числа с плавающей точкой, то шаг можно задать, например, в 0.1. Или же можно использовать ключевое слово any для любого значения. Обратите внимание, что в некоторых браузерах минимизируется ширина поля типа number, если рамки значений ограничены. Например, для min=»0″ max=»10″ step=»1″ не нужна ширина поля, как для step=”any”, в которое можно вбить все число Пи.
Предупреждение: аккуратно используйте тип number
Будут моменты, когда вы будете думать, что нужно использовать тип number, но на самом деле будет нужен другой тип. Например, можно подумать, что номер дома в адресе должен быть number. Но подумайте, захотите ли вы кликать по стрелкам до 34154? Более того, много домов с дробной и буквенной частью. Например, 24½ или 36B. Ни то ни то не работает с number.
В номерах счетов могут быть как буквы и числа, так и тире. Если вам известен шаблон номера, используйте атрибут pattern. Просто запомните, что не стоит использовать number, если диапазон чисел очень большой, или в числе есть нечисловые символы, а поле обязательно. Если поле необязательное, можно использовать number или tel для вызова клавиатуры, оптимизированной под набор номера телефона на сенсорных устройствах.
Диапазоны
Тип range (type=”range”) отображается как слайдер. Как и у поля number, здесь есть три атрибута min, max и step. Судя по спецификации, разница между number и range в том, что в последнем необязательно указывать точное число. Идеально подходит для инпутов, где не нужно точное число. Например, опрос на удовлетворенность клиентов предоставленными услугами.
Давайте добавим в нашу форму регистрации тип range. Создадим поле, в котором будем спрашивать пользователей, насколько хорошо они знают HTML5 по шкале от 1 до 10:
|
1 2 |
<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label> <input name="rating" type="range" min="1" max="10" step="1"> |
На Рисунке 4.9 показан внешний вид слайдера в Safari. В данном случае атрибут step не нужен, так как используется значение по умолчанию 1. Отрицательное значение step ломает слайдер, ползунок перестает двигаться в Firefox.
Рисунок 4.9. инпут типа range в Safari
По умолчанию в диапазоне задана середина слайдера – среднее значение между минимумом и максимумом. Атрибут list и привязанный к нему тег datalist создают небольшие выемки на слайдере, указывающие положение значений.
В спецификации сказано, что можно создать обратный слайдер (значения справа налево), если максимум будет меньше минимума. Однако браузеры пока не поддерживают такую форму слайдера. По спецификации также разрешено использовать два ползунка с включенным атрибутом multiple, что тоже не поддерживается в браузерах.
Тип range поддерживается во всех браузерах, начиная с Firefox 23, Android 4.2 и IE10. Атрибут list в range на данный момент работает только в Chrome20+, Opera и IE10+.
Цвета
Тип color (type=”color”) отображается в виде пипетки. По крайней мере, так он выглядит в BlackBerry 10, Firefox 29+, Safari 8+ для десктопа, Chrome, Opera и Android 4.4. Webkit для iOS8 и IE11 пока не поддерживают тип color. Пипетка возвращает RGB значение в нижнем регистре и шестнадцатеричной системе счисления. Например, #ff3300. По умолчанию используется значение #000000 (черный).
Если хотите использовать тип color, добавьте плейсхолдер с подсказкой, что используется формат hex RGB. Ограничьте ввод лишних символов с помощью атрибута pattern.
Мы не используем color в нашей форме, но если бы он был, это было бы так:
|
1 2 |
<label for="clr">Color: </label> <input id="clr" name="clr" type="color" placeholder="#ffffff" pattern="#(?:[0-9A-Fa-f]{6})"> |
Цветовая пипетка показана на Рисунке .10. Клик по цвету открывает цветовое колесо, где можно подобрать любое шестнадцатеричное значение. Нужны другие цвета, используйте атрибут list с привязанным тегом datalist, чтобы предложить набор цветов. На данный момент атрибут поддерживается только в Blink браузерах.
Рисунок 4.10. пипетка цветов в Chrome
Дата и время
Существуют новые типы даты и времени. Некоторые из них представлены в спецификации HTML5, другие же только в HTML Living Standard и HTML5.1. Использование последних довольно рискованное занятие. Типы date и time находятся в HTML5 W3C Recommendation, а типы datetime, datetime-local, month и week, возможно, будут удалены. Все поля даты и времени принимают дату по стандарту ISO 8601.
Доступные типы даты и времени:
date: только дата (год, месяц и день), без времени. Например, 2004-06-24.
time: время в военном формате (24 часа). Например, 22:00, а не 10.00.
month: только год и месяц. Например, 2012-12.
week: год и номер недели (от 1 до 52). Например, 2011-W01 или 2012-W52.
datetime: дата и время, разделенные через «Т», после которых идет символ «Z», представляющий собой UTC (всемирное координационное время), или символы +/-. Например, запись «2011-03-17T10:45-5:00» означает 10:45 дня 17 марта 2011 в часовом поясе по UTC -5 часов (восточноевропейское время). Это значение удалялось из спецификации, позже его вернули. В настоящее время поддержки нет.
datetime-local: как и datetime, только нет часового пояса. Главное отличие в том, что datetime-local поддерживается в браузерах, в которых работает date и time.
Чаще других используется тип date. По спецификации браузер должен отображать элемент управления датой. На момент написания статьи WebKit для iOS, Chrome 20+ и Opera показывают календарь для большинства значений. IE11, Safari на десктоп и Firefox 37 не поддерживают данный тип.
Давайте изменим поле стартовой даты подписки в нашей форме на тип date:
|
1 2 |
<label for="startdate">Please start my subscription on:</label> <input type="date" min="1904-03-17" max="1904-05-17" id="startdate" name="startdate" required aria-required="true" placeholder="1904-03-17"> |
Как показано на Рисунке 4.11, теперь в браузерах Opera, Chrome и iOS WebKit отображается календарь. К сожалению, стилизовать его нельзя.
Рисунок 4.11 календарь
Для типов month и week браузер показывает UI, похожий на date, только выбрать можно месяц или неделю. Дни выбрать нельзя. Нажатие на определенный день выбирает весь месяц или неделю. В этих браузерах поддерживается datetime-local, а datetime – нет. Datetime устарел, month, week и datetime-local под угрозой той же участи. В Chrome поддержка datetime закончилась на версии 26, в Opera на 15 версии, а Safari на iOS7. Datetime может устареть, поэтому используйте отдельные поля date и time.
Рекомендуем использовать минимумы и максимумы с типом date. Как и в number, это делается с помощью атрибутов min и max.
Атрибут placeholder, добавленный ранее к полю со стартовой датой подписки, становится ненужным в браузерах с поддержкой календаря. Однако лучше его оставить для пользователей IE, Safari и Firefox до тех пор, пока в этих браузерах не появятся свои календари. До тех пор пока все браузеры не начнут поддерживать UI новых инпутов, лучше оставить плейсхолдеры. Так вы подсказываете своим пользователям принимаемый тип даты. Не забывайте, что в браузерах без поддержки эти поля отображаются как обычные текстовые.
Совет: динамические даты
В нашем примере мы захардкодили значения min и max в HTML. Если нужно сделать так, чтобы минимумом был следующий день после текущей даты, что правильно для подписки на газету, то придется обновлять HTML каждый день. Лучше динамически генерировать минимум и максимум на стороне сервера. Небольшой PHP код:
|
1 2 3 4 5 |
<?php function daysFromNow($days){ $added = ($days * 24 * 3600) + time(); return date("Y-m-d", $added); } ?> |
Функция сверху теперь заменяет наши статические даты на динамические:
|
1 2 3 4 5 6 |
<li> <label for="startdate">Please start my subscription on: </label> <input type="date" min="<?php echo(daysFromNow(1)); ?>" max="<?php echo(daysFromNow(91)); ?>" id="startdate" name="startdate" required aria-required="true" placeholder="<?php echo(daysFromNow(1)); ?>"> </li> |
Так пользователь ограничен при вводе даты, что правильно в контексте формы.
Также можно подключить атрибут step. Например, step=»7″ на типе date ограничит пользователя выбором только одного дня в неделе: день недели зависит от min, если минимум задан, или от текущего дня, если ограничения не заданы. На типе time атрибут step должен выражаться в секундах. То есть step=»900″ на типе time делает шаг в 15 минут.
Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
