description.ru.yml

---

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

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

  <div class="hexlet-basics-example my-3">
    <p class="lead">Выбор радиостанции</p>
    <form>
      <label>
        <input type="radio" name="fm">
        87.1 FM
      </label>
      <br>
      <label>
        <input type="radio" name="fm">
        95.5 FM
      </label>
      <br>
      <label>
        <input type="radio" name="fm">
        101.4 FM
      </label>
      <br>
      <label>
        <input type="radio" name="fm">
        103.2 FM
      </label>
    </form>
  </div>

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

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

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

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

    ```html
    <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` не требуется

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

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

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

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