Валідація форм засобами HTML5 - Блог ITVDN
ITVDN: курси програмування
Відеокурси з
програмування

    Обери свою IT спеціальність

    Почати безкоштовно

    Обери свою IT спеціальність

    Почати безкоштовно

      Валідація форм засобами HTML5

      advertisement advertisement

      Введення 

      Використовуючи форми в HTML5, Ви часто використовуєте методи перевірки (валідації) даних, адже їх ігнорування може призвести: до втрат користувачів, до сміття в базі даних або до взлому сайту. Історично склалося, що створення форм із гарною валідацією – складне завдання.

      В HTML5 є інструменти оброблення даних для форм, з їх допомогою можна проводити валідацію, що включає в себе спеціальні атрибути і нові типи вхідних даних. Давайте розберемо їх детальніше.

      1. Спеціалізовані типи вхідних даних

      HTML5 містить кілька нових типів введення. Вони використовуються для створення поля введення, що приймає тільки певні типи даних.

      Нові типи вхідних даних виглядають наступним чином:

      • color
      • date
      • datetime
      • datetime-local
      • email
      • month
      • number
      • range
      • search
      • tel
      • time
      • url
      • week

      Приклад:

      <input type="email"/>

      Якщо браузер не підтримує даний тип введення, поле поводитиметься як звичайне поле введення тексту.

      2. Обов’язкові поля для заповнення 

      Просто додавши атрибут "required"до <input>, <select> або <textarea>, Ви кажете браузеру, що значення має бути заповнене.

      <input type="checkbox" name="terms" required >

      3. Ліміти

      Ми можемо встановити деякі обмеження та ліміти, наприклад, максимальні та мінімальні значення для числових полів. Щоб обмежити довжину поля введення, треба використовувати атрибут "maxlength".

      <input type="text" name="name" required  maxlength="15">

      Поле <input type="number" /> використовує атрибути "max" та "min", щоб створити діапазон можливо-допустимих значень (у прикладі мінімально допустимий вік – 18).

      <input type="number" name="age" min="18" required>

      4. Стилізування

      CSS3 псевдо-класи дозволяють прикрасити форму незалежно від її стану. Це:

      • :valid
      • :invalid
      • :required
      • :optional
      • :in-range
      • :out-of-range
      • :read-only
      • :read-write

      У прикладі ми об'єднали селектори "valid" та "invalid" із псевдо-класом "focus" для зафарбовування поля форми в червоний або зелений, залежно від того, що робить користувач: вибирає або друкує.

      input:focus:invalid,
      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” після того, як він береться в якості шаблону, Ви не отримаєте спливаючу підказку.

       <input type="text" name="name" title="Будь ласка, введіть ім’я користувача.">

      6. Шаблони

      Атрибут "pattern" дозволяє розробникам задавати регулярний вираз, який браузер порівнює з даними введення, перш ніж відправити форму заявки.

      Ось як це можна використати:

      <input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">

      З функцією фільтрування вхідних даних ми можемо приймати тільки повну e-mail адресу.

      Джерело: http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/

      КОМЕНТАРІ ТА ОБГОВОРЕННЯ
      advertisement advertisement

      Пакети підписки з доступом до всіх курсів та сервісів

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      49.99 $
      37.50 $
      Підписка
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      63.00 $
      Підписка
      Преміум
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      169.99 $
      102.00 $
      Підписка
      new
      Преміум Plus
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      199.99 $
      120.00 $
      Підписка
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.