От автора: вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.
В нашей форме регистрации используется 4 из 10 типов, которые вы все знаете: checkbox, text, password и submit. Ниже приведен полный список доступных в HTML5 типов поля input:
button
checkbox
file
hidden
image
password
radio
reset
submit
text
В спецификации HTML5 говорится про еще 9 дополнительных типов, с помощью которых можно создавать специфичные UI-элементы, а также проводить нативную валидацию данных:
search
url
tel
date
time
number
range
color
В HTML5.1 и WHATWG HTML Living Standard включены еще четыре типа, связанных с датой, три из которых довольно хорошо поддерживаются в современных браузерах:
datetime-local
month
week
datetime (не поддерживается ни в одном браузере)
Давайте детально разберем каждый новый тип, а также посмотрим, как их можно использовать.
Search
Тип инпута search (type=”search”) – это поисковое поле, однострочный инпут для ввода одной или более поисковых фраз. Из спецификации:
«Разница между текстовым типом и типом поиска чисто стилистическая: на платформах, где поля поиска отличаются от обычных текстовых полей, поисковой тип приведет input в соответствие со стилями платформы.»
Множество браузеров стилизуют поисковые поля под манер браузерных или поисковых блоков операционной системы. Chrome, Safari, Opera и IE добавили функцию удаления текста по клику на иконку «х», которая появляется, как только начинается ввод текста (см. на Рисунке 4.5). В Chrome и Opera также очищаются поля даты/времени, а IE11 добавляет иконку «х» почти ко всем типам, в том числе и к текстовым.
Рисунок 4.5. поле типа search стилизовано под поисковые поля операционной системы
На устройствах кампании Apple поисковые поля имеют скругленные углы по умолчанию в Chrome, Safari и Opera, что дублирует внешний вид поисковых полей в самой операционной системе. На планшетах с динамической клавиатурой кнопка «Перейти» отображается в виде иконки поиска или слова «искать». Все зависит от устройства. Если добавить нестандартный атрибут, то в Chrome и Opera появится иконка лупы.
Можно по-старому использовать type=”text”, однако новый тип search – это визуальная подсказка пользователям, куда им нужно нажать, чтобы найти сайт. Кроме того, новый тип очень похож на стандартные поля поиска, к которым привыкли пользователи. На сайте The HTML5 Herald нет поиска, но он мог быть таким:
|
1 2 3 4 5 |
<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 адреса
Не удивительно, но тип email (type=”email”) используется для установки одного или нескольких email адресов. Он поддерживает Булев атрибут multiple, с помощью которого через запятую (с пробелом) можно указать несколько адресов.
Давайте изменим нашу форму, поставим type=”email” на поля с электронной почтой:
|
1 2 |
<label for="email">My email address is</label> <input type="email" id="email" name="email"/> |
Если поменять тип с text на email, не произойдет никаких визуальных изменений. Input все так же выглядит, как обычное текстовое поле. Однако они отличаются.
Изменения можно посмотреть на сенсорном устройстве. Когда поле email получает фокус, на большинстве сенсорных устройств (например, iPad или Android телефон с Chromium) отобразится клавиатура, оптимизированная для ввода адреса электронной почты. На клавиатуре появится символ @, точка, пробел, но не будет запятой, как показано на Рисунке 4.6.
Рисунок 4.6. поле типа email с пользовательской клавиатурой на устройстве под управлением iOS
В браузерах Firefox, Chrome, Opera и Internet Explorer 10 при неправильном вводе почты выскакивает сообщение об ошибке. Это происходит, когда вы пытаетесь отправить форму с текстом, который не распознался как один или несколько адресов. Стандартное сообщение об ошибке показано на Рисунке 4.7.
Рисунок 4.7. сообщение об ошибке о неправильном вводе адреса электронной почты в браузере Opera (слева) и Firefox (справа)
Заметка: пользовательские сообщения о проверке
Не нравится стандартное сообщение об ошибке в браузере? Установите свое с помощью .setCustomValidity(errorMsg). SetCustomValidity принимает лишь один параметр – сообщение об ошибке. Если установлено свое сообщение о проверке, то после правильного ввода необходимо очистить строку с сообщением (значение false), чтобы форма отправилась:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 { //если ввод валидный, должно быть false, или будет ошибка formControl.setCustomValidity(''); } } |
К сожалению, изменить можно только само сообщение, а не его внешний вид. По крайней мере, пока.
URL
Тип url (type=”url”) используется для установки веб-адресов. Как и email, поле не отличается от текстового. На большинстве сенсорных устройств клавиатура будет оптимизирована под ввод веб-адресов (будет слэш / и сокращение .com).
Обновим нашу форму регистрации, добавим поля типа url:
|
1 2 |
<label for="url">My website is located at:</label> <input type="url" id="url" name="url"/> |
Валидация URL
С IE10 все современные браузеры поддерживают тип url и не пропускают значение, если оно началось не с протокола. Подходит только общий формат протокола URL, поэтому, например, запись q://example.xyz будет валидна, несмотря на то, что q:// не является реальным протоколом, а .xyz не домен верхнего уровня. Если необходимо, чтобы вводимое значение соответствовало какому-то более конкретному формату, добавьте эту информацию в лейбл (или плейсхолдер). Используйте атрибут pattern для проверки.
Телефонные номера
Для телефонных номеров используйте тип tel (type=”tel”). В отличие от url и email тип tel не использует четкий синтаксис или шаблон. Буквы и цифры, валидны любые символы кроме символа новой строки и возврата каретки. Такой подход был выбран не просто так: по всему мир в разных странах телефонные номера имеют разную длину и пунктуацию, просто невозможно определить единый стандарт. Например, в США +1(415)555-1212 то же самое, что 415.555.1212. Однако кампании могут использовать буквы в телефонных номерах, например, (800)CALL-NOW.
Можно установить определенный формат, добавив правильный синтаксис в плейсхолдер или после поля. Также формат можно прописать в атрибуте pattern. Добавьте заголовок с атрибутом pattern, так появится всплывающая подсказка. Это улучшает UX нативного сообщения об ошибке.
При использовании типа tel сенсорные устройства обычно отображают телефонную клавиатуру со звездочкой и решеткой. Тип tel можно использовать не только для телефонных номеров. Например, эта клавиатура лучше всего подходит для ввода номера социального страхования.
Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
