Пошук уроків, статей та іншого контенту
Застосовуйте вбудовану HTML-валідацію: required, min, max, pattern, minlength і maxlength.
Валідація форми — це перевірка введених даних перед їх надсиланням. HTML має вбудований механізм валідації, тому для базових правил не завжди потрібен JavaScript.
Браузер може перевірити:
чи заповнене обов’язкове поле;
чи належить число дозволеному діапазону;
чи має текст потрібну довжину;
чи відповідає значення регулярному виразу;
чи правильний тип даних введено в поле.
Якщо поле не проходить перевірку, браузер:
не надсилає форму;
позначає поле як невалідне;
показує стандартне повідомлення про помилку.
requiredАтрибут required робить поле обов’язковим для заповнення.
<form>
<label for="name">Ім’я</label>
<input id="name" name="name" type="text" required>
<button type="submit">Надіслати</button>
</form>Якщо користувач натисне кнопку, не заповнивши поле, форма не буде надіслана.
required можна застосовувати до різних елементів:
<input type="text" required>
<input type="email" required>
<input type="checkbox" required>
<select required>
<option value="">Оберіть країну</option>
<option value="ua">Україна</option>
<option value="pl">Польща</option>
</select>Для select важливо, щоб початковий варіант мав порожнє значення:
<option value="">Оберіть країну</option>Якщо в нього не буде value="", браузер може вважати цей варіант вибраним коректним значенням.
min і maxАтрибути min і max задають мінімальне та максимальне допустиме значення. Найчастіше вони використовуються з полями типу number, range, date та подібними.
<label for="age">Вік</label>
<input id="age" name="age" type="number" min="18" max="120" required>У цьому прикладі браузер відхилить:
порожнє значення через required;
число менше за 18;
число більше за 120.
min і max не обмежують введення під час набору. Користувач може ввести заборонене число, але форма не пройде валідацію під час надсилання.
Ці атрибути також працюють із датами:
<label for="start-date">Дата початку</label>
<input
id="start-date"
name="start-date"
type="date"
min="2026-01-01"
max="2026-12-31"
required
>Для поля з типом date значення min і max повинні мати формат YYYY-MM-DD.
minlength і maxlengthminlength задає мінімальну кількість символів, а maxlength — максимальну.
<label for="username">Ім’я користувача</label>
<input
id="username"
name="username"
type="text"
minlength="3"
maxlength="20"
required
>У цьому прикладі ім’я користувача повинно містити від 3 до 20 символів.
Ці атрибути застосовують переважно до:
input текстових типів;
textarea.
<label for="description">Опис</label>
<textarea
id="description"
name="description"
minlength="20"
maxlength="500"
required
></textarea>maxlength також зазвичай не дозволяє ввести більше символів у поле через інтерфейс браузера. Проте перевірка все одно залишається важливою, адже дані можуть надходити не лише від звичайного введення користувача.
patternАтрибут pattern задає регулярний вираз, якому повинно відповідати значення поля.
Наприклад, поле для імені користувача може дозволяти лише латинські літери, цифри та символ підкреслення:
<label for="username">Ім’я користувача</label>
<input
id="username"
name="username"
type="text"
pattern="[A-Za-z0-9_]+"
required
>Це поле прийме такі значення:
anna;
user_123;
Frontend2026.
А такі значення не пройдуть перевірку:
anna smith;
user-name;
користувач.
pattern перевіряє все значення поля, а не лише його частину. Тому вираз [A-Za-z0-9_]+ означає: усі символи значення повинні належати до дозволеного набору, а + вимагає щонайменше один символ.
<label for="postal-code">Поштовий індекс</label>
<input
id="postal-code"
name="postal-code"
type="text"
inputmode="numeric"
pattern="[0-9]{5}"
title="Введіть рівно 5 цифр"
required
>Тут:
[0-9] означає одну цифру;
{5} означає рівно п’ять повторень;
inputmode="numeric" підказує мобільній клавіатурі показати цифрову розкладку;
title може бути використаний браузером як додатковий опис правила.
pattern перевіряє лише непорожні значення. Якщо поле має бути обов’язковим, потрібно додати required.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Реєстрація на курс</title>
<style>
:root {
font-family: system-ui, sans-serif;
color: #1f2937;
background: #f3f4f6;
}
body {
max-width: 42rem;
margin: 2rem auto;
padding: 0 1rem;
}
form {
display: grid;
gap: 1rem;
padding: 1.5rem;
background: white;
border-radius: 0.75rem;
}
label {
display: grid;
gap: 0.35rem;
font-weight: 600;
}
input,
select,
textarea,
button {
box-sizing: border-box;
width: 100%;
padding: 0.7rem;
font: inherit;
}
textarea {
min-height: 8rem;
resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
outline: 3px solid #bfdbfe;
}
input:not(:placeholder-shown):invalid,
textarea:not(:placeholder-shown):invalid,
select:invalid {
border: 2px solid #dc2626;
}
input:valid,
textarea:valid,
select:valid {
border: 2px solid #16a34a;
}
button {
cursor: pointer;
color: white;
background: #2563eb;
border: 0;
border-radius: 0.4rem;
}
</style>
</head>
<body>
<h1>Реєстрація на курс</h1>
<form action="/registration" method="post">
<label for="name">
Ім’я
<input
id="name"
name="name"
type="text"
minlength="2"
maxlength="40"
required
>
</label>
<label for="email">
Електронна пошта
<input
id="email"
name="email"
type="email"
required
>
</label>
<label for="age">
Вік
<input
id="age"
name="age"
type="number"
min="18"
max="100"
required
>
</label>
<label for="username">
Ім’я користувача
<input
id="username"
name="username"
type="text"
minlength="3"
maxlength="20"
pattern="[A-Za-z0-9_]+"
title="Використовуйте лише латинські літери, цифри та символ підкреслення"
required
>
</label>
<label for="course">
Курс
<select id="course" name="course" required>
<option value="">Оберіть курс</option>
<option value="html-css">HTML і CSS</option>
<option value="javascript">JavaScript</option>
</select>
</label>
<label for="about">
Коротко про ваш досвід
<textarea
id="about"
name="about"
minlength="20"
maxlength="300"
placeholder="Розкажіть про свій досвід"
required
></textarea>
</label>
<label>
<span>
<input type="checkbox" name="terms" required>
Я погоджуюся з умовами навчання
</span>
</label>
<button type="submit">Зареєструватися</button>
</form>
</body>
</html>У цьому прикладі використано всі основні атрибути:
required — обов’язкові поля;
min і max — допустимий діапазон віку;
minlength і maxlength — довжина тексту;
pattern — формат імені користувача.
Псевдокласи CSS :valid і :invalid дають змогу змінювати оформлення поля залежно від результату перевірки.
Атрибути можуть працювати разом.
<input
type="text"
name="code"
minlength="6"
maxlength="6"
pattern="[A-Z0-9]+"
required
>Це поле повинно:
бути заповненим;
містити рівно 6 символів;
містити лише великі латинські літери та цифри.
Коректні значення:
AB12CD;
2026JS;
HTML99.
Некоректні значення:
AB12 — замало символів;
AB12CDE — забагато символів;
ab12cd — використано малі літери;
AB-123 — містить недозволений символ.
Атрибут type може додати власну перевірку формату.
<input type="email" name="email" required>Поле з type="email" перевіряє, чи схоже значення на адресу електронної пошти.
<input type="url" name="website">Поле з type="url" перевіряє формат URL.
<input type="number" name="quantity" min="1" max="10">Поле з type="number" очікує числове значення, а min і max обмежують його діапазон.
Не потрібно замінювати стандартний тип email власним pattern, якщо достатньо базової перевірки формату електронної пошти. Надто строгий регулярний вираз може помилково відхилити коректні адреси.
Зазвичай браузер перевіряє форму під час її надсилання:
<form>
<input name="email" type="email" required>
<button type="submit">Надіслати</button>
</form>Якщо значення неправильне, подія надсилання не відбувається.
Перевірку можна викликати також під час взаємодії з полем. Браузер застосовує відповідні псевдокласи, наприклад :valid і :invalid, коли оцінює стан елемента.
Не варто одразу показувати червону помилку для всіх порожніх полів після завантаження сторінки. Користувач ще не почав працювати з формою, тому такий інтерфейс може бути незручним.
Вбудована HTML-валідація корисна для швидкої перевірки даних у браузері, але вона не замінює перевірку на сервері.
Причини:
користувач може змінити HTML у браузері;
клієнт може надіслати запит без використання вашої форми;
атрибути валідації можуть бути вимкнені або обійдені;
формат даних потрібно перевіряти перед збереженням і використанням на сервері.
Тому правильний підхід такий:
HTML перевіряє дані для зручності користувача.
Сервер повторно перевіряє всі отримані значення.
Дані не вважаються безпечними лише тому, що вони пройшли перевірку в браузері.
min замість minlengthmin обмежує числове або датоване значення:
<input type="number" min="18">minlength обмежує кількість символів:
<input type="text" minlength="3">pattern зробить поле обов’язковимpattern не замінює required:
<input type="text" pattern="[A-Z]+">Порожнє поле може залишатися допустимим, якщо не додати required.
Правильний варіант:
<input type="text" pattern="[A-Z]+" required>maxlength для чиселmaxlength призначений для довжини тексту, а не для числового діапазону.
Неправильно:
<input type="number" maxlength="2">Для числових значень потрібно використовувати:
<input type="number" min="1" max="99">nameЗначення поля передається під час надсилання форми лише тоді, коли елемент має атрибут name.
<input id="email" type="email" required>Таке поле перевірятиметься, але його значення не матиме ключа в даних форми.
Правильно:
<input id="email" name="email" type="email" required>patternРегулярний вираз може відхилити значення, які насправді є прийнятними. Обмежуйте формат лише тими правилами, які справді потрібні продукту.
Створіть форму для бронювання консультації. Вона повинна містити:
обов’язкове ім’я довжиною від 2 до 50 символів;
обов’язкову електронну пошту;
кількість учасників від 1 до 10;
код зустрічі з рівно 6 великих латинських літер і цифр;
опис запиту довжиною від 20 до 500 символів;
обов’язковий вибір формату консультації.
Для кожного поля використайте відповідні атрибути HTML-валідації без JavaScript.
required вимагає заповнити поле.
min задає мінімальне числове або датоване значення.
max задає максимальне числове або датоване значення.
minlength задає мінімальну довжину тексту.
maxlength задає максимальну довжину тексту.
pattern перевіряє значення за регулярним виразом.
Типи email, url, number та інші також виконують базову перевірку.
Атрибути можна комбінувати для складніших правил.
:valid і :invalid допомагають стилізувати стан полів.
HTML-валідація покращує взаємодію з формою, але серверна перевірка все одно є обов’язковою.