Від автора: вітаю вас, дорогі читачі, на нашому блозі про сайтобудуванні. Продовжую тему специфікації htm5, сьогодні я пропоную поговорити про форми і про те, які нові можливості з’явилися в цьому відношенні. На жаль, на даний момент все ще не всі браузери підтримують ці можливості, однак html5 форми все одно починають використовувати.
Нововведення
В html5 з’явилося так багато можливостей для розширення функціональності форм, що їм варто було б присвятити окремий розділ у книзі, а не статтю. Сьогодні ж ми розглянемо лише деякі нові можливості.
Нові поля введення
З’явилося дуже багато нових типів полів. Всі вони задаються за допомогою елемента input з різним type. Деякі з них:
Type = “email” – з вигляду це звичайне текстове поле, але насправді в нього вбудована автоматична валідація. Якщо браузер не знаходить знак @, який є основним атрибутом будь-якого email-адреси, то він просто не пропускає таку форму відправлення. Давайте перевіримо це в останній версії Chrome, де все це відмінно підтримується.
Створили найпростішу форму. Відкрийте такий код в браузері і ви побачите два абсолютно однакових елемента вводу і кнопку відправки. Що ж, а ну-ка спробуйте ввести у друге поле щось навмання і відправити форму. Нічого не вийде, браузер показує, що в ньому обов’язково повинен бути присутній значок @.
Ось так от, і відтепер ніякої валідації з допомогою javascript не потрібно. Це відноситься до тих браузерів, які підтримують html5 в належній мірі.
Type = “tel” – для введення номера телефону. Загалом-то, в ньому немає такої валідації, але цікаво, що якщо заповнювати таку форму з мобільних пристроїв, то при натисканні на неї може зміниться розкладка клавіатури будуть показуватися цифри). Те ж саме відбувається і у випадку з type = email.
Type = “color” – сюди нічого вводити не потрібно. Цікавить нас з тієї причини, що тут можна вибрати колір, причому зробити це в інтуїтивно зрозумілій панелі, такий, як у paint. Ось так це виглядає:
Це, звичайно, не є обов’язковим атрибутом будь-якої форми, але вже сьогодні є багато ідей щодо використання цього елемента.
Звичайно, там, де вона не підтримується, буде виведено звичайне поле для тексту. В таких браузерах немає сенсу виводити його, не буде ж користувач вручну писати, який він вибирає колір (а може і буде).
Type = date. Поле для вибору календарної дати. Якщо воно підтримується браузером, то з’являються дуже зручні інструменти, в яких ви можете визначити дату, а при кліці на трикутничок навіть розгортається календар.
Власне, є такі ж поля datetime та datetime-local. Вони призначені для того, щоб визначати в них час і час з зазначенням явного часового поясу, відповідно).
Підтримка браузерами
Насправді я б міг перерахувати тут ще багато таких полів, їх дійсно з’явилося багато, але потрібно сказати і про інший важливий чинник – підтримки всього цього добра в браузерах.
В цьому плані Google Chrome і Opera подають всім приклад, тому що підтримують абсолютно всі нові значення. На жаль, від них серйозно відстають Opera і IE. В Explorer тільки з десятої версії підтримуються пару нових полів.
Вибір обов’язкових полів
Мабуть, одна з головних можливостей для валідації форми ще на стороні користувача. Щоб позначити як поле обов’язкове для заповнення, йому потрібно дописати порожній атрибут required.
В html5 обов’язкові поля форми досить зазначити цим атрибутом, ніяких скриптів застосовувати не потрібно. Якщо б це підтримувалося у всіх браузерах, то було б взагалі чудово.
Тепер, якщо не виберемо дату і спробуємо відправити нашу форму, браузер попередить, що для початку потрібно заповнити поле з датою, тому що воно є обов’язковим.
Підказка
Раніше, якщо якийсь текст потрібно було помістити в поле вводу за промовчанням, його вписували туди з допомогою атрибута value. Ми теж зараз так зробили. Але є одна проблема – цей текст користувачеві доведеться самостійно прати, якщо він хоче написати щось інше, а це не дуже зручно.
Якщо замість value написати атрибут placeholder, то текст буде сам зникати, коли користувач почне вводити своє значення. Це більш зручно.
Список можливих значень
З допомогою тега datalist можна вказати список можливих значень для текстового поля. Це реалізовується так:
Щоб прив’язати полі аркуша достатньо в ньому записати атрибут list, значенням якого буде ім’я ідентифікатора. Природно, потрібно не забути поставити сам ідентифікатор.
Перевіряємо всі в роботі. Тепер володарі цих імен є щасливчиками – їм не доведеться вручну писати своє ім’я)))
Також просто здійснити в html5 валідацію форми. Для цього є атрибут pattern, який можна додати до будь-якого поля введення тексту на сторінці. Він визначає, які символи допустимо вводити в поле і якщо щось порушено, не пропускає її відправлення.
Описувати зараз всі значення атрибута pattern дуже довго. Ви можете самі подивитися їх у довіднику.
Крім цього, з’явилося багато дрібних можливостей при роботі з формами. Наприклад, вказавши одному полю порожній атрибут autofocus, можна домогтися того, що при завантаженні сторінки, курсор автоматично опиниться в ньому без необхідності натискати туди.
Атрибути max і min дозволяє визначити максимальне та мінімальне числове значення, яке допускається визначати у відповідному для цього полі. Ось таких можливостей по дрібниці дуже багато, і придумані вони в основному для роботи з цими самими новими елементами.
Підсумок
Відповідно, коли все це буде краще підтримуватися (хоча і зараз вже непогано), можна буде говорити про те, що HTML5 здійснив революцію в роботі з формами. За додатковою інформацією відправляю вас в преміум-курс з HTML5, а на цьому, мабуть, закінчу статтю. Сподіваюся, ви змогли для себе побачити нові можливості мови розмітки по роботі з формами.
