HTML forms: 4 best practices for fieldsets, labels and select

HTML forms are an essential part of any website, yet they often feel awkward to work with. Not only do they rely on specialised elements and attributes, they also blur the line between static content and user interaction. Forms frequently break the way people expect to interact with your site or application, which makes them frustrating to use. These four best practices will help you, as a developer or a designer, build forms that are more intuitive and less irritating for your users.

Give your HTML fieldsets a legend

A fieldset without a name is hard to justify. We can improve the markup above by titling the fieldset with a legend element. The legend sits on the border of the fieldset, which has a border by default.

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>

⚠️ Use labels rather than spans in your HTML forms

There is nothing wrong with using a span to mark up your inputs, but the label tag is the natural fit for the job.

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>

Give your labels a for attribute

The for attribute is what ties a <label> to an <input>. The id of the input you want to link to has to match the value of 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>

Group select options with optgroup

optgroup is a little-known element that indents and titles groups of choices. Note that, once again, the label attribute is what does the work.

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>

Conclusion

With these tips your HTML forms should be better structured and easier to lay out, so your users can make sense of them. If you enjoyed this article, have a look at my piece on HTML mistakes to avoid.

HTML