V tej navodilih boš izvedel, kako ustvariti odločitvene sezname, imenovane tudi spustni meniji, s pomočjo select-elementa v HTML. Ta kombinacija elementov je ključna za uporabniško interakcijo v spletnih obrazcih, saj omogoča uporabnikom izbiranje med predhodno določenimi možnostmi. Preučili bomo tako večkratno izbiranje kot enostavne sezname ter razpravljali o možnostih oblikovanja, ki so ti na voljo.
Najpomembnejše ugotovitve
- Element select se uporablja v kombinaciji s tagom option za ponudbo izbirnih možnosti.
- Oblikovanje izbirnih polj je omejeno in se razlikuje glede na brskalnik.
- Če želite več nadzora nad oblikovanjem, razmislite o uporabi drugih tehnologij, kot so JavaScript ali ogrodja.
Korak za korakom navodilo
Za ustvarjanje preprostega padajočega menija začni z elementom select. Tukaj določiš polje za vnos, v katerem bodo lahko uporabniki izbrali svojo izbiro.
Element select potrebuje atribut name, da lahko identificirate izbrano možnost pri oddaji obrazca. Tukaj postavimo ime na "lubene_ sadje", da zajamemo izbrano sadje.
V okvirju elementa select dodajte več oznak za možnosti, ki predstavljajo posamezne izbirne možnosti. Vsaka od teh oznak ima tako vidno besedilo kot tudi ozadnjo vrednost, ki se bo uporabljala pri oddaji obrazca.
Za ustvarjanje padajočega menija lahko atribut size nastavite na 1, kar pomeni, da se hkrati prikaže le en element. To zagotavlja, da se obnaša kot običajen padajoči meni.
Še en pomemben atribut za select je multiple. Če temu atributu dodaš, bodo lahko uporabniki istočasno izbrali več možnosti, podobno kot pri potrditvenih poljih. Za večkratno izbiro lahko uporabniki uporabijo tipko za nadzor (ali tipko Command na Macih), da izberejo več elementov.
Ko izberete možnost in obrazec pošljete, se vrednost izbranih možnosti pošlje na strežnik. Medtem ko se podatki prenašajo kot niz, je pomembno, da je vsaka izbrana vrednost v seznamu pri uporabi možnosti multiple.
Element option lahko vsebuje le preprost besedilo. HTML kode, kot so slike ali povezave, znotraj možnosti niso podprte. Vendar lahko s pomočjo CSS prilagajate videz, na primer pisavo ali barvo ozadja.
Stilistične prilagoditve, kot so pisava in barva, lahko opravite s stilskim atributom možnosti. To je enostavneje implementirati v seznamu, ki je običajno prikazan, saj imate več nadzora nad postavitvijo.
Glede na brskalnik se videz elementov select lahko razlikuje. Nekateri brskalniki lahko na primer prikazujejo ozadje in besedilo padajočih menijev drugače. Pri oblikovanju obrazca je pomembno upoštevati to dejstvo.
Če razmišljate, da bi dodali slike kot možnosti izbora, bo to s pomočjo select nekoliko zapleteno. Priporočljivo je, da v ta namen posežete po JavaScriptu ali zunanjih knjižnicah uporabniškega vmesnika, saj običajnih HTML elementov ni mogoče vnesti v oznake možnosti.
Za implementacijo bolj kompleksnega UI elementa, za katerega potrebujete prilagodljivo oblikovanje, morda kombinacijo slik in besedila, bi bilo pametneje razviti svoj padajoči meni ali seznam ali poseči po obstoječem ogrodju.
Na splošno velja, da element select ponuja odlično možnost za enostavno izbiranje iz seznama ali omogočanje večkratnih izbir. Pomembno je vendarle, da se spomnite kompleksnosti možnosti oblikovanja in razlik med brskalniki, da ne bi poslabšali uporabniške izkušnje.
Povzetek - Navodila za ustvarjanje spletnih obrazcev z izbirnimi seznami
V tem vodniku ste se naučili, kako ustvariti izbirne sezname v HTML s pomočjo elementa select. Poudarek je bil na praktični uporabi polj za izbiro, možnostih večkratne izbire ter osnovnih možnostih oblikovanja.
Pogosta vprašanja
Kakšna je razlika med in ?Glavna razlika je v tem, da ponuja padajoči seznam, iz katerega se izbere ena možnost, medtem ko input type="radio" prikaže več možnosti, od katerih lahko izberemo samo eno.
Kako lahko izberem več možnosti v ?Na svoj element lahko uporabite atribut multiple, da omogočite večkratno izbiranje.
Ali lahko vsebino HTML uporabim znotraj oznak ?Ne, oznake podpirajo samo preprost besedilni vnos in ne HTML vsebin.
Kako lahko prilagodim prikaz elementov ?Lahko uporabite CSS za osnovne spremembe sloga, vendar so možnosti omejene, saj ne vse CSS lastnosti delujejo na elemente.
Katera je priporočena metoda, če želim uporabiti slike v izbiranju?Za uporabo slik v poljih za izbiro bi bilo bolje uporabiti JavaScript ali zunanje knjižnice uporabniškega vmesnika, saj elementi ne podpirajo HTML vsebine znotraj oznak.
