TL;DR
- En form bruges til at indsamle data fra brugeren.
- Webformularer driver mange af de vigtigste flows på nettet: login, søgning, køb og tilmelding.
- En god formular handler ikke kun om styling, men også om struktur og mening.
- Start med korrekt HTML. Det gør resten lettere.
Hvis du kun husker én ting: Start med en tydelig HTML-struktur, før du tænker på styling.
Hvad er en form?
En HTML-formular er et område på en side, hvor brugeren kan indtaste eller vælge data. Det kan være et login, en søgning, en checkout eller en tilmelding til et nyhedsbrev.
Det centrale er ikke bare, at siden “ser rigtig ud”. Browseren og hjælpemidler som skærmlæsere skal også kunne forstå, hvad hvert felt bruges til.
Hvorfor er forms vigtige?
Forms er ofte det sted, hvor brugeren faktisk interagerer med et site. Det er her, data bliver indsamlet og sendt videre.
Når en formular er uklar eller dårligt bygget, går det hurtigt ud over oplevelsen:
- brugeren bliver i tvivl om hvad der skal indtastes
- browseren kan hjælpe mindre med autofill og validering
- formularen bliver sværere at bruge med tastatur og skærmlæser
Anatomien i en simpel formular
I en helt enkel formular ser man ofte de samme dele igen og igen:
- en
<form>som samler felterne - et
<label>som fortæller hvad feltet betyder - et felt som fx
<input> - evt. en fejlbesked eller hjælpetekst
- en knap til at sende formularen
<form> <label>Email</label> <input type="email" /> <p>Please enter a value</p> <button>Sign up</button></form>Det er en god vane først at tænke: “Hvilke data skal brugeren afgive?” og derefter vælge de rigtige HTML-elementer.
Tænk i struktur før styling
På papirformularer bruger man overskrifter, grupper og tydelige felter. Det samme gælder på web.
Før du begynder at style, er det derfor en god idé at få styr på:
- hvilke felter der skal med
- hvad hvert felt betyder
- om brugeren skal skrive noget, vælge én ting eller vælge flere ting