Знакомство с формами / Группа переключателей [13/18]
×

Группа переключателей [13/18]

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

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

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Группа переключателей</title> </head> <body> <h1>Тест</h1> <form action="https://echo.htmlacademy.ru" method="post"> <p>В тестах часто встречаются задания типа «выберите один из предложенных вариантов».</p> <p><i>Какой тег обозначает «абзац»?</i></p> <label> <input type="radio" name="question-one" value="p"> Тег &lt;p&gt; </label> <br> <label> <!-- добавьте второй переключатель сюда --> Тег &lt;b&gt; </label> <input type="submit" value="Отправить"> </form> </body> </html>
CSS
input[type="submit"] { display: block; margin-top: 10px; }
HTML Academy
  1. Добавьте в форму второй переключатель с именем question-one и значением b.
  2. Сделайте его выбранным по умолчанию.

Попробуйте отправить форму с разными вариантами ответа.

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.