Использование HTML Элемента формы <input type="radio">

HTML-элемент формы <input type="radio"> используется для представления нескольких вариантов, из которых можно выбрать только один. Он является идеальным решением, если вам необходимо предложить пользователю набор опций и дать возможность выбора одной из них.

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

Рассмотрим конкретный пример. Предположим, у вас на веб-странице есть форма, в которой спрашивается предпочтительный язык пользователя.

<form>
  <p>Выберите предпочтительный язык:</p>
  <input type="radio" id="russian" name="language" value="russian">
  <label for="russian">Русский</label><br>
  <input type="radio" id="english" name="language" value="english">
  <label for="english">Английский</label><br>
  <input type="radio" id="german" name="language" value="german">
  <label for="german">Немецкий</label><br>
  <input type="submit" value="Подтвердить">
</form>

В этом примере пользователь может выбрать только один язык. Попытка выбора второго автоматически снимет выбор с первого. Это основное отличие <input type="radio"> от <input type="checkbox">, позволяющего выбрать несколько вариантов одновременно.

Лучшие практики и дополнительные сведения

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

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

Помимо <input type="radio">, есть и другие элементы форм, такие как <input type="text">, которые позволяют пользователю ввести текст, а <input type="checkbox">, позволяющий выбрать множество вариантов. Однако для предоставления пользователю нескольких вариантов, из которых можно выбрать только один, самым подходящим является <input type="radio">.