Input radio css: — HTML: HyperText Markup Language

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

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

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

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

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

• <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">
          Радио по умолчанию