Курс 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

Коммерческий опыт и Трудоустройство

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

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

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":

В моей среде код работает, а здесь нет 🤨

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

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

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

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

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

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

Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт

Ваше упражнение проверяется по этим тестам

1const { test } = require('tests');
2
3test(({ query, expect }) => {
4  const form = query(document, 'form');
5  const labels = form.querySelectorAll('label');
6
7  expect(form).to.have.attr('action', '/people');
8  expect(labels).to.have.length(2);
9
10  labels.forEach((label) => {
11    const input = label.querySelector('input');
12    expect(input).to.have.attr('type', 'radio');
13    expect(input).to.have.attr('name', 'delivery');
14    expect(input).to.have.attr('value');
15  });
16});
17

Решение учителя откроется через:

20:00

← ПредыдущийСледующий →