Ten artykuł poprowadzi Cię przez tworzenie przycisku radiowego HTML za pomocą praktycznego przykładu.
Jak dodać przycisk radiowy w HTML?
Aby dodać przycisk radiowy w HTML, postępuj zgodnie z poniższą składnią:
< Wejście rodzaj = 'radio' Nazwa = '' wartość = '' >
Oto opis podanej składni:
- “ rodzaj ”: Ten atrybut określa, jaki typ danych wejściowych chcesz utworzyć, na przykład tekst, radio, pole wyboru i inne. Aby utworzyć przycisk radiowy, wartość atrybutu musi być ustawiona jako „radio”.
- “ Nazwa ”: Określa 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 radiowy zostanie oznaczony jako zaznaczony.
Przykład: Dodanie przycisku radiowego w HTML
W tym przykładzie omówimy procedurę dodawania przycisku opcji w HTML za pomocą przycisku opcji wprowadzania. W
Krok 1: Tworzenie pliku HTML
Najpierw dodaj tag
Wewnątrz utworzonego
- Najpierw dodaj „ ”, aby nadać nagłówek stronie.
- Następnie ' ” dla akapitu lub wiersza tekstu.
- Następnie tag wejściowy jest dodawany z atrybutem „ rodzaj „mający wartość” radio ”, nazwa jest ustawiona jako wybierz, a „ wartość ' jak ' czerwony ”. Każdemu przyciskowi opcji o tej samej nazwie przypisywane są różne wartości. Ta sama nazwa reprezentuje tę samą grupę lub listę.
- Jeśli chcesz dodać przycisk, który jest domyślnie oznaczony jako zaznaczony, przypisz atrybut „ w kratę ” do tego przycisku.
- Wreszcie „
” na każdym przycisku radiowym służy do dodawania napisów. Zapewnia również lepszą dostępność.
Poniższy kod jest interpretacją powyższego scenariusza:
< h1 > Przycisk radiowy HTML h1 >< p > Jaki jest Twój ulubiony kolor? p >
< Wejście rodzaj = 'radio' Nazwa = 'Wybierz kolor' wartość = 'czerwony' w kratę >
< etykieta dla = 'radio1' > Czerwony etykieta >
< br >
< Wejście rodzaj = 'radio' Nazwa = 'Wybierz kolor' wartość = 'niebieski' >
< etykieta dla = 'radio1' > Niebieski etykieta >
< br >
< Wejście rodzaj = 'radio' Nazwa = 'Wybierz kolor' wartość = 'Zielony' >
< etykieta dla = 'radio1' > Zielony etykieta >
< br >
< Wejście rodzaj = 'radio' Nazwa = 'Wybierz kolor' wartość = 'fioletowy' >
< etykieta dla = 'radio1' > Fioletowy etykieta >
< br >
< Wejście rodzaj = 'radio' Nazwa = 'Wybierz kolor' wartość = 'inni' >
< etykieta dla = 'radio1' > Inni etykieta >
Można zauważyć, że przyciski opcji zostały pomyślnie utworzone:
Możesz także zastosować style do utworzonego powyżej przycisku radiowego, postępując zgodnie z poniższym kodem CSS.
Krok 2: Stosowanie stylu do HTML
„ dz ” oznacza znacznik div, który utworzyliśmy w pliku HTML:
- Po pierwsze ' kolor tła ” właściwość jest ustawiona jako „ #8197f0 ”.
- “ granica ” właściwość jest ustawiona jako „ 5 pikseli w kropki #13023a ”, gdzie 5px oznacza szerokość obramowania, kropka oznacza rodzaj linii, a następnie kolor obramowania.
- “ wyściółka ” jest ustawione jako „ 20px 100px ”, gdzie 20px określa dopełnienie od góry i od dołu, a 100px oznacza dopełnienie od lewej i prawej strony.
- Do stylizacji czcionek przypisz „ rodzina czcionek „wartość nieruchomości jako” kursywny ”.
CSS
dz {kolor tła: #8197f0;
obramowanie: kropkowane 5 pikseli #13023a;
wypełnienie: 20px 100px;
rozmiar czcionki: 20px;
rodzina czcionek: kursywa;
}
Widać, że element div został pomyślnie stylizowany:
Otóż to! Wyjaśniliśmy szczegółowo przycisk radiowy HTML.
Wniosek
Przycisk radiowy to dane wejściowe, które zawsze pojawiają się w grupach po dwie lub więcej opcji. Z tej grupy użytkownik może wybrać tylko jedną opcję. W HTML przycisk radiowy można utworzyć za pomocą „