HTML-formulieren: 4 best practices voor fieldset en label

HTML-formulieren zijn een onmisbaar onderdeel van elke website, maar ze werken zelden prettig. Ze leunen niet alleen op eigen elementen en attributen, ze vervagen ook de grens tussen statische inhoud en interactie met de gebruiker. Formulieren doorbreken vaak de manier waarop mensen verwachten met je site of applicatie om te gaan, en dat werkt frustrerend. Deze vier best practices helpen je als developer of designer om formulieren te bouwen die intuïtiever zijn en minder ergernis opleveren.

Geef je HTML-fieldsets een legend

Een fieldset zonder naam valt moeilijk te verdedigen. De code hierboven wordt beter als je de fieldset een titel geeft met het element legend. De legend komt op de rand van de fieldset te staan, die standaard een rand heeft.

html

<fieldset>
    <legend>Adresse de facturation</legend>
    <span>Nom</span><input type="text" name="nom"/>
    <span>Prénom</span><input type="text" name="prenom"/>
    <span>Adresse</span><input type="text" name="adresse"/>
    <span>Complément d'adresse</span><input type="text" name="adresse2"/>
    <span>Ville</span><input type="text" name="ville"/>
    <span>Département</span><input type="text" name="departement"/>
    <span>Pays</span><input type="text" name="pays"/>
</fieldset>

⚠️ Gebruik labels in plaats van spans in je HTML-formulieren

Er is niets mis met een span om je invoervelden te markeren, maar de tag label is daar van nature geschikter voor.

html

<fieldset>
    <legend>Adresse de facturation</legend>
    <label>Nom</label><input type="text" name="nom"/>
    <label>Prénom</label><input type="text" name="prenom"/>
    <label>Adresse</label><input type="text" name="adresse"/>
    <label>Complément d'adresse</label><input type="text" name="adresse2"/>
    <label>Ville</label><input type="text" name="ville"/>
    <label>Département</label><input type="text" name="departement"/>
    <label>Pays</label><input type="text" name="pays"/>
</fieldset>

Geef je labels het attribuut for

Met het attribuut for koppel je een <label> aan een <input>. De id van het invoerveld dat je wilt koppelen, moet gelijk zijn aan de waarde van for.

html

<fieldset>
    <legend>Adresse de facturation</legend>
    <label for="nom">Nom</label><input id="nom" type="text" name="nom"/>
    <label for="prenom">Prénom</label><input id="prenom" type="text" name="prenom"/>
    <label for="adresse">Adresse</label><input id="adresse" type="text" name="adresse"/>
    <label for="adresse2">Complément d'adresse</label><input id="adresse2" type="text" name="adresse2"/>
    <label for="ville">Ville</label><input id="ville" type="text" name="ville"/>
    <label for="departement">Département</label><input id="departement" type="text" name="departement"/>
    <label for="pays">Pays</label><input id="pays" ype="text" name="pays"/>
</fieldset>

Groepeer opties van een select met optgroup

optgroup is een weinig bekend element dat keuzes laat inspringen en ze een titel geeft. Let op: ook hier is het attribuut label wat het werk doet.

html

<select>
  <optgroup label="France">
    <option>Paris</option>
    <option>Lille</option>
    <option>Lyon</option>
  </optgroup>
  <optgroup label="Espagne">
    <option>Madrid</option>
    <option>Bercelone</option>
    <option>Valence</option>
  </optgroup>
</select>

Conclusie

Met deze tips structureer je je HTML-formulieren beter en geef je ze eenvoudiger vorm, zodat je gebruikers ze sneller doorhebben. Vond je dit artikel nuttig, lees dan ook mijn stuk over HTML-fouten die je beter vermijdt.

En mis je de basis van de taal nog, dan komt het onderdeel over formulieren in HTML leren terug op het duo <label for> / id en op het attribuut name, zonder welke een veld helemaal niets verstuurt.

HTML