The right control for each question

Introduction

The cheapest improvement you can make to a form is choosing the right control for each question. A date picker prevents impossible dates. A number box gives a phone user the number keypad. A radio group means no one has to guess what answers you accept.

How it works

Input types. input changes completely with its type:

A phone number and a card number should not be number. They are not quantities: the arrows make no sense, and a leading zero may be lost. Use tel, or text with inputmode="numeric".

Radio buttons share a name, and that is what makes them a group: choosing one clears the others. Each needs its own value, because that is what gets sent. With no value, a browser sends the word "on", which tells the server nothing.

Checkboxes are independent. An unticked box sends nothing at all. To tick one in advance, add checked. It is an example of a boolean attribute: its presence means true, and it needs no value.

select makes a drop-down of option elements. The value is what gets sent, and the text is what people see. textarea is for longer text, and unlike input, it has a closing tag, with its starting text between the tags.

fieldset and legend put a name on a group of controls. Without them, a screen reader announces "Yes, radio button" and the user has no idea what the question was.

Syntax

<input type="date" name="dob">
<input type="radio" name="size" value="s">
<select name="city"><option value="dhk">Dhaka</option></select>
<textarea name="note"></textarea>

Example

Line by line

1. fieldset and legend name the group "Size".
2. Both radio buttons have name="size", so that only one can be chosen.
3. checked selects Small from the start.
4. The checkbox is independent and sends gift=yes only when ticked.
5. select shows the words "Dhaka" and "Chattogram", but sends dhk or ctg.

Expected result

A boxed "Size" group where choosing Large clears Small, a Gift wrap tick box, and a drop-down list of cities.

In the real world

Checkouts use autocomplete values and suitable types so that phones can fill in addresses for people. Each unnecessary tap loses customers, so large shops measure and tune these details. On a phone, the difference between type="text" and type="email" is immediately visible on the keyboard.

Common mistakes

• Radio buttons with different names, which lets a user choose all of them.
• Forgetting value, so that the server only receives "on".
• Using number for a phone number.
• Using a select for two choices, when radio buttons would show them at once.

Best practices

• Use the most specific input type available.
• For two to five choices, prefer visible radio buttons.
• Always name a group with fieldset and legend.

Summary

Choosing the right control prevents errors and helps people on phones. Radio buttons are a group because they share a name, checkboxes are independent, select and textarea have their own elements, and fieldset names a group.

Mark lesson complete