Введення
Використовуючи форми в HTML5, Ви часто використовуєте методи перевірки (валідації) даних, адже їх ігнорування може призвести: до втрат користувачів, до сміття в базі даних або до взлому сайту. Історично склалося, що створення форм із гарною валідацією – складне завдання.
В HTML5 є інструменти оброблення даних для форм, з їх допомогою можна проводити валідацію, що включає в себе спеціальні атрибути і нові типи вхідних даних. Давайте розберемо їх детальніше.
1. Спеціалізовані типи вхідних даних
HTML5 містить кілька нових типів введення. Вони використовуються для створення поля введення, що приймає тільки певні типи даних.
Нові типи вхідних даних виглядають наступним чином:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Приклад:
Якщо браузер не підтримує даний тип введення, поле поводитиметься як звичайне поле введення тексту.
2. Обов’язкові поля для заповнення
Просто додавши атрибут "required"до <input>, <select> або <textarea>, Ви кажете браузеру, що значення має бути заповнене.
<input type="checkbox" name="terms" required >
3. Ліміти
Ми можемо встановити деякі обмеження та ліміти, наприклад, максимальні та мінімальні значення для числових полів. Щоб обмежити довжину поля введення, треба використовувати атрибут "maxlength".
Поле <input type="number" /> використовує атрибути "max" та "min", щоб створити діапазон можливо-допустимих значень (у прикладі мінімально допустимий вік – 18).
4. Стилізування
CSS3 псевдо-класи дозволяють прикрасити форму незалежно від її стану. Це:
- :valid
- :invalid
- :required
- :optional
- :in-range
- :out-of-range
- :read-only
- :read-write
Відео курси за схожою тематикою:
У прикладі ми об'єднали селектори "valid" та "invalid" із псевдо-класом "focus" для зафарбовування поля форми в червоний або зелений, залежно від того, що робить користувач: вибирає або друкує.
textarea:focus:invalid{
border:solid 2px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border:solid 2px #18E109;
background-color:#fff;
}
5. Підказки
Ви помічали спливаюче вікно з підказкою під час відправлення неправильно заповненої форми? Встановивши атрибут "title" для поля введення, можна додати підказки, що вказують на помилки при порушенні тих чи інших правил валідації.
Зверніть увагу, що різні браузери відображають підказки по-різному. У браузері Chrome значення назви атрибуту буде відображатися дрібним шрифтом, під основним повідомленням про помилку. У Firefox інша проблема: використовуючи атрибут “pattern” після того, як він береться в якості шаблону, Ви не отримаєте спливаючу підказку.
6. Шаблони
Атрибут "pattern" дозволяє розробникам задавати регулярний вираз, який браузер порівнює з даними введення, перш ніж відправити форму заявки.
Безкоштовні вебінари за схожою тематикою:
Ось як це можна використати:
З функцією фільтрування вхідних даних ми можемо приймати тільки повну e-mail адресу.
Джерело: http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/
Статті за схожою тематикою
