Правильное использование атрибута "required" с radio в HTML5

Быстрый ответ

Когда нужно, чтобы пользователь обязательно сделал выбор среди группы радиокнопок, прежде чем отправлять форму, достаточно добавить атрибут required только для одной из них. Это обязывает браузер контролировать, что был выбран хотя бы один вариант. Ниже представлен пример использования:

<form>
  <label><input type="radio" name="options" value="opt1" required> Вариант 1</label>
  <label><input type="radio" name="options" value="opt2"> Вариант 2</label>
  <input type="submit">
</form>

Присвоение атрибута required только одной радиокнопке гарантирует обязательность выбора во всей группе кнопок.

Глубим знания

Основа: Консистентность группы

Все радиокнопки в группе должны иметь один и тот же атрибут name. Это позволяет браузеру трактовать их как группу взаимоисключающих вариантов, где можно выбрать только один.

Подробнее об этом расскажет наш спикер на видео

Изначальный выбор: Упрощаем процесс

Рекомендуется заранее пометить как выбранной одну из радиокнопок, которая представляет собой стандартный или рекомендуемый вариант — это упрощает процесс выбора для большинства пользователей.

<label><input type="radio" name="beverage" value="wine" required checked> Вино</label>

Обновляем обязательства: Избыточность

Технически, проставление атрибута required каждой радиокнопке в группе необязательно и служит полноте кода и его понятности для других разработчиков.

Продвинутые методы: Не ограничиваемся

JavaScript предлагает возможности для создания продвинутых форм валидации и стилизации элементов формы, включая радиокнопки.

document.querySelector('form').addEventListener('submit', function(event) {
  if (!document.querySelector('input[name="options"]:checked')) {
    event.preventDefault();
  }
});

CSS может быть использован для визуального выделения необходимости сделать выбор, например:

input:required {
  border: 2px solid blue;
}

Визуализация

Теперь, выбирая на буфете, необходимо обязательно выбрать хотя бы один элемент:

| Выбор на буфете | Нужно взять! ✅             |
| ---------------- | -------------------------- |
| 🍔 Бургер        | ( ) выбрать обязательно    |
| 🍕 Пицца         | ( ) выбрать обязательно    |
| 🍣 Суши          | ( ) выбрать обязательно    |
| 🌮 Тако          | ( ) выбрать обязательно    |

Выбор в такой ситуации становится обязательным.

Важные моменты : Проблемы доступности

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

Локализация: Международный подход

Локализация форм и сообщений об ошибках является важной задачей для обеспечения комфорта пользователей из разных стран.

Адаптивность : Работаем с изменениями формы

Формы могут меняться и требуют соответствующей настройки процессов валидации, чтобы обязательные для заполнения поля не стали недоступными из-за динамических изменений.

Полезные материалы

1. HTML attribute: required – HTML: HyperText Markup Language | MDN — комплексное руководство по атрибуту required.
2. HTML input required Attribute — пошаговый гайд по required.
3. HTML Standard — определение required в спецификации HTML5.
4. html – How to use the "required" attribute with a "radio" input field – Stack Overflow — обсуждение использования required с радиокнопками.
5. HTML5 Form Validation — SitePoint — основы валидации форм в HTML5.
6. WebAIM: Creating Accessible Forms – Accessible Form Controls — гайд по созданию доступных форм.