fieldset, autocomplete, inputmode & hints

Forms that guide people

Lesson 11 of 20 · 11 min · Module 3: Accessible, interactive HTML

A good form helps people finish quickly: the right keyboard appears on phones, the browser fills in known details, hints are read out with their field, and related choices are grouped under one question. All of this is plain HTML.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Group related choices with fieldset and legend
Connect hints to inputs with aria-describedby
Speed up filling with autocomplete and inputmode

The idea

A <fieldset> with a <legend> groups related controls, such as radio buttons, under one question. aria-describedby links an input to its hint. autocomplete values such as email, tel and postal-code let browsers and password managers fill fields, and inputmode chooses the on-screen keyboard.

<label for="code">Verification code</label>
<input id="code" inputmode="numeric" autocomplete="one-time-code">

01One question for a group

Screen readers announce the legend together with each radio button, so "Choose a plan, Pro, radio button" makes sense on its own. A paragraph above the buttons is not connected to them in any way.

02Hints that are heard

aria-describedby points to the id of the hint. When the email field receives focus, a screen reader reads its label and then the hint.

03Let the device help

autocomplete="email" offers saved addresses, and inputmode="numeric" shows a number pad without the problems of type="number", which drops leading zeros and adds spin buttons. Postal codes and card numbers are text made of digits, not numbers to calculate with.

<input autocomplete="postal-code" inputmode="numeric">
<input type="tel" autocomplete="tel">
<input type="password" autocomplete="current-password">

Your turn

1) Give the email hint id="email-hint", and give the email input aria-describedby="email-hint" and autocomplete="email". 2) Make the phone input type="tel" with autocomplete="tel". 3) Give the postal code inputmode="numeric" and autocomplete="postal-code". 4) Replace the "Choose a plan" paragraph with a <fieldset> around the three radio buttons and <legend>Choose a plan</legend>, and add required to the first radio button.

What the checks look for

The email field is described by its hint and can be autofilled
The hint has the matching id
The phone field shows a phone keypad and can be autofilled
The postal code shows a number keypad but stays text
The plan choice has a legend
All three plans are inside the fieldset
Choosing a plan is required

Try it in the editor →

Take this with you

Grouping, hints and autocomplete make forms faster and more accessible.

Go a little further

Add an error message with id="email-error" and reference both ids: aria-describedby="email-hint email-error".