V tem vodiču se boste naučili vse pomembno o izbirnih gumbih in kako jih lahko učinkovito uporabite v svojih spletnih obrazcih. Izbirni gumbi so posebna oblika polj za vnos, ki uporabniku omogočajo, da izbere samo eno izmed možnosti v skupini. Izraz "izbirni gumb" izhaja iz stacionarnih tipk na starih radiih, pri katerih lahko biti vključena samo ena postaja. Ko se pritisne drug gumb, se prejšnja izbira samodejno onemogoči. V tem navodilu vam bom pojasnil, kako delujejo izbirni gumbi v HTML-ju in vam prikazal nekaj praktičnih primerov.
Najpomebnejša spoznanja
- Izbirni gumbi omogočajo izbiro med več možnostmi.
- Vsi izbirni gumbi v skupini morajo imeti enako ime.
- Vrednost izbranega izbirnega gumba se prenese ob pošiljanju obrazca.
Korak-za-korakom vodilo
Kaj so izbirni gumbi?
Najprej je pomembno razumeti, kaj točno so izbirni gumbi. To so posebna polja za vnos, ki uporabniku omogočajo, da izbere eno možnost iz različnih možnosti. Predstavljajte si, da imate anketno vprašanje, ki vas sprašuje po vaši najljubši barvi; z izbirnimi gumbi lahko zagotovite, da je mogoče izbrati le eno barvo. Za lažjo predstavo si lahko ogledate star radio, kjer lahko biti hkrati aktivna le ena postaja.
Osnove ustvarjanja izbirnih gumbov
Za ustvarjanje izbirnih gumbov v HTML-ju uporabite oznako za vnos input v kombinaciji z atributom type="radio". Tukaj je preprost primer, kako ustvariti posamezen izbirni gumb. Ko naložite HTML-kodo, boste takoj videli izbirni gumb.
Če izbirnemu gumbu dodate atribut checked, bo ta privzeto izbran, ko se stran naloži. Če je atribut izpuščen, bo izbirni gumb ostal nespremenjen, dokler uporabnik ne izbere možnosti.
Več izbirnih gumbov za skupino izbire
Če želite ustvariti več izbirnih gumbov za različne možnosti, se prepričajte, da imajo vsi izbirni gumbi v isti skupini enako ime, da delujejo pravilno. Na primer, ustvarimo anketo o najljubših barvah. Potrebujete več elementov input z atributom type="radio" z enakim imenom.
Na primer, pogledamo štiri barve: Rdeča, Modra, Rumena in Zelena. Pomembno je, da ima vsak radijski gumb barve edinstven atribut vrednosti, ki bo kasneje uporabljen pri pošiljanju obrazca.
Ime skupine izbirnih gumbov
Ime je ključno za delovanje izbirnih gumbov. Če določite enako ime za vse izbirne gumbe v skupini, bo omogočena samo ena izbira. V nasprotnem primeru bi lahko uporabnik označil več možnosti, kar ni v duhu izbirnega gumba. Določena vrednost izbora se bo nato poslala ob pošiljanju obrazca.
Evalvacija izbire
Ko uporabnik označi izbirni gumb in pošlje obrazec, bo poslana samo vrednost označenega izbirnega gumba - npr. fafcolor=yellow, če je izbrana Rumena. To izbirne gumbe naredi še posebej učinkovite za ankete ali vprašanja, kjer je mogoča le ena možnost.
Oblikovanje izbirnih gumbov
Oblika izbirnih gumbov se lahko razlikuje glede na brskalnik. Lahko prilagodite slog, če naredite radijski gumb neviden in ga oblikujete prek oznak in CSS slogov po meri. Tu lahko postanete ustvarjalni in radijski gumb prilagodite po svojih željah.
Povzetek
V tem navodilu ste se naučili, kaj so izbirni gumbi in kako se oblikujejo v HTML-ju. Spoznali ste, da vam pomagajo ustvariti uporabniku prijazno izkušnjo v obrazcih, tako da uporabniku omogočajo, da izberejo eno od več možnosti. Spomnite se, da morajo izbirni gumbi v isti skupini nositi enako ime, da bo izbira delovala pravilno.
Pogosta vprašanja
Kaj so Radiogumbi?Radiogumbi so polja za vnos, ki uporabnikom omogočajo izbiro ene možnosti iz več možnosti.
Koliko Radiogumbov lahko imam v eni skupini?V eni skupini lahko imaš poljubno število Radiogumbov, dokler imajo enako ime.
Kako se prenaša vrednost Radiogumba?Vrednost izbranega Radiogumba se pošlje preko atributa value pri prenosu obrazca.
Ali lahko prilagodim izgled Radiogumbov?Da, izgled Radiogumbov lahko prilagodiš s CSS.
Kaj se zgodi, če imam več Radiogumbov z različnimi imeni?Če Radiogumbi imajo različna imena, lahko uporabniki izberejo več možnosti, kar ni želeno obnašanje.
