HTML/CSS: Радиокнопка

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

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

Для создания радиокнопки, так же, как и чекбокса, используются два тега:

• <input> с указанием type="radio". Обязательным атрибутом является name, значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними
• <label>, в котором будет текст, связанный с нужной нам радиокнопкой

Связь <input> с <label> происходит уже по одному из двух знакомых нам сценариев:

• Связь по id. Для этого необходимо задать уникальный id для <input>, и связать <label> с радиокнопкой с помощью атрибута for

  <form>
    <input id="yes" type="radio" name="question">
    <label for="yes">Да</label>

    <input id="no" type="radio" name="question">
    <label for="no">Нет</label>
  </form>

• Вложить <input> внутрь тега <label>. При этом указание уникального id не требуется

  <form>
    <label>
      <input type="radio" name="question">
      Да
    </label>
    <br>
    <label>
      <input type="radio" name="question">
      Нет
    </label>
  </form>

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

<form>
  <label>
    <input type="radio" name="question" value="yes">
    Да
  </label>
  <br>
  <label>
    <input type="radio" name="question" value="no">
    Нет
  </label>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 радиокнопки. Свяжите их вложив <input> внутри <label>. Уникальное имя для радиокнопок delivery. Не забудьте добавить атрибут value