HTML форми та вбудована валідація

HTML Форми

<form> є основним HTML елементом для збирання вводу користувача. Він групує елементи форми та обробляє відправку даних на сервер.

Основна структура форми

html

<form action="/api/register" method="POST">
  <label for="name">Ім'я:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Електронна пошта:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" minlength="8" required>
  
  <button type="submit">Зареєструватися</button>
</form>

Елементи форми

Елемент	Опис
`<input>`	Текст, електронна пошта, пароль, чекбокс, радіо тощо.
`<textarea>`	Багаторядковий текстовий ввід
`<select>`	Випадне меню
`<button>`	Кнопка для відправки, скидання або загальна кнопка
`<fieldset>`	Групує пов'язані елементи
`<legend>`	Заголовок для `<fieldset>`
`<label>`	Асоціює текст з елементом форми
`<output>`	Результат обчислення
`<datalist>`	Попередньо визначені опції для `<input>`

Вбудована валідація

HTML5 забезпечує нативну валідацію форм без JavaScript:

Атрибути валідації

html

<input type="text" required>                    <!-- Має бути заповнено -->
<input type="email">                            <!-- Має бути дійсна електронна пошта -->
<input type="url">                              <!-- Має бути дійсна URL-адреса -->
<input type="number" min="1" max="100">         <!-- Діапазон чисел -->
<input type="text" minlength="3" maxlength="50"> <!-- Діапазон довжини -->
<input type="text" pattern="[A-Za-z]{3,}">       <!-- Шаблон Regex -->

Атрибут pattern

html

<!-- Номер телефону -->
<input type="tel" pattern="\+?[0-9]{10,13}" title="Введіть дійсний номер телефону">

<!-- Ім'я користувача (алфавітно-цифрові, 3-16 символів) -->
<input type="text" pattern="[a-zA-Z0-9]{3,16}" title="3-16 алфавітно-цифрових символів">

CSS Псевдокласи для валідації

css

/* Дійсний ввід */
input:valid {
  border-color: green;
}

/* Недійсний ввід */
input:invalid {
  border-color: red;
}

/* Обов'язкове порожнє поле */
input:required:placeholder-shown {
  border-color: orange;
}

/* Необов'язкове поле */
input:optional {
  border-color: gray;
}

Користувацькі повідомлення про валідацію

html

<input type="email" id="email" required
  oninvalid="this.setCustomValidity('Будь ласка, введіть дійсну електронну адресу')"
  oninput="this.setCustomValidity('')"
>

JavaScript API для валідації

javascript

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  const email = form.querySelector('#email');
  
  if (!email.checkValidity()) {
    e.preventDefault();
    email.setCustomValidity('Будь ласка, надайте дійсну електронну пошту');
    email.reportValidity();
  }
});

Вимкнення вбудованої валідації

html

<!-- Вимкнути для всієї форми -->
<form novalidate>
  <input type="email" required>
  <button type="submit">Відправити</button>
</form>

<!-- Вимкнути для конкретної кнопки -->
<button type="submit" formnovalidate>Зберегти чернетку</button>

Це зазвичай роблять при використанні бібліотек валідації JavaScript (наприклад, React Hook Form, Formik).

Важливо:

Завжди поєднуйте валідацію на стороні клієнта з валідацією на стороні сервера. Валідацію на стороні клієнта можна обійти. Використовуйте елементи <label>, асоційовані з кожним ввідом для доступності, і розгляньте novalidate при використанні бібліотек форм JavaScript.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань