Przycisk opcji jest interaktywnym elementem w HTML, który można utworzyć za pomocą „„Tag ma typ atrybutu o wartości”radio". Użytkownicy mogą wybrać jedną opcję z dostarczonej listy. Ten przycisk jest zwykle używany, gdy należy wybrać tylko jedną opcję w różnych scenariuszach, takich jak wybór płci, wybór grupy krwi i wiele innych.

W tym artykule poprowadzi Cię do tworzenia przycisku opcji HTML za pomocą praktycznego przykładu.

Jak dodać przycisk opcji w HTML?

Aby dodać przycisk opcji w HTML, postępuj zgodnie z podaną składką:

Oto opis podanej składni:

• "typ”: Ten atrybut określa, który typ danych wejściowych chcesz utworzyć, takie jak tekst, radio, pole wyboru. Aby utworzyć przycisk opcji, wartość atrybutu należy ustawić jako „radio”.
• "nazwa”: Definiuje nazwę elementu wejściowego. Ten atrybut powinien być taki sam dla listy przycisków opcji.
• "wartość”: Określa wartość, która zostanie wysłana do serwera, gdy przycisk opcji zostanie oznaczony jako sprawdzony.

Przykład: Dodanie przycisku opcji w HTML

W tym przykładzie omówi procedurę dodawania przycisku opcji w HTML za pomocą przycisku radiowego wejściowego. W

Krok 1: Tworzenie pliku HTML

Najpierw dodaj znacznik w pliku HTML:

Wewnątrz stworzonych:

• Najpierw dodaj „

  „Tag, aby podać nagłówek na stronę.

• Następnie "

  „Tag dla ustępu lub wiersza tekstowego.

• Następnie dodaje się znacznik wejściowy z atrybutem „typ„Posiadanie wartości”radio”, Nazwa jest ustawiona jako wybrana i„wartość" Jak "czerwony". Różne wartości są podane dla każdego przycisku opcji, który ma tę samą nazwę. Ta sama nazwa reprezentuje tę samą grupę lub listę.
• Jeśli chcesz dodać przycisk, który jest domyślnie oznaczony jako sprawdzony, przypisz atrybut „sprawdzony„Do tego przycisku.
• Wreszcie „„„Element na każdym przycisku opcji jest wykorzystywany do dodawania podpisów. Zapewnia również lepszą dostępność.

Poniższy kod to interpretacja powyższego scenariusza:

Przycisk opcji HTML

Jaki jest Twój ulubiony kolor?

Czerwony



Niebieski



Zielony



Fioletowy



Inni

Można zauważyć, że przyciski opcji są utworzone pomyślnie:

Możesz także zastosować style do wyżej wymyślonego przycisku radiowego, postępując zgodnie z poniższym kodem CSS.

Krok 2: Stosowanie stylu do HTML

„„div”Wskazuje znacznik DIV, który utworzyliśmy w pliku HTML:

• Po pierwsze "kolor tła„Własność jest ustalona jako„#8197F0".
• "granica„Własność jest ustalona jako„5px kropkowane #13023a”, Gdzie 5px reprezentuje szerokość granicy, kropkowane wskazuje rodzaj linii, a następnie wskazuje kolor granicy.
• "wyściółka”Jest ustawiony jako„20px 100px”Gdzie 20px określa wyściółkę od góry i dolną, a 100px wskazuje wyściółkę od lewej i prawej.
• Do stylizacji czcionek przypisz „rodzina czcionek„Wartość nieruchomości jako„kursywny".

CSS

div
kolor tła: #8197F0;
granica: 5px kropkowane #13023a;
Wyściółka: 20px 100px;
Rozmiar czcionki: 20px;
FONT-FAMILY: Kursywna;

Można zauważyć, że element DIV jest skutecznie stylizowany:

Otóż ​​to! Wyjaśniliśmy szczegółowo na temat przycisku radiowego HTML.

Wniosek

Przycisk opcji to wejście, które zawsze pojawia się w grupach dwóch lub więcej opcji. Z tej grupy użytkownik może wybrać tylko jedną opcję. W HTML przycisk opcji można tworzyć za pomocą „„Tag ma typ atrybutu o wartości”radio". Ten blog pokazał metodę dodawania przycisków opcji w HTML.