Ta članek vas bo vodil pri ustvarjanju izbirnega gumba HTML s pomočjo praktičnega primera.
Kako dodati izbirni gumb v HTML?
Če želite dodati izbirni gumb v HTML, sledite spodnji sintaksi:
< vnos vrsta = 'radio' ime = '' vrednost = '' >
Tukaj je opis navedene sintakse:
- “ vrsta ”: ta atribut določa vrsto vnosa, ki ga želite ustvariti, na primer besedilo, radio, potrditveno polje itd. Če želite ustvariti izbirni gumb, mora biti vrednost atributa nastavljena na »radio«.
- “ ime ”: Določa ime vhodnega elementa. Ta atribut mora biti enak za seznam izbirnih gumbov.
- “ vrednost ”: To določa vrednost, ki bo poslana strežniku, ko je izbirni gumb označen kot označen.
Primer: dodajanje izbirnega gumba v HTML
Ta primer obravnava postopek dodajanja izbirnega gumba v HTML z uporabo izbirnega gumba za vnos. notri
1. korak: Ustvarjanje datoteke HTML
Najprej dodajte oznako
Znotraj ustvarjenega
- Najprej dodajte » ” za dajanje naslova strani.
- Potem, ' ” za odstavek ali besedilno vrstico.
- Po tem se vhodna oznaka doda z atributom ' vrsta 'imeti vrednost' radio «, ime je nastavljeno kot select in » vrednost 'kot' rdeča ”. Vsak izbirni gumb z enakim imenom ima različne vrednosti. Isto ime predstavlja isto skupino ali seznam.
- Če želite dodati gumb, ki je privzeto označen kot označen, dodelite atribut ' preverjeno ” na ta gumb.
- Nazadnje, '
” Element na vsakem izbirnem gumbu se uporablja za dodajanje napisov. Zagotavlja tudi boljšo dostopnost.
Spodnja koda je razlaga zgornjega scenarija:
< h1 > Izbirni gumb HTML h1 >< str > Katera je vaša najljubša barva? str >
< vnos vrsta = 'radio' ime = 'izberi barvo' vrednost = 'rdeča' preverjeno >
< oznaka za = 'radio1' > rdeča oznaka >
< št >
< vnos vrsta = 'radio' ime = 'izberi barvo' vrednost = 'modra' >
< oznaka za = 'radio1' > Modra oznaka >
< št >
< vnos vrsta = 'radio' ime = 'izberi barvo' vrednost = 'zelena' >
< oznaka za = 'radio1' > Zelena oznaka >
< št >
< vnos vrsta = 'radio' ime = 'izberi barvo' vrednost = 'vijolična' >
< oznaka za = 'radio1' > Vijolična oznaka >
< št >
< vnos vrsta = 'radio' ime = 'izberi barvo' vrednost = 'drugi' >
< oznaka za = 'radio1' > drugi oznaka >
Vidimo, da so izbirni gumbi uspešno ustvarjeni:
Prav tako lahko uporabite sloge za zgoraj ustvarjen izbirni gumb, tako da sledite spodaj navedeni kodi CSS.
2. korak: Uporaba sloga v HTML
' div ” označuje oznako div, ki smo jo ustvarili v datoteki HTML:
- Prvič, ' Barva ozadja Lastnost je nastavljena kot #8197f0 ”.
- “ meja Lastnost je nastavljena kot 5 slikovnih pik s pikami #13023a «, kjer 5px predstavlja širino obrobe, pikčasta označuje vrsto črte, nato pa označuje barvo obrobe.
- “ oblazinjenje ' je nastavljeno kot ' 20px 100px «, kjer 20px določa odmik od zgoraj in spodaj, 100px pa odmik od leve in desne.
- Za oblikovanje pisave dodelite » družina pisav ' vrednost nepremičnine kot ' kurziv ”.
CSS
div {Barva ozadja: #8197f0;
obroba: 5px pikčasta #13023a;
oblazinjenje: 20px 100px;
velikost pisave: 20px;
družina pisav: kurziv;
}
Vidimo lahko, da je element div uspešno oblikovan:
To je to! Podrobno smo razložili radijski gumb HTML.
Zaključek
Izbirni gumb je vnos, ki se vedno pojavi v skupinah dveh ali več možnosti. Iz te skupine lahko uporabnik izbere samo eno možnost. V HTML lahko izbirni gumb ustvarite z uporabo '