Labels, semantik og gruppering

Hvis du kun husker én ting: Hvert felt skal have en label, og det der hører sammen, skal grupperes.

Forbind labels og inputs

Et label skal fortælle brugeren, hvad et felt er til. Men det skal også være koblet rigtigt til feltet i HTML.

Den klassiske løsning er at bruge for-attributten på <label> og id-attributten på input-feltet:

<label for="email">Email</label>
<input id="email" type="email" />

Det giver to klare fordele:

• skærmlæsere kan lettere forstå sammenhængen
• brugeren kan ofte klikke på labelen for at aktivere feltet

Prøv det selv i denne øvelse:

Gruppér relaterede felter

Semantik handler om at bruge tags, der matcher indholdets betydning.

I formularer handler det blandt andet om at vælge de rigtige elementer og attributter, så browseren ikke kun ser “nogle bokse”, men faktisk forstår at det er en formular med felter, labels og grupper.

Når flere felter hører naturligt sammen, skal de ikke bare stå løst under hinanden.

Brug i stedet:

<fieldset>
  <legend>Choose your favorite superhero</legend>
  ...
</fieldset>

Det er især relevant ved radio buttons og checkboxes, hvor brugeren skal forstå at felterne hører til samme spørgsmål.

Prøv det selv i denne øvelse:

Giv felterne et navn

Hvis/når data senere skal indsamles fra formularen, skal felterne have et name.

<input id="email" name="email" type="email" />

name-attributten er det, der gør det muligt for browseren at sende dataene videre, når formularen bliver indsendt. Det er valgfrit, hvad du kalder det, men det skal være unikt for hvert felt, så dataene kan matches korrekt.

For radio buttons, der hører sammen, deler felterne normalt samme name, mens deres value er forskellig.

Tilføj name til felterne i denne øvelse: