HTML Checkboxes, Radio Buttons and Select Form Fields

Learn how to add checkboxes, radio buttons, and 'select' menus to HTML forms.

This tutorial takes a look at three HTML form fields that allow your visitors to choose from a list of options: checkboxes, radio buttons, and select menus.

Find out how to create HTML forms in our HTML forms tutorial.

Checkboxes

HTML checkboxes are simple fields that can be toggled on or off with a mouse click. A checkbox can have only one value — for example, "yes" or "true".

These fields are great for allowing the user to specify a single item of data — for example, whether they want to receive your newsletter or not, or to indicate that they have read your terms and conditions.

The checkbox field takes the format:


<input type="checkbox" name="xxxx" value="xxxx" checked="checked">

The name attribute is the name of the field (for example, "newsletter"). You can specify multiple checkboxes all with the same name, in which case they will belong to the same group. When the form is submitted, the values of all the checkboxes will be sent using the same field name.

The value attribute specifies the value that will be submitted if the user checks the box. If the user clears the box (so that it has no check mark in), then a null (empty) value will be submitted.

The checked attribute, if present, will display the checkbox already selected. If checked is not present in the tag, the checkbox will be displayed empty.

HTML checkbox example:


Would you like to be added to our mailing list?
<input type="checkbox" name="mailing_list"
value="yes" checked="checked"> Yes

Would you like to be added to our mailing list? Yes

Radio buttons

Radio buttons are similar to checkboxes, except that only one radio button in a group can be selected at any one time. (As with checkboxes, a radio button group is a collection of radio buttons with the same name attribute.)

Radio buttons are useful for getting a user to pick from a choice of options. (If you have a lot of options, consider using a menu instead.) The radio button tag has the same attributes as the checkbox element:


<input type="radio" name="xxxx" value="xxxx" checked="checked">

The name attribute is the name of the field (for example, "favourite_colour"). You can specify multiple radio boxes all with the same name, in which case they will belong to the same group. Only one radio button in the group can be selected at any one time.

The value attribute specifies the value that will be submitted if the user selects this radio button.

The checked attribute, if present, will display the radio button already selected. If checked is not present in the tag, the radio button will be displayed empty.

Radio button example:


What is your favourite colour?
<input type="radio" name="favourite_colour"
value="red" checked> Red
<input type="radio" name="favourite_colour"
value="orange"> Orange
<input type="radio" name="favourite_colour"
value="pink"> Pink

What is your favourite colour? Red Orange Pink

HTML select fields

select fields, or "menu" fields, are created with the HTML select element. They allow the user to select one or more items from a list of available options. A select menu takes the format:


<select name="xxxx" size="xxxx" multiple>
<option value="xxxx" selected="selected">Option Text</option>
<option value="xxxx">Option Text</option>
...
</select>

The HTML <select></select> tags define the menu. The name attribute is the name of the menu (for example, "favourite_sport").

The size attribute specifies how many menu items will be displayed at once. If this attribute is not present or is set to 1, then a drop-down box will be displayed.

The optional multiple attribute, if present, will allow the user to select more than one option in the list by holding down the Shift or Control keys.

Inside the <select></select> tags, you place one or more HTML <option> elements. Each <option> element represents an item in the menu. The value attribute is the value that will be submitted if the user selects this option. The optional selected attribute will pre-select this option when the form is first displayed.

In between each <option></option> element, you can place the text label that you would like to be displayed for that option. Note that the text label does not have to be the same as the option's value attribute. The text label is not submitted with the form; it's just to guide the user.

HTML select example 1: Drop-down menu


What is your favourite sport?
<select name="favourite_sport" size="1">
<option value="all" selected="selected">I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>

What is your favourite sport?

HTML select example 2: 3-line list box


What is your favourite sport?
<select name="favourite_sport" size="3">
<option value="all" selected="selected">I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>

What is your favourite sport?

Enhancing select menus with option groups

Option groups are great when you have a select menu with a lot of options. Just as fieldsets help to group form fields into logical sections, option groups let you classify options within a menu.

Let's say we have an online store that sells 3 types of toys — rattles, teddy bears and balls — and each toy comes in different options. We could have all these variants in the one menu as follows:

It works, but it's a bit hard to read. Let's use option groups to classify the options by the type of toy:


<select name="toy">
  <optgroup label="Rattles">
    <option>Blue rattle</option>
    <option>Green rattle</option>
    <option>Stripy rattle</option>
  </optgroup>
  <optgroup label="Teddy bears">
    <option>Humphrey bear</option>
    <option>Cyril bear</option>
    <option>Janet bear</option>
  </optgroup>
  <optgroup label="Balls">
    <option>Soft ball</option>
    <option>Beach ball</option>
    <option>Spiky ball</option>
  </optgroup>
</select>

And here's how it looks:

That's better! Now we can visually differentiate between the different product types. Much easier to use.

Other types of HTML form fields

Now that you've learnt about HTML checkboxes, radio buttons and select menus, find out about:

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page