I denne vejledning vil du lære, hvordan du kan oprette valgbare lister, også kendt som drop-downs, med select-elementet i HTML. Denne kombination af elementer er afgørende for brugerinteraktionen i webformularer, da den giver brugerne mulighed for at vælge mellem foruddefinerede muligheder. Vi vil se på både flere valgmuligheder og enkelte lister og diskutere de stilvalg, der er tilgængelige.
Vigtigste erkendelser
- Select-elementet bruges i kombination med option-taggen for at give valgmuligheder.
- Styling af valgfelter er begrænset og varierer afhængigt af browseren.
- Hvis du ønsker mere kontrol over stylingen, bør du overveje at anvende andre teknologier som JavaScript eller frameworks.
Trin-for-trin-vejledning
For at oprette en simpel dropdown-menu, begynd med select-elementet. Her definerer du inputfeltet, hvor brugerne kan foretage deres valg.
Select-elementet kræver et name-attribut, så du kan identificere den valgte mulighed ved formularafsendelse. Her har vi sat navnet til "favorite_fruits" for at registrere de foretrukne frugter.
Inden i select-elementet tilføjer du flere option-tags, der repræsenterer de individuelle valgmuligheder. Hver af disse tags har både en synlig tekst og en underliggende værdi, der bruges ved formularafsendelse.
For at oprette en dropdown-menu kan du sætte size-attributtet til 1, hvilket betyder, at kun ét element vises ad gangen. Dette sikrer, at det opfører sig som en almindelig dropdown.
Et andet vigtigt attribut for select er multiple. Hvis du tilføjer dette attribut, kan brugerne vælge flere muligheder samtidig, ligesom med afkrydsningsfelter. Brugerne kan bruge kontroltasten (eller Kommando-tasten på Mac) til at vælge flere elementer.
Når du foretager valg og sender formularen, sendes værdien af de valgte muligheder til serveren. Selvom dataene sendes som et array, er det vigtigt, at når multiple bruges, skal hver valgt værdi være til stede i arrayet.
Option-elementet kan kun indeholde simpel tekst. HTML-kode som billeder eller links understøttes ikke inden i option-tags. Du kan dog tilpasse udseendet ved hjælp af CSS, såsom skrifttype eller baggrundsfarve.
Stilistiske justeringer, som skrifttype og farve, kan gøres med style-attributtet for optionerne. Dette er nemmere at implementere i en liste, der vises normalt, da du har mere kontrol over layoutet.
Afhængigt af browseren kan udseendet af select-elementer være anderledes. Nogle browsere kan f.eks. vise baggrundsfarven og teksten på dropdowns på en anden måde. Det er vigtigt at tage højde for dette, når du designer din formular.
Hvis du overvejer at tilføje billeder som valgmuligheder, bliver dette noget mere kompliceret med select. Det vil være klogt at ty til JavaScript eller eksterne UI-biblioteker, da du ikke kan inkludere almindelige HTML-elementer i option-tags.
Til implementering af et mere komplekst UI-element, hvor du har brug for fleksibel styling, måske en kombination af billeder og tekst, vil det være klogere at udvikle din egen dropdown eller liste eller ty til et eksisterende framework.
Samlet set tilbyder select-elementet en fremragende måde at vælge fra en liste på eller muliggøre flere valg. Det er dog vigtigt at huske kompleksiteten af stilvalgmulighederne og browserforskellene for at sikre en god brugeroplevelse.
Oversigt - Vejledning til oprettelse af webformularer med valgbare lister
I denne vejledning har du lært, hvordan du opretter valgbare lister i HTML ved hjælp af select-elementet. Fokus var på den praktiske brug af valgfelter, mulighederne for flere valg samt grundlæggende stylingindstillinger.
