[overcod].net / HTML / HTML с нуля: Как проверить HTML-форму. Урок №19
91 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 позволяет задать свой формат проверки с помощью регулярных выражений.

Например, телефон из 10 цифр:

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

Если текст не совпадает с шаблоном — браузер покажет ошибку.

Таблица регулярных выражений для pattern

Назначение Регулярное выражение Пример Описание
Только цифры [0-9]+ 12345 Любое количество цифр
Ровно 10 цифр \d{10} 0671234567 Украинский номер без кода страны
Международный телефон +XXX… \+\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 Простая проверка email
Пароль минимум 6 символов, буквы + цифры (?=.*[0-9])(?=.*[A-Za-z]).{6,} Abc123 Хотя бы одна буква и цифра
Только кириллица [А-Яа-яЁёЇїІіЄєҐґ]+ Пример Только украинские/русские буквы
Номер авто (UA формат) [A-Z]{2}\d{4}[A-Z]{2} AA1234BB Стандартный формат номерного знака

Итог

Теперь ты знаешь, как:

  • ограничить длину ввода (minlength, maxlength);

  • проверить электронную почту (type="email");

  • задать диапазоны значений (min, max);

  • проверить даты (type="date");

  • отключить проверку при необходимости (novalidate);

  • создать собственные правила проверки через pattern.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Последние записи в этой категории

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