В чем разница между валидной и невалидной HTML-формой?

Валидная форма — это форма, все данные которой проходят проверку (валидацию) по заданным правилам на стороне клиента (браузер) и/или сервера.

Невалидная форма — это форма, содержащая хотя бы одно поле с данными, не соответствующими правилам валидации.

Правила валидации могут включать:

• Заполненность обязательных полей (атрибут required).
• Соответствие формату (email, телефон, URL через type="email" или pattern).
• Длину данных (minlength, maxlength).
• Диапазон значений для чисел (min, max).

Пример HTML-формы с встроенной валидацией:

<form>
  <label for="email">Email*:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Пароль (6-20 символов)*:</label>
  <input type="password" id="password" name="password"
         required minlength="6" maxlength="20">

  <label for="age">Возраст:</label>
  <input type="number" id="age" name="age" min="18" max="120">

  <button type="submit">Отправить</button>
</form>

Ключевые отличия:

1. Отправка: Валидную форму браузер отправит на сервер. Невалидную — заблокирует, показав ошибку.
2. Безопасность: Клиентская валидация — для удобства пользователя (UX). Серверная валидация обязательна для безопасности и целостности данных, так как клиентские проверки можно обойти.
3. Состояние: Поле формы может быть в состояниях :valid и :invalid, что позволяет стилизовать их по-разному с помощью CSS.