Selles juhendis saate teada, kuidas luua select-elementi abil HTML-is valitavat loendit, mida nimetatakse ka lihtsaks rippmenüüks. See elemendikombinatsioon on oluline kasutajaliideses veebivormides interaktsiooni jaoks, kuna see võimaldab kasutajatel valida eelnevalt määratletud valikute vahel. Vaatleme nii mitmevalikulist kui ka lihtsaid loendeid ning arutame stiilivalikuid, mis sulle kättesaadavaks saavad.
Põhiteadmised
- Valitud valikute pakkumiseks kasutatakse select-elementi koos valiku-sildiga.
- Valikuväljade kujundamine on piiratud ja sõltub brauserist.
- Kui soovid kujunduse üle rohkem kontrolli, peaksid kaaluma teiste tehnoloogiate, nagu JavaScripti või raamistike kasutamist.
Samm-sammult juhend
Lihtsa rippmenüü loomiseks alusta select-elementiga. Siin määratled sisestusvälja, kus kasutajad saavad oma valiku teha.
Select-element vajab nimeatribuuti, et saaksite valitud valiku vormi esitamisel tuvastada. Siin määrame nimeks "lemmikpuuviljad", et salvestada eelistatud puuvilju.
Select-elementi sees lisate mitu valiku-silti, mis kujutavad endast individuaalseid valikuvõimalusi. Igal neist siltidest on nii nähtav tekst kui ka vormi esitamisel kasutatav alusväärtus.
Rippmenüü loomiseks saate size-atribuudi määrata 1, mis tähendab, et korraga kuvatakse ainult üks element. See tagab, et see käitub nagu tavaline rippmenüü.
Selecti jaoks veel üks oluline atribuut on mitu. Kui lisate selle atribuudi, saavad kasutajad mitu valikut korraga teha, sarnaselt märkeruutudega. Kasutajad saavad selleks kasutada juhtklahvi (või Macide puhul käsuklahvi), et valida mitu elementi.
Kui olete valiku teinud ja vormi saatnud, saadetakse valitud valikute väärtus serverile. Kuigi andmeid edastatakse massiivina, on oluline, et mitmest valikust iga valitud väärtus massiivist leitav oleks.
Valiku-sildil saab olla ka ainult lihtne tekst. Pildid või lingid HTML-koodina valikutes ei toeta. Siiski saate välimust kohandada CSS-i abil, nagu näiteks kirjatüüp või taustavärv.
Stiililisi kohandusi, nagu kirjatüüp ja värv, saate teha valiku-siltide style-atribuudiga. See on tavapärase loendi puhul lihtsam rakendada, kuna teil on rohkem kontrolli paigutuse üle.
Sõltuvalt brauserist võivad select-elementide väljanägemine erineda. Mõned brauserid võivad näiteks rippmenüü taustavärvi ja teksti teistsugusena kuvada. Oluline on see arvesse võtta, kui kujundate oma vormi.
Kui kaalute piltide lisamist valikuna, muutub see selectiga veidi keerukamaks. Oleks soovitatav kasutada siin JavaScripti või väliseid kasutajaliidese raamatukogusid, kuna tavalisi HTML-elemente ei saa valiku-siltidesse lisada.
Oluliselt keerukama kasutajaliidese elemendi rakendamiseks, mille puhul on vaja paindlikku kujundust, ehk kombinatsiooni piltidest ja tekstist, oleks mõistlikum luua oma rippmenüü või loend või kasutada olemasolevat raamistikku.
Kokkuvõtvalt võib öelda, et select-element pakub suurepärast võimalust valida lihtsalt loendist välja või võimaldada mitmevalikut. Siiski on oluline meelde jätta stiilivalikute keerukus ja brauserite erinevused, et kasutajakogemust mitte halvendada.
Kokkuvõte - Juhend vormiväljade loomiseks valitavate loenditega
Selles juhendis õppisid sa, kuidas luua HTML-s valitavaid loendeid vali elemendi abil. Rõhk oli pandud valimisväljade praktilisele kasutamisele, mitmikvalikuvõimalustele ja põhjalikele stiilivalikutele.
Korduma kippuvad küsimused
Mis vahe on ja vahel?Põhiline erinevus seisneb selles, et pakub rippmenüüd, millest saab valida ühe võimaluse, samas kui input type="radio" näitab mitmeid valikuid, millest saab valida vaid ühe.
Kuidas saan valida mitu valikut sees?Sa saad rakendada mitmevalik-atribuuti oma -elemendile, et võimaldada mitmikvalikuid.
Kas ma saan kasutada -sildide sees HTML-i?Ei, -sildid toetavad ainult lihtsat teksti ega võimalda HTML-sisu.
Kuidas saan kohandada elementide kuvamist?Sa saad kasutada CSS-i, et teha põhilisi stiilimuudatusi, kuid võimalused on piiratud, kuna mitte kõik CSS-omadused ei mõju -elementidele.
Mis on soovitatav meetod, kui tahan kasutada valikus pildid?Piltide kasutamiseks valikuväljadel oleks mõistlik turvautuda JavaScriptile või väliste kasutajaliidese raamatukogudele, kuna -elemendid ei toeta HTML-sisu -siltide sees.
