fiskeben.dk

Alt for ofte når jeg skal udfylde en formular på nettet, ser jeg at man ikke har brugt <label> tagget rigtigt (eller ikke i det hele taget). Det ses specielt på radio- og checkboxes, hvor man er nødt til at klikke på selve elementet for at markere det. Bruger man <label> rigtigt, kan dette forbedre brugervenligheden i dine formularer betragteligt.

Her er et eksempel på en formular, hvor man ikke har gjort det godt nok:

Bananer:

Og her er et eksempel på en formular, hvor det er gjort rigtigt:

Bananer:

Bemærk hvordan du kan markere den nederste checkbox ved at trykke på teksten såvel som direkte på boksen. Det kan du ikke i den øverste. Dette medvirker til at det bliver meget lettere for brugeren at bruge formularen.

Metoden er ganske simpel, egentlig: <label> tagget skal kobles sammen med det form-element, det beskriver. Det gøres med “for” attributten på <label>. Der angiver man id’et på det element, som <label> beskriver. For eksempel:

<label for=”bananer”>Bananer:</label><input type=”checkbox” id=”bananer” name=”bananer” />

Mere skal der ikke til for at øge brugervenligheden på en formular!

Du kan også opnå samme effekt hvis du lægger input-elementet indeni label-elementet.