Радиокнопка

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

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

Выбор радиостанции




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

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

Для создания связи label с input тоже существует два способа:

  1. Связь по 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>
  1. Вложить input внутрь тега label. При этом указание уникального id не требуется.
<form>
    <label>
        <input type="radio" name="question">
        Да
    </label>
    <br>
    <label>
        <input type="radio" name="question">
        Нет
    </label>
</form>

Задание

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


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

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