Menu
CoddyTech

Радиокнопки

Часть раздела Основы путешествия по HTML на Coddy. Урок 41 из 60.

В HTML радиокнопки используются для создания набора взаимоисключающих вариантов, в котором пользователь может выбрать только один вариант из группы. Радиокнопки создаются с помощью тега <input> с атрибутом type, установленным в значение "radio".

Вот базовый синтаксис для создания переключателя в HTML:

<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>
  • <input>: Тег, который определяет поле ввода.
  • type="radio": Атрибут, который задаёт тип поля ввода как переключатель.
  • id: Атрибут, который задаёт переключателю уникальный идентификатор.
  • name: Атрибут, который объединяет переключатели в группу. Все переключатели с одинаковым именем принадлежат одной группе, и в каждый момент времени можно выбрать только один вариант в группе.
  • value: Атрибут, задающий значение, связанное с переключателем. Это значение отправляется на сервер при отправке формы.
  • <label>: Тег, который создает кликабельную метку для переключателя. Атрибут for метки должен совпадать с атрибутом id переключателя.

Вот пример создания группы переключателей:

<form>
	<input type="radio" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label>
	<br>
	
	<input type="radio" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label>
	<br>
	
	<input type="radio" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label>
	<br>
</form>

В этом примере у нас есть форма с тремя переключателями, которые относятся к одной группе, поскольку у них общий атрибут name ("mygroup"). У каждого переключателя есть уникальные id и value, а также соответствующая метка. Когда пользователь выбирает один из этих вариантов и отправляет форму, значение выбранного переключателя отправляется на сервер.

challenge icon

Задание

Легко

Создай HTML-документ с формой, содержащей группу переключателей. Форма должна включать следующие элементы:

  1. Группу из трёх переключателей с именем "color".
  2. Первый переключатель должен иметь идентификатор "red", значение "red" и метку с текстом "Red".
  3. Второй переключатель должен иметь идентификатор "green", значение "green" и метку с текстом "Green".
  4. Третий переключатель должен иметь идентификатор "blue", значение "blue" и метку с текстом "Blue".
  5. Добавь тег <br> после каждой метки, чтобы создать разрыв строки.

Попробуйте сами

<!DOCTYPE html>
<html>
    <body>
        <!-- Напишите код здесь -->
    </body>
</html>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Основы

Потренируйтесь самостоятельно: Песочница Web