Как устроена валидация форм на уровне HTML

1️⃣ Как кратко ответить

HTML-валидация форм осуществляется с помощью встроенных атрибутов, таких как required, minlength, maxlength, pattern, type и других. Эти атрибуты позволяют браузеру автоматически проверять вводимые данные на соответствие заданным критериям до отправки формы на сервер.

2️⃣ Подробное объяснение темы

Валидация форм на уровне HTML — это механизм, который позволяет проверять корректность данных, вводимых пользователем, до их отправки на сервер. Это помогает улучшить пользовательский опыт и снизить нагрузку на сервер, так как многие ошибки могут быть исправлены на стороне клиента.

Основные атрибуты для валидации

1. required: Указывает, что поле обязательно для заполнения.

   <input type="text" name="username" required>
   

   Поле не может быть оставлено пустым.

2. minlength и maxlength: Определяют минимальную и максимальную длину вводимого текста.

   <input type="text" name="username" minlength="3" maxlength="15">
   

   Поле должно содержать от 3 до 15 символов.

3. pattern: Используется для проверки соответствия ввода регулярному выражению.

   <input type="text" name="zipcode" pattern="\d{5}">
   

   Поле должно содержать ровно 5 цифр.

4. type: Определяет тип данных, которые должны быть введены. Например, email, url, number, date.

   <input type="email" name="useremail">
   

   Поле должно содержать корректный адрес электронной почты.

5. min и max: Устанавливают минимальное и максимальное значение для числовых полей.

   <input type="number" name="age" min="18" max="99">
   

   Поле должно содержать число от 18 до 99.

6. step: Определяет шаг, с которым можно изменять значение числового поля.

   <input type="number" name="quantity" step="5">
   

   Поле принимает значения, кратные 5.

Пример использования

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
​
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8" required>
​
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="99" required>
​
  <button type="submit">Submit</button>
</form>

• <input type="email">: Проверяет, что введенное значение соответствует формату email.
• <input type="password" minlength="8">: Требует, чтобы пароль содержал не менее 8 символов.
• <input type="number" min="18" max="99">: Указывает, что возраст должен быть в диапазоне от 18 до 99.

Зачем это нужно

HTML-валидация форм позволяет:

• Сократить количество ошибок, отправляемых на сервер.
• Улучшить пользовательский опыт, предоставляя мгновенную обратную связь.
• Уменьшить количество кода на стороне клиента, так как многие проверки выполняются автоматически.

Как это работает

Когда пользователь пытается отправить форму, браузер проверяет все поля с атрибутами валидации. Если какое-либо из полей не соответствует заданным критериям, форма не будет отправлена, и пользователь получит сообщение об ошибке. Это сообщение может быть стандартным для браузера или кастомизированным с помощью атрибута title или JavaScript.