Радиокнопка | HTML | CodeBasics

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

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

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

87.1 FM
95.5 FM
101.4 FM
103.2 FM

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

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

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

  • Связь по id. Для этого необходимо задать уникальный id для <input>, и связать <label> с радиокнопкой с помощью атрибута for
  <form>
    <input type="radio" name="question">
    <label for="yes">Да</label>
    <input 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

Переключатель Tailwind CSS — бесплатные примеры и руководство

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

Базовый пример

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

Радио по умолчанию

Радио проверено по умолчанию

            
      <дел>
        <ввод
         
          тип = "радио"
          имя = "flexRadioDefault"
          />
        <метка
         
          для = "radioDefault01">
          Радио по умолчанию
<дел> <ввод тип = "радио" имя = "flexRadioDefault" проверено /> <метка для = "радиоDefault02"> Радио проверено по умолчанию