Gebruik gerust labels
Veel forms bevatten checkboxen en radio-buttons om keuzes te maken. Op de meeste sites gebeurt er echter niets wanneer op het label wordt geklikt, want er wordt in de HTML code geen verband gelegd tussen beide. Toch is dit zeer eenvoudig!
Veel forms bevatten checkboxen en radio-buttons om keuzes te maken. Veel mensen, zowel beginners als gevorderden, hebben de neiging om op het label te klikken in plaats van op het widget (het widget is het kleine interface elementje, de checkbox of radio-button zelf). De widgets zelf zijn eerder klein, en het valt niet mee er met de muis naartoe te navigeren (omwille van Fitts’s Law). Op de meeste sites gebeurt er echter niets wanneer op het label wordt geklikt, want er wordt in de HTML code geen verband gelegd tussen beide.
Toch is dit zeer eenvoudig. De HTML specificatie voorziet in een speciaal daartoe bestemd element: label. Door deze tag toe te voegen kun je het label koppelen aan het widget, waardoor ook het label zelf clickable wordt.
Een voorbeeld van een non-clickable label:
Inderdaad. Er gebeurt niks. Hieronder vind je hoe het beter kan:
En dit is de zeer eenvoudige code voor dit mirakel:
<input type=”checkbox” name=”checkbox” id=”check”/>
<label for=”check”>Dit is het label. Klik me!</label>
De label tag wordt ondersteund door alle betere browsers, IE4+, NN6 en zelfs Opera. Verder is de tag perfect backwards compatible, wat betekent dat oudere browsers hem volledig negeren. Er is ook een oplossing met Javascript die ook op NN4 werkt, maar deze is ingewikkelder en niet langer de moeite waard.
