Бесплатный курс по HTML. Зарегистрируйтесь для отслеживания прогресса →

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

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

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

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




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

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

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

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