Радиокнопка

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

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

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




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

  • 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>

Для того, чтобы после отправки формы на сервер возможно было узнать, какой именно пункт был выбран, используется атрибут 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. Уникальное имя для радиокнопок gender. Не забудьте добавить атрибут value


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

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

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