I dagens vejledning vil jeg vise dig, hvordan du kan gruppere muligheder i en valg- eller dropdown-liste. Gruppering af muligheder er særligt nyttigt, når du har et stort udvalg af valgmuligheder og gerne vil forbedre brugervenligheden af din webapplikation. Du vil lære de vigtigste attributter samt nogle best practices til effektivt at implementere grupperinger. Lad os dykke lige ned i det!
Vigtigste indsigter
- Når du opretter webformularer, er det vigtigt at sætte value-attributterne for option-elementerne korrekt for at sikre klarhed og brugervenlighed.
- Grupperingen af muligheder udføres med -elementet.
- Der er også måder at fremhæve og forududfyldning af valgmuligheder.
Trin-for-trin vejledning
Først vil vi sikre os, at du forstår grundlæggende om brugen af value-attributter. Disse attributter er valgfri, men jeg anbefaler, at du bruger dem. Hvis du ikke angiver værdier, bruges indstillingsteksten som værdi. Lad os se et eksempel.
Her kan du se, hvad der sker, når jeg vælger Apple-optionen uden at angive et value-attribut. Den viste tekst bruges til at sende værdien. Hvis jeg nu vælger Orange-optionen, sendes småbogstaverne 'orange' som værdi.
Derfor er min anbefaling klar: Brug altid value-attributtet og angiv dine interne betegnelser, f.eks. i små bogstaver. Hvis du ikke gør det, kan de sendte værdier være uoverskuelige og lidt meningsfulde.
Hvis du ønsker at forudvælge en bestemt værdi ved indlæsning af formularen, kan du bruge attributten valgt. Derved kan du f.eks. sætte Apple eller Jordbær som standard.
Nu vil vi fokusere på grupperingen af mulighederne. Dette gøres med optgroup-elementet. Lad os f.eks. sige, at vi ønsker at opdele en liste over frugter i to grupper. Jeg kalder dem blot frugter 1 og frugter 2.
Inden for denne gruppe kan vi tilføje de tilsvarende <option>-elementer som Apple, Orange og Strawberry. Du kan også oprette en anden gruppe, som også indeholder konkrete frugtvalgmuligheder.
Når vi har oprettet grupperne frugter 2, skal alt være godt struktureret og klart. En almindelig fejl er at forsøge at lukke et
Her kan du se, hvordan grupperingerne vises på brugergrænsefladen. Mulighederne inden for grupperne er typisk grå baggrund. Dette giver brugerne visuelle hints om, at de tilhører en bestemt kategori.
Nu kan du tilpasse layoutet af dine grupper yderligere. For eksempel kan du ændre skriftstørrelsen eller tekstmulighedernes vægt.
For at optimere udseendet kan du anvende CSS-styles. Hvis jeg f.eks. sætter font-size til 24px, ændres layoutet derefter, og visningen bliver farve- og størrelsesmæssigt fremhævet.
Det er vigtigt at vide, at du ikke kan tilpasse individuelle værdier mellem grupperne. Hvis du ændrer skriftstørrelsen i en gruppe, påvirker det også de andre muligheder inden for samme gruppe.
En meget nyttig funktion er muligheden for flere valg. Når du tilføjer attributten multiple, kan brugere vælge flere muligheder fra forskellige grupper ved at holde musetasten nede.
Så nu, efter at du ved, hvordan du opretter grupper af muligheder i en rullemenu, kan du gøre dine webformularer mere brugervenlige og intuitivt designede.
Oversigt
I denne vejledning har du lært, hvordan du grupperer muligheder i en dropdown-menu. Det korrekte fastsættelse af value-attributterne samt brugen af
