Атрибут required тега <input>

Описание

Атрибут required указывает, что поле формы должно быть заполнено перед отправкой. Браузеры автоматически проверяют наличие значения в таких полях и предотвращают отправку формы, если требование не выполнено.

Пример использования:
<form action="/register" method="post"> <label for="username">Имя пользователя*:</label> <input type="text" id="username" name="username" required> <label for="email">Email*:</label> <input type="email" id="email" name="email" required> <label for="phone">Телефон:</label> <input type="tel" id="phone" name="phone"> <input type="submit" value="Зарегистрироваться"> </form>

Поддерживаемые типы input:

Тип Поведение Пример
text Проверяет наличие любого текста <input type="text" required>
email Проверяет формат email <input type="email" required>
password Требует ввода пароля <input type="password" required>
checkbox Требует отметки <input type="checkbox" required>
file Требует выбора файла <input type="file" required>
radio Требует выбора варианта Достаточно одному в группе иметь required

Пример с кастомным сообщением об ошибке:

<form id="myForm"> <label for="age">Возраст*:</label> <input type="number" id="age" name="age" required oninvalid="this.setCustomValidity('Пожалуйста, укажите ваш возраст')" oninput="this.setCustomValidity('')"> <input type="submit" value="Отправить"> </form>

Рекомендации:

  • Используйте визуальные подсказки (* или "обязательно") рядом с полями
  • Сочетайте с атрибутом pattern для сложных проверок
  • Для чекбоксов "Согласие на обработку данных" всегда используйте required
  • Дублируйте проверки на сервере
  • Проверяйте работу в разных браузерах

Пример с группой радиокнопок:

<form action="/survey"> <p>Ваш уровень удовлетворенности*:</p> <input type="radio" id="happy" name="satisfaction" value="happy" required> <label for="happy">Высокий</label> <input type="radio" id="neutral" name="satisfaction" value="neutral"> <label for="neutral">Средний</label> <input type="radio" id="unhappy" name="satisfaction" value="unhappy"> <label for="unhappy">Низкий</label> <input type="submit" value="Отправить отзыв"> </form>

Ограничения:

  • Сообщения об ошибках зависят от браузера и языка ОС
  • В IE9 и ниже требуется полифил
  • Не поддерживает сложные условия (например, "хотя бы одно из двух")
  • Не проверяет смысловую корректность данных

Пример с чекбоксом согласия:

<form action="/signup"> <!-- Другие поля формы --> <input type="checkbox" id="consent" name="consent" required> <label for="consent">Я согласен на обработку персональных данных*</label> <input type="submit" value="Зарегистрироваться"> </form>

Примечание: Атрибут required - это удобный способ обеспечить базовую проверку заполнения полей на стороне клиента, но он не заменяет серверную валидацию. Всегда проверяйте данные на сервере перед обработкой.