Ovaj će vas članak voditi u stvaranju HTML radio gumba uz pomoć praktičnog primjera.
Kako dodati radio gumb u HTML?
Da biste dodali radio gumb u HTML, slijedite dolje danu sintaksu:
< ulazni tip = 'radio' Ime = '' vrijednost = '' >
Ovdje je opis navedene sintakse:
- “ tip ”: Ovaj atribut određuje koju vrstu unosa želite stvoriti, kao što je tekst, radio, potvrdni okvir i drugo. Za stvaranje radio gumba, vrijednost atributa mora biti postavljena kao 'radio'.
- “ Ime ”: Definira naziv ulaznog elementa. Ovaj bi atribut trebao biti isti za popis radio gumba.
- “ vrijednost ”: Ovo određuje vrijednost koja će biti poslana na poslužitelj kada je radio gumb označen kao označen.
Primjer: Dodavanje radio gumba u HTML
U ovom će se primjeru raspravljati o postupku dodavanja radio gumba u HTML pomoću radio gumba za unos. U
Korak 1: Stvaranje HTML datoteke
Prvo dodajte oznaku
Unutar stvorenog
- Prvo dodajte ' ” za davanje naslova stranici.
- Zatim, ' ” za odlomak ili redak teksta.
- Nakon toga se dodaje oznaka unosa s atributom “ tip 'imati vrijednost' radio “, naziv je postavljen kao odabir, a „ vrijednost ” kao “ Crvena ”. Svakom radio gumbu koji ima isti naziv daju se različite vrijednosti. Isto ime predstavlja istu grupu ili popis.
- Ako želite dodati gumb koji je prema zadanim postavkama označen kao označen, tada dodijelite atribut ' provjereno ” do tog gumba.
- Na kraju, '
” element na svakom radio gumbu koristi se za dodavanje naslova. Također pruža bolju dostupnost.
Donji kod je interpretacija gornjeg scenarija:
< h1 > Radio gumb HTML h1 >< str > Koja ti je omiljena boja? str >
< ulazni tip = 'radio' Ime = 'odaberi boju' vrijednost = 'Crvena' provjereno >
< označiti za = 'radio1' > Crvena označiti >
< br >
< ulazni tip = 'radio' Ime = 'odaberi boju' vrijednost = 'plava' >
< označiti za = 'radio1' > Plava označiti >
< br >
< ulazni tip = 'radio' Ime = 'odaberi boju' vrijednost = 'zeleno' >
< označiti za = 'radio1' > zelena označiti >
< br >
< ulazni tip = 'radio' Ime = 'odaberi boju' vrijednost = 'ljubičasta' >
< označiti za = 'radio1' > Ljubičasta označiti >
< br >
< ulazni tip = 'radio' Ime = 'odaberi boju' vrijednost = 'drugi' >
< označiti za = 'radio1' > Drugi označiti >
Može se vidjeti da su radio gumbi uspješno kreirani:
Također možete primijeniti stilove na gore stvoreni radio gumb slijedeći dolje navedeni CSS kod.
Korak 2: Primjena stila na HTML
' div ” označava div oznaku koju smo stvorili u HTML datoteci:
- Prvo, ' boja pozadine ” svojstvo je postavljeno kao “ #8197f0 ”.
- “ granica ” svojstvo je postavljeno kao “ 5 px točkasto #13023a ”, gdje 5px predstavlja širinu obruba, točkasta označava vrstu linije, a sljedeće označava boju obruba.
- “ podstava ' postavljeno je kao ' 20 px 100 px ” gdje 20px označava udaljenost od vrha i dna, a 100px označava udaljenost od lijevo i desno.
- Za stil fonta dodijelite ' obitelj-fontova ' vrijednost imovine kao ' rukopisni ”.
CSS
div {boja pozadine: #8197f0;
rub: 5px točkasto #13023a;
ispuna: 20px 100px;
veličina fonta: 20px;
obitelj-fontova: kurziv;
}
Može se vidjeti da je div element uspješno stiliziran:
To je to! Detaljno smo objasnili radio gumb HTML.
Zaključak
Radio gumb je unos koji se uvijek pojavljuje u grupama od dvije ili više opcija. Iz ove grupe korisnik može odabrati samo jednu opciju. U HTML-u se radio gumb može stvoriti pomoću '