Jordan Finneran

Posted on Mar 15, 2021 • Edited on Mar 18, 2021 • Originally published at jordanfinners.dev

Organise your forms with fieldset

#webdev #javascript #html #beginners

Intro
Fieldset
Example
Summary

Intro

Love them or loathe them forms are a critical part of most websites.

But what can we do to make them more organised and improve the user experience?

Introducing, fieldset a way to group inputs into logical containers.

First thing first, before we jump in, we need to ensure that all your inputs have a appropriate label and attributes.

It's a whole other blog post about why we should do this for accessibility and attributes for usability, but here a quick example:

<label>Mention this post from your site:
    <input type="url" name="source" placeholder="https://example.com" required="">
</label>

Or you can label your input this way if you prefer:

<input id="source" type="url" name="source" placeholder="https://example.com" required="">
<label for="source">Mention this post from your site:</label>

Now we've dipped our toe into forms and inputs, let's have a look at fieldset.

Fieldset

Here is a form on a website asking our customer about their profile and address:

<form class="example">
    <label>What's your name?
        <input type="text" name="name" placeholder="John Smith" required="">
    </label>
    <label>What's your age?
        <input type="number" name="age" placeholder="26" required="">
    </label>
    <label>What is the first line of your address?
        <input type="text" name="address1" placeholder="2 Some Lane" required="">
    </label>
    <label>What city do you live in?
        <input type="text" name="city" placeholder="London" required="">
    </label>
    <label>What is your postcode?
        <input type="text" name="postcode" placeholder="ABC 123" required="">
    </label>
</form>

This isn't too bad at the moment, but you can quickly imagine this form getting much more lengthy!

We could split the form up into chunks and take the user through multiple steps, which is also a good way to solve this issue.
But we can also organise the form into logical groups, making it easier for the user to navigate.
This is where fieldsets come into their own!

<form class="example">
    <fieldset>
        <legend>Profile</legend>
        <label>What's your name?
            <input type="text" name="name" placeholder="John Smith" required="">
        </label>
        <label>What's your age?
            <input type="number" name="age" placeholder="26" required="">
        </label>
    </fieldset>
    <fieldset>
        <legend>Address</legend>
        <label>What is the first line of your address?
            <input type="text" name="address1" placeholder="2 Some Lane" required="">
        </label>
        <label>What city do you live in?
            <input type="text" name="city" placeholder="London" required="">
        </label>
        <label>What is your postcode?
            <input type="text" name="postcode" placeholder="ABC 123" required="">
        </label>
    </fieldset>
</form>

Easy!! Nice and organised into logical groups. The fieldset legends are also picked up by screen readers and accessibility tools to give much greater context to the form.

It also has one really powerful attribute you can use:

Disabled

You use this attribute to disable whole sections of the form!
This makes it a really powerful tool to control the flow of your form.
For example, if you want to look up a users address using an autocomplete tool, and then fill in the form for them or let them complete it manually if they can't find a match. You can control this using the fieldset disabled attribute, so you enable the inputs when ready.

<fieldset disabled="">
    <legend>Address</legend>
    <label>What is the first line of your address?
        <input type="text" name="address1" placeholder="2 Some Lane" required="">
    </label>
    <label>What is the second line of your address?
        <input type="text" name="address2" placeholder="2 Some Lane" required="">
    </label>
    ...
</fieldset>

Example

Here is an example HTML form, as you can see it's nicely organised and really clear about what the form needs from the user.

As an example, we've disabled the address fieldset.

This is without any real styling, but you can see how to style it here.

<form>
    <fieldset>
        <legend>Profile</legend>
        <label>What's your name?
            <input type="text" name="name" placeholder="John Smith" required="">
        </label>
        <label>What's your age?
            <input type="number" name="age" placeholder="26" required="">
        </label>
    </fieldset>
    <fieldset disabled="">
        <legend>Address</legend>
        <label>What is the first line of your address?
            <input type="text" name="address1" placeholder="2 Some Lane" required="">
        </label>
        <label>What city do you live in?
            <input type="text" name="city" placeholder="London" required="">
        </label>
        <label>What is your postcode?
            <input type="text" name="postcode" placeholder="ABC 123" required="">
        </label>
    </fieldset>
</form>

Summary

In summary, fieldset is a really powerful tool to control the flow of your forms, add more context and improve accessibility! Wins all around!

It can really help break up large forms into simpler chunks and make them easier to fill in.

Bonus

They can also be used around radio groups to improve the user experience and give context about what the radio options are for. Here's a quick example:

<fieldset>
    <legend>Choose your favorite monster:</legend>
    <label for="kraken">Kraken
        <input id="kraken" type="radio" name="monster" value="kraken">
    </label>
    <label for="sasquatch">Sasquatch
        <input id="sasquatch" type="radio" name="monster" value="sasquatch">
    </label>
    <label for="dragon">Dragon
        <input id="dragon" type="radio" name="monster" value="dragon">
    </label>
</fieldset>