Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Возможно, вы уже знакомы с атрибутом type элемента input. Это атрибут, который определяет, какая форма ввода будет представлена пользователю. Если он опущен — или в случае новых типов ввода и старых браузеров, не понятых — он все еще работает; по умолчанию ввод будет type="text" . Это ключ, который позволяет использовать формы HTML5 сегодня, даже если вы все еще поддерживаете старые браузеры. Если вы используете новый тип ввода, такой как email или search , старые браузеры просто предоставляют пользователям стандартное текстовое поле.
Наша форма регистрации в настоящее время использует четыре из десяти знакомых вам типов ввода: checkbox , text ,
password и submit . Вот полный список типов, которые были доступны до HTML5:
-
button -
checkbox -
file -
hidden -
image -
password -
radio -
reset -
submit -
text
Спецификация HTML5 дала нам еще девять типов ввода, которые обеспечивают более специфичные для данных элементы пользовательского интерфейса и собственную проверку данных:
-
search -
email -
url -
tel -
date -
time -
number -
range -
color
HTML5.1 и WHATWG HTML Living Standard включают четыре дополнительных типа ввода даты, три из которых хорошо поддерживаются в современных браузерах:
-
datetime-local -
month -
week -
datetime
(не поддерживается ни в одном браузере)
Давайте посмотрим на каждый из этих новых типов подробно, и посмотрим, как мы можем
использовать их.
Поиск
Тип ввода для search ( type="search" ) предоставляет поле поиска — элемент однострочного ввода текста для ввода одного или нескольких поисковых терминов. В спецификации говорится:
Разница между состоянием текста и состоянием поиска в основном стилистическая: на платформах, где поля поиска отличаются от обычных текстовых полей, состояние поиска может привести к тому, что внешний вид будет соответствовать полям поиска платформы, а не будет выглядеть как обычное текстовое поле.
Многие браузеры оформляют вводимые данные в соответствии с браузером или полями поиска операционной системы. В настоящее время Chrome, Safari, Opera и IE добавили возможность очищать ввод одним щелчком мыши, предоставляя значок × после ввода текста в поле, как показано на рисунке 4.5. Типы ввода даты / времени также можно очистить в Chrome и Opera, и IE11 теперь включает значок ×, чтобы очистить большинство типов ввода, включая ввод текста типа.
Рисунок 4.5. Тип ввода для поиска похож на поля поиска операционной системы
На устройствах Apple поле поиска по умолчанию имеет закругленные углы в Chrome, Safari и Opera, соответствующие внешнему виду поля поиска устройств. На сенсорных панелях с динамической клавиатурой кнопка «go» отображается в виде значка поиска или слова «search», в зависимости от устройства. Если вы включите нестандартный атрибут результатов, Chrome и Opera отобразят значок увеличительного / зеркального стекла в поле формы.
Хотя вы все еще можете использовать type="text" для полей поиска, новый тип поиска представляет собой визуальную подсказку о том, куда пользователь должен перейти для поиска по сайту, и предоставляет интерфейс, к которому пользователь привык. В HTML5 Herald нет поля поиска, но вот пример того, как его использовать:
<form id="search" method="get"> <label for="s">Search</label> <input type="search" id="s" name="s"/> <input type="submit" value="Search"/> </form>
Поскольку search, как и все новые типы ввода, отображается в виде обычного текстового поля в неподдерживающих браузерах, нет причин не использовать его в соответствующих случаях.
Адрес электронной почты
Тип email (type="email") , что неудивительно, используется для указания одного или нескольких адресов электронной почты. Он поддерживает логический multiple атрибут, позволяющий использовать несколько адресов электронной почты через запятую (с дополнительным пробелом).
Давайте изменим нашу форму, чтобы использовать type="email" для адреса электронной почты владельца регистрации:
<label for="email">My email address is</label> <input type="email" id="email" name="email"/>
Если вы измените тип ввода с text на email , как мы сделали здесь, вы не заметите видимых изменений в пользовательском интерфейсе; ввод по-прежнему выглядит как текстовое поле. Тем не менее, есть различия за кулисами.
Изменение становится очевидным, если вы используете устройство с сенсорной панелью. Когда вы сосредотачиваетесь на поле электронной почты, большинство устройств с сенсорной панелью, таких как iPad или телефон Android с Chromium, будут отображать клавиатуру, оптимизированную для ввода электронной почты, включая кнопки @, точку и пробел, но без запятой, как показано на Рисунок 4.6.
Рисунок 4.6. Тип ввода электронной почты обеспечивает пользовательскую клавиатуру на устройствах iOS
Firefox, Chrome, Opera и Internet Explorer 10 также предоставляют сообщения об ошибках для неверных входов электронной почты: если вы попытаетесь отправить форму с содержимым, не распознаваемым как один или несколько адресов электронной почты, браузер скажет вам, что не так. Сообщения об ошибках по умолчанию показаны на рисунке 4.7.
Рисунок 4.7. Сообщения об ошибках для неправильно отформатированных адресов электронной почты в Opera (слева) и Firefox (справа)
Примечание. Пользовательские сообщения проверки
Не нравится сообщения об ошибках по умолчанию, которые предоставляют браузеры? Установите свой собственный .setCustomValidity(errorMsg) . setCustomValidity принимает в качестве единственного параметра сообщение об ошибке, которое вы хотите предоставить. Если вы устанавливаете пользовательское сообщение проверки, как только это значение становится действительным, вы должны установить сообщение проверки в пустую строку (ложное значение), чтобы включить отправку формы:
function setErrorMessages(formControl) { var validityState_object = formControl.validity; if (validityState_object.valueMissing) { formControl.setCustomValidity('Please set an age ↵(required)'); } else if (validityState_object.rangeUnderflow) { formControl.setCustomValidity('You\'re too young'); } else if (validityState_object.rangeOverflow) { formControl.setCustomValidity('You\'re too old'); } else if (validityState_object.stepMismatch) { formControl.setCustomValidity('Counting half ↵birthdays?'); } else { //if valid, must set falsy value or will always error formControl.setCustomValidity(''); } }
К сожалению, хотя вы можете изменить содержание сообщения, вы застряли с его внешним видом, по крайней мере, на данный момент.
URL-адрес
Ввод url (type="url") используется для указания веб-адреса. Как и email , она будет отображаться как обычное текстовое поле. На многих сенсорных экранах отображаемая экранная клавиатура будет оптимизирована для ввода веб-адреса с косой чертой (/) и сочетанием клавиш «.com».
Давайте обновим нашу регистрационную форму, чтобы использовать тип ввода URL:
<label for="url">My website is located at:</label> <input type="url" id="url" name="url"/>
Проверка URL-адресов
Все современные браузеры, начиная с Internet Explorer 10, поддерживают тип ввода url, сообщая, что ввод недействителен, если значение не начинается с протокола. Проверяется только общий формат протокола URL, поэтому, например, q://example.xyz будет считаться действительным, даже если q:// не настоящий протокол, а .xyz не настоящий top- домен уровня. Если вы хотите, чтобы введенное значение соответствовало более конкретному формату, предоставьте информацию в ярлыке (или в качестве заполнителя), чтобы пользователи знали об этом, и используйте атрибут pattern, чтобы убедиться, что оно верное, как описано ранее.
Телефонные номера
Для телефонных номеров используйте тип ввода tel (type="tel") . В отличие от типов url и email , тип tel не поддерживает определенный синтаксис или шаблон. Буквы и цифры — в действительности любые символы, кроме новых строк или возврата каретки — действительны. Для этого есть веская причина: во всем мире страны имеют действительные номера телефонов различной длины и пунктуации, поэтому невозможно было бы указать один формат в качестве стандартного. Например, в США +1(415)555-1212 так же хорошо понимается, как 415.555.1212, но компании также могут использовать буквы в своем номере телефона, например (800) CALL-NOW.
Вы можете поощрять конкретный формат, добавив заполнитель с правильным синтаксисом или комментарий после ввода с примером. Кроме того, вы можете указать формат, используя атрибут pattern. Включите заголовок с атрибутом шаблона, чтобы обеспечить всплывающую подсказку и улучшить UX сообщения об ошибке собственной проверки. Вы также можете использовать метод setCustomValidity для обеспечения более информативной проверки на стороне клиента.
При использовании типа телефонного ввода динамические сенсорные панели обычно отображают телефонную клавиатуру, включая звездочку и клавишу «решетка». Вы можете использовать tel не только для телефонных номеров. Например, это, вероятно, будет лучшей клавиатурой для ввода номера социального страхования.