HTML-тег радио

Html Teg Radio



Радиокнопка — это интерактивный элемент в HTML, который можно создать с помощью « <ввод> ” тег, имеющий тип атрибута со значением “ радио ». Пользователи могут выбрать один вариант из предоставленного списка. Эта кнопка обычно используется, когда необходимо выбрать только один вариант в различных сценариях, таких как выбор пола, выбор группы крови и т. д.

Эта статья поможет вам создать радиокнопку HTML с помощью практического примера.

Как добавить переключатель в HTML?

Чтобы добавить переключатель в HTML, следуйте приведенному ниже синтаксису:







< вход тип знак равно 'радио' имя знак равно '' ценность знак равно '' >



Вот описание заявленного синтаксиса:



  • тип ”: этот атрибут указывает, какой тип ввода вы хотите создать, например, текст, радио, флажок и т. д. Чтобы создать переключатель, значение атрибута должно быть установлено как «радио».
  • имя ”: определяет имя элемента ввода. Этот атрибут должен быть одинаковым для списка переключателей.
  • ценность ”: указывает значение, которое будет отправлено на сервер, когда переключатель помечен как проверенный.

Пример: добавление радиокнопки в HTML





В этом примере будет обсуждаться процедура добавления переключателя в HTML с помощью переключателя ввода. В

Шаг 1: Создание HTML-файла



Сначала добавьте тег

в файл HTML:

< див > див >

Внутри созданного

:

  • Сначала добавьте «

    », чтобы дать заголовок странице.

  • Затем ' <р> » для абзаца или текстовой строки.
  • После этого входной тег добавляется с атрибутом « тип «имеющий ценность» радио ', имя установлено как select, и ' ценность ' в качестве ' красный ». Каждому переключателю с одинаковым именем присваиваются разные значения. Одно и то же имя представляет одну и ту же группу или список.
  • Если вы хотите добавить кнопку, которая по умолчанию помечена как проверенная, то присвойте ей атрибут « проверил на эту кнопку.
  • Наконец, « <метка> Элемент ” на каждой радиокнопке используется для добавления подписей. Это также обеспечивает лучшую доступность.

Приведенный ниже код является интерпретацией приведенного выше сценария:

< h1 > Радиокнопка HTML h1 >
< п > Какой твой любимый цвет? п >
< вход тип знак равно 'радио' имя знак равно 'выбрать цвет' ценность знак равно 'красный' проверил >
< этикетка за знак равно 'радио1' > Красный этикетка >
< бр >
< вход тип знак равно 'радио' имя знак равно 'выбрать цвет' ценность знак равно 'синий' >
< этикетка за знак равно 'радио1' > Синий этикетка >
< бр >
< вход тип знак равно 'радио' имя знак равно 'выбрать цвет' ценность знак равно 'зеленый' >
< этикетка за знак равно 'радио1' > Зеленый этикетка >
< бр >
< вход тип знак равно 'радио' имя знак равно 'выбрать цвет' ценность знак равно 'пурпурный' >
< этикетка за знак равно 'радио1' > Пурпурный этикетка >
< бр >
< вход тип знак равно 'радио' имя знак равно 'выбрать цвет' ценность знак равно 'другие' >
< этикетка за знак равно 'радио1' > Другие этикетка >



Видно, что радиокнопки созданы успешно:

Вы также можете применить стили к созданному выше переключателю, следуя приведенному ниже коду CSS.

Шаг 2: Применение стиля к HTML

див ” указывает тег div, который мы создали в файле HTML:

  • Во-первых, « фоновый цвет ” установлено как “ #8197f0 ».
  • граница ” установлено как “ 5 пикселей с точками # 13023a ”, где 5px представляет ширину границы, пунктир указывает тип линии, а следующий указывает цвет границы.
  • набивка » устанавливается как « 20 пикселей 100 пикселей ”, где 20px указывает отступ сверху и снизу, а 100px указывает отступ слева и справа.
  • Для стиля шрифта назначьте « семейство шрифтов ” значение свойства как “ скоропись ».

CSS

див {
фоновый цвет: #8197f0;
граница: 5px пунктирная № 13023а;
отступ: 20 пикселей 100 пикселей;
размер шрифта: 20px;
семейство шрифтов: скоропись;
}

Видно, что элемент div стилизован успешно:

Вот и все! Мы подробно объяснили переключатель HTML.

Вывод

Радиокнопка — это ввод, который всегда появляется в группах из двух или более опций. Из этой группы пользователь может выбрать только один вариант. В HTML радиокнопку можно создать с помощью « <ввод> ” тег, имеющий тип атрибута со значением “ радио ». В этом блоге продемонстрирован метод добавления переключателей в HTML.