Подготовительный курс HTML и CSS: Радиокнопка
Представьте, что вы предлагаете пользователю выбор: доставить товар курьером или почтой. Использовать чекбоксы в этом случае не получится, ведь выбор строго один.
Для создания переключателей, которые умеют обрабатывать только один из множества вариантов, существуют радиокнопки. Название они получили от старых автомобильных радиоприёмников, в которых выбор радио осуществлялся нажатием на одну из множества кнопок для выбора частоты.
Выбор радиостанции
Для создания радиокнопки, так же, как и чекбокса, используются два тега:
<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Решение учителя откроется через:
