Від автора: ви повинні знати про атрибут 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 немає пошуку, але він міг бути таким:
Search
В браузерах без підтримки тип search відображається у вигляді звичайного текстового поля, тому немає причин не використовувати його там, де це підходить.
Email адреси
Не дивно, але тип email (type=”email”) використовується для установки одного або декількох email адрес. Він підтримує Булев атрибут multiple, за допомогою якого через кому (з пробілом) можна вказати кілька адрес.
Давайте змінимо нашу форму, поставимо type=”email” на поля з електронною поштою:
My email address is
Якщо поміняти тип 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), щоб форма вирушила:
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 дні народження?’);
} else {
//якщо введення валідний, повинно бути false, чи буде помилка
formControl.setCustomValidity(“);
}
}
На жаль, змінити можна тільки саме повідомлення, а не його зовнішній вигляд. Принаймні, поки.
URL
Тип url (type=”url”) використовується для установки веб-адрес. Як і email, поле не відрізняється від текстового. На більшості сенсорних пристроїв клавіатура буде оптимізована під введення веб-адрес (слеш / і скорочення .com).
Оновимо нашу форму реєстрації, додамо поля типу url:
My website is located at:
Валідація 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 можна використовувати не тільки для телефонних номерів. Наприклад, ця клавіатура краще всього підходить для введення номера соціального страхування.
