Тази статия ще ви напътства при създаването на HTML радио бутон с помощта на практически пример.
Как да добавите радио бутон в HTML?
За да добавите бутон за избор в HTML, следвайте дадения по-долу синтаксис:
< вход Тип = 'радио' име = '' стойност = '' >
Ето описанието на посочения синтаксис:
- “ Тип ”: Този атрибут указва кой тип въвеждане искате да създадете като текст, радио, квадратче за отметка и други. За да създадете радио бутон, стойността на атрибута трябва да бъде зададена като „радио“.
- “ име ”: Дефинира името на входния елемент. Този атрибут трябва да е същият за списъка с радио бутони.
- “ стойност ”: Това определя стойността, която ще бъде изпратена до сървъра, когато радиобутонът е маркиран като отметнат.
Пример: Добавяне на радио бутон в HTML
Този пример ще обсъди процедурата за добавяне на радио бутон в HTML с помощта на радио бутона за въвеждане. в
Стъпка 1: Създаване на HTML файл
Първо добавете таг
Вътре в създадения
- Първо добавете „ ”, за да дадете заглавие на страницата.
- Тогава ' ” за абзац или текстов ред.
- След това тагът за въвеждане се добавя с атрибут „ Тип 'имащ стойност' радио “, името е зададено като select и „ стойност ' като ' червен ”. На всеки радио бутон, който има едно и също име, се дават различни стойности. Едно и също име представлява същата група или списък.
- Ако искате да добавите бутон, който по подразбиране е маркиран като отметнат, тогава задайте атрибута „ проверено ” до този бутон.
- И накрая, „ <етикет> ” елемент на всеки бутон за избор се използва за добавяне на надписи. Освен това осигурява по-добра достъпност.
Кодът по-долу е интерпретацията на горния сценарий:
< h1 > HTML радио бутон h1 >< стр > Кой е любимият ти цвят? стр >
< вход Тип = 'радио' име = 'избери цвят' стойност = 'червен' проверено >
< етикет за = 'радио1' > червен етикет >
< бр >
< вход Тип = 'радио' име = 'избери цвят' стойност = 'син' >
< етикет за = 'радио1' > Син етикет >
< бр >
< вход Тип = 'радио' име = 'избери цвят' стойност = 'зелен' >
< етикет за = 'радио1' > Зелено етикет >
< бр >
< вход Тип = 'радио' име = 'избери цвят' стойност = 'лилаво' >
< етикет за = 'радио1' > Лилаво етикет >
< бр >
< вход Тип = 'радио' име = 'избери цвят' стойност = 'други' >
< етикет за = 'радио1' > други етикет >
Вижда се, че радио бутоните са създадени успешно:
Можете също да приложите стилове към създадения по-горе бутон за избор, като следвате посочения по-долу CSS код.
Стъпка 2: Прилагане на стил към HTML
„ див ” показва етикета div, който сме създали в HTML файла:
- Първо, „ Цвят на фона ” свойството е зададено като „ #8197f0 ”.
- “ граница ” свойството е зададено като „ 5px с точки #13023a ”, където 5px представлява ширината на рамката, точката показва типа на линията, а след това показва цвета на рамката.
- “ подплата ” е зададено като „ 20px 100px ”, където 20px указва подложката отгоре и отдолу, а 100px указва подложката отляво и отдясно.
- За стилизиране на шрифта задайте „ шрифтово семейство „стойност на имота като“ курсив ”.
CSS
див {Цвят на фона: #8197f0;
граница: 5px пунктирана #13023a;
подложка: 20px 100px;
размер на шрифта: 20px;
семейство шрифтове: курсив;
}
Може да се види, че елементът div е стилизиран успешно:
Това е! Обяснихме подробно за HTML бутона за избор.
Заключение
Радио бутонът е вход, който винаги се появява в групи от две или повече опции. От тази група потребителят може да избере само една опция. В HTML радиобутон може да бъде създаден с помощта на „ <вход> ” етикет с тип атрибут със стойност „ радио ”. Този блог демонстрира метода за добавяне на радио бутони в HTML.