Від автора: друга частина статті, присвяченій типами тега input. Ви повинні знати про атрибут type в полі input. Цей атрибут задає тип инпута у формі, який буде бачити користувач. Якщо пропущений атрибут, або використовується нове значення в старому браузері, тег все одно буде працювати. Буде задано тип за умовчанням type=”text”. Це основний момент, який дозволяє використовувати HTML5 форми вже сьогодні, навіть якщо ви підтримуєте старі браузери. Якщо у вас є нові типи, наприклад, email або search, то в старих браузерах відобразиться просте текстове поле.
Числа
Тип number (type=”number”) призначений для введення чисел. Зазвичай це прямокутник, який можна вбити числа вручну або за допомогою стрілок вгору/вниз.
Давайте змінимо тип нашого поля із кількістю на number:
I would like to receive copies of
The Herald HTML5
На Рисунку 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:
On a scale of 1 to 10, my knowledge of HTML5 is:
На Рисунку 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 в нашій формі, але якщо б він був, це було б так:
Color:
Колірна піпетка показана на Малюнку .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:
Please start my subscription on:
Як показано на Рисунку 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 код:
Функція зверху тепер замінює наші статичні дати на динамічні:
Так користувач обмежений при введенні дати, що правильно в контексті форми.
Також можна підключити атрибут step. Наприклад, step=”7″ на типі date обмежить користувача вибором тільки одного дня в тижні: день тижня залежить від min, якщо мінімум задано, або від поточного дня, якщо обмеження не встановлено. На типі time атрибут step повинен виражатися в секундах. Тобто step=”900″ на типі time робить крок в 15 хвилин.
