1. чисел
2. Предупреждение: используйте номер с осторожностью
3. Изменяется
4. Цвета
5. Даты и время
6. Совет: динамические даты

Ниже приводится выдержка из нашей книги, HTML5 и CSS3 для реального мира, 2-е издание Авторы: Алексис Гольдштейн, Луи Лазарис и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в виде электронной книги Вот ,

Ты можешь найти Часть 1 здесь ,

чисел

Тип номера (type = "number") обеспечивает ввод для ввода номера. Обычно это поле счетчика, в котором вы можете либо ввести число, либо щелкнуть стрелки вверх / вниз в собственном интерфейсе счетчика браузера, чтобы выбрать число.

Давайте изменим наше поле количества, чтобы использовать тип ввода числа:

<label for = "amount"> Я хотел бы получить <input type = "number" ↵min = "1" name = "amount" id = "amount"> копии <cite> HTML5 ↵ Herald </ cite> </ метка>

На рисунке 4.8 показано, как это выглядит в Opera.

Рисунок 4.8. Ввод числа видно в опере

На многих устройствах с сенсорным экраном при фокусировке на типе ввода номера появится сенсорная панель с цифрами (а не полная клавиатура).

Ввод числа имеет мин,
атрибуты max и step указывают минимальные, максимальные и инкрементные значения. Если шаг пропущен, по умолчанию используется значение 1.
Если вы хотите разрешить значения с плавающей запятой, вы должны указать шаг с плавающей запятой, например 0,1 или ключевое слово any, чтобы разрешить любое значение. Обратите внимание, что некоторые браузеры минимизируют ширину поля формы номера для ограниченных номеров. Например, min = "0" max = "10" step = "1" не обязательно должны быть такими же широкими, как step = "any", где пользователь может ввести полное значение Pi.

Предупреждение: используйте номер с осторожностью

Будут времена, когда вы думаете, что хотите использовать
число, когда на самом деле другой тип ввода
более подходящий. Например, может показаться, что
Уличный адрес должен быть числом. Но подумай об этом:
хотите нажать на спиннер до 34154? Больше
Важно отметить, что многие номера улиц имеют нечисловые значения: подумайте
24½ или 36B, ни один из которых не работает с номером
тип ввода.

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

Изменяется

Тип ввода диапазона (type = "range") отображает ползунок. Как и с типом числа, он допускает атрибуты min, max и step. Разница между числом и диапазоном, согласно спецификации, заключается в том, что точное значение числа не имеет значения для диапазона. Это идеально для входов, где вы хотите неточное число; например, опрос удовлетворенности клиентов с просьбой оценить аспекты услуг, которые они получили.

Давайте изменим нашу регистрационную форму, чтобы использовать тип ввода диапазона. Мы создадим поле, в котором пользователи будут оценивать свои знания HTML5 по шкале от 1 до 10:

<label for = "rating"> По шкале от 1 до 10 я знаю HTML5: </ label> <input name = "rating" type = "range" min = "1" max = "10" step = "1">

На рисунке 4.9 показано, как выглядит этот тип ввода в Safari. В этом случае атрибут step не является обязательным, поскольку по умолчанию он равен 1. Отрицательное значение для step нарушит диапазон, сделав большой палец неподвижным в Firefox.

Рисунок 4.9. Тип ввода диапазона в Safari

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

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

Диапазон поддерживается во всех браузерах, начиная с Firefox 23, Android 4.2 и Internet Explorer 10. В настоящее время поддержка списка типов ввода диапазона доступна только в Chrome 20+, Opera и Internet Explorer 10+.

Цвета

Тип ввода цвета (type = "color") предоставляет пользователю средство выбора цвета - или, по крайней мере, в некоторых браузерах, включая BlackBerry 10, Firefox 29+, Safari 8+ для настольных ПК, Chrome, Opera и Android 4.4. WebKit для iOS 8 и Internet Explorer 11 пока не поддерживают тип ввода цвета. Средство выбора цвета возвращает шестнадцатеричное значение цвета RGB в нижнем регистре, например # ff3300, со значением по умолчанию # 000000 (черный).

Если вы хотите использовать цветной ввод, предоставьте заполнитель текста, указывающий, что требуется шестнадцатеричный формат цвета RGB, и используйте атрибут pattern, чтобы ограничить запись только допустимыми шестнадцатеричными значениями цвета.

Мы не используем цвет в нашей форме, но если бы мы это сделали, это выглядело бы примерно так:

<label for = "clr"> Цвет: </ label> <input id = "clr" name = "clr" type = "color" placeholder = "# ffffff" ↵pattern = "# (?: [0-9A- Fa-е] {6}) ">

Получившаяся палитра цветов показана на рисунке 4.10. Нажатие кнопки «Другие…» вызывает полноцветное колесо, позволяющее пользователю выбрать любое шестнадцатеричное значение цвета. Если вам нужны другие цвета, используйте атрибут list со связанным списком данных, чтобы определить каждый цвет, который вы хотите предложить в качестве отдельных параметров. В настоящее время это поддерживается только в браузерах Blink.

Рисунок 4.10. Элемент управления Chrome для выбора цвета для типа ввода цвета

Даты и время

Существуют новые типы ввода даты и времени, некоторые из которых включены в спецификацию HTML5, а также некоторые другие, которые все еще перечислены в стандарте HTML Living Standard и проекте HTML5.1, которые могут подвергаться риску. Типы ввода даты и времени включены в Рекомендацию W5C HTML5, в то время как datetime, datetime-local, month и week могут быть отброшены. Все данные даты и времени принимают данные, отформатированные в соответствии с Стандарт ISO 8601.

Вот доступные типы ввода даты и времени:

• дата: содержит дату (год, месяц и день), но без времени; например, 2004-06-24.
• время: обозначает время суток в военном формате (24-часовой формат); например, 22:00 вместо 22:00
• месяц: включает только год и месяц; например, 2012-12.
• неделя: охватывает год и номер недели (от 1 до 52); например, 2011-W01 или 2012-W52.
• datetime: включает в себя дату и время, разделенные «T» и сопровождаемые либо «Z» для обозначения UTC (Всемирное координированное время), либо часовым поясом, указанным символом + или -; например, «2011-03-17T10: 45-5: 00» представляет собой 10:45 утра 17 марта 2011 года в часовом поясе UTC минус пять часов (восточное стандартное время). Это значение было удалено из спецификации, а затем добавлено обратно. В настоящее время оно не поддерживается.
• datetime-local: идентично datetime, за исключением того, что в нем отсутствует часовой пояс; Основное отличие состоит в том, что datetime-local поддерживается в браузерах, которые поддерживают дату и время, а datetime - нет.

Наиболее часто используемым из этих типов является дата. Спецификации требуют, чтобы браузер отображал элементы управления датой. На момент написания WebKit для iOS, Chrome 20+ и Opera предоставляют элементы управления календаря для большинства из этих значений. Internet Explorer 11, Safari для настольных компьютеров и Firefox 37 до сих пор этого не делают.

Давайте изменим поле даты начала нашей подписки, чтобы использовать тип ввода даты:

<label for = "startdate"> Пожалуйста, начните мою подписку на: </ label> <input type = "date" min = "1904-03-17" max = "1904-05-17" ↵id = "startdate" name = "startdate" требуется aria-required = "true" ↵placeholder = "1904-03-17">

Теперь у нас будет элемент управления календаря при просмотре нашей формы в Opera, Chrome или iOS WebKit, как показано на рисунке 4.11. К сожалению, в настоящее время его нельзя стилизовать с помощью CSS.

Рисунок 4.11. Элемент управления календаря

Для типов месяца и недели браузеры отображают интерфейс, аналогичный типу ввода даты, но позволяют пользователю выбирать только полные месяцы или недели. В этих случаях отдельные дни не могут быть выбраны; вместо этого нажатие на день выбирает целый месяц или неделю. Хотя datetime-local поддерживается в этих браузерах, datetime - нет. datetime устарела. месяц, неделя и
datetime-local тоже в опасности, но пока
упасть на ту же участь. Chrome потерял поддержку datetime в версии 26, Opera в версии 15 и Safari в iOS7. Вместо использования даты и времени, поскольку поддержка должна быть устаревшей, используйте дату и время как два отдельных типа ввода.

Мы рекомендуем включать минимум и максимум при использовании типа ввода даты. Как и в случае с числом и диапазоном, это делается с помощью атрибутов min и max.

Атрибут placeholder, который мы добавили в наше поле даты начала ранее, стал избыточным в браузерах, поддерживающих интерфейс datepicker, но имеет смысл оставить его на месте, чтобы направлять пользователей IE, Safari и Firefox до тех пор, пока они не реализуют элементы управления датой и временем. Пока все браузеры не поддерживают пользовательский интерфейс новых типов ввода, заполнители являются хорошим способом подсказывать пользователям, что это за данные.
ожидается в этих областях. Помните, они просто будут выглядеть как обычные текстовые поля в браузерах без поддержки.

Совет: динамические даты

В нашем примере мы жестко закодировали значения min и max в нашем HTML. Если вы хотите, чтобы минимум был днем ​​после текущей даты (что имеет смысл для даты начала подписки на газету), это потребовало бы обновления HTML каждый день. Лучший способ справиться с этим - динамически генерировать минимальные и максимальные допустимые даты на стороне сервера. Небольшой PHP может пройти долгий путь:

<? php function daysFromNow ($ days) {$ добавлен = ($ days * 24 * 3600) + time (); дата возврата («Гм», $ добавлено); }?>

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

<li> <label for = "startdate"> Пожалуйста, начните мою подписку с: ↵ </ label> <input type = "date" min = "<? php echo (daysFromNow (1));?&gt;" ↵max = " <? php echo (daysFromNow (91));?&gt; "id =" startdate "↵name =" startdate "требуется aria-required =" true "↵placeholder =" <? php echo (daysFromNow (1));?> "> </ li>

Таким образом, пользователь ограничен вводом дат, которые имеют смысл в контексте формы.

Вы также можете включить атрибут шага с этими типами ввода. Например, step = «7» для даты ограничит выбор пользователем только одного дня в неделю: конкретный день недели зависит от минимального значения, если оно присутствует, или текущего дня недели, если его нет. При вводе времени атрибут step должен быть выражен в секундах, поэтому добавление step = "900" к типу ввода времени приведет к тому, что ввод будет шаг с шагом 15 минут.

Похожие