[overcod].net / HTML / HTML з нуля: Як перевірити HTML-форму. Урок №19
166 12.12.2025

HTML з нуля: Як перевірити HTML-форму. Урок №19


При створенні форми важливо не лише правильно розмістити поля, а й упевнитися, що користувач вводить коректні дані. HTML має безліч вбудованих інструментів перевірки — без JavaScript.

У цьому уроці розглянемо основні способи перевірки HTML-форми.

1. Обов’язкові поля — атрибут required

Забороняє відправку порожніх полів.

<input type="text" required>

2. Перевірка Email — type="email"

Перевіряє, щоб текст був схожий на email.

<input type="email" required>

3. Перевірка чисел — type="number", min, max





Обмеження діапазону для цифр.

<input type="number" min="1" max="100">

4. Довжина тексту — minlength, maxlength

<input type="text" minlength="3" maxlength="20">

5. Перевірка URL — type="url"

Поля перевіряють, чи схожий введений текст на посилання.

<input type="url" required>

6. Перевірка дати — type="date" + min / max

<input type="date" min="2024-01-01" max="2025-01-01">

7. Вимкнення перевірки — novalidate, formnovalidate

Вимкнення перевірки для форми:

<form novalidate>

Вимкнення перевірки для кнопки:

<button formnovalidate>Без перевірки</button>

8. Перевірка за шаблоном — атрибут pattern

pattern дозволяє задати власний формат перевірки через регулярні вирази.

<input type="text" pattern="\d{10}" placeholder="10 цифр">

Таблиця регулярних виразів для pattern

Призначення Вираз Приклад Опис
Лише цифри [0-9]+ 12345 Будь-яка кількість цифр
Рівно 10 цифр \d{10} 0671234567 Номер без коду країни
Міжнародний телефон \+\d{11,14} +380671234567 Плюс + 11–14 цифр
Лише англійські букви [A-Za-z]+ Hello Без пробілів
Лише літери будь-якої мови \p{L}+ Привіт Підтримка залежить від браузера
Літери + пробіли [A-Za-z ]+ John Doe Дозволено пробіли
Email (спрощений) [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4} test@mail.com Базова перевірка
Пароль: букви + цифри (?=.*[0-9])(?=.*[A-Za-z]).{6,} Abc123 Мінімум 6 символів
Лише кирилиця [А-Яа-яЁёЇїІіЄєҐґ]+ Приклад Тільки кириличні символи
Авто номер (UA) [A-Z]{2}\d{4}[A-Z]{2} AA1234BB Формат номерного знаку

Підсумок

Ми розглянули:

  • required

  • type="email", type="url", type="number"

  • min, max, minlength, maxlength

  • novalidate, formnovalidate

  • pattern — власна перевірка через регулярні вирази

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Останні записи у цій категорії

Популярні записи