Overview of this Lesson

In this lesson you'll continue worthing with form input fields by learning to use check boxes, radio buttons, selection lists, and other input controls.


Before doing this tutorial, make sure you've gone through the Basic Forms tutorial and that you're comfortable with the form element and its attributes, along with basic <input> elements.


See the following reference material from MDN:

Further Reading

You should also have a look through Accessible HTML Form at the Web Standards Project.

Radio Buttons and Check Boxes

Check Boxes

A check box is used when you want to ask the user a question that requires a yes/no answer, or when you need to present the user with a list of options to choose from where more than one selection can be made. Examples:

Example 1:

Example 2:

What programming languages do you know?

In the first example, the user can check the box to answer "yes" and leave it unchecked to answer "no". In the second example, the user can select any of the boxes that apply. In fact, they could check all of the boxes, some of the boxes, or none of the boxes.

To create a check box, use the type attribute value of "checkbox":

<label for="chkPgmg">
  <input type="checkbox" name="chkPgmg" id="chkPgmg" value="on">Do you like programming?

With check boxes, when the form data is sent to the server, the checkbox value is only sent when the check box is checked. When the checkbox is unchecked, no data for the checkbox is sent to the server. The value attribute contains the value that this field will have when the check box is checked. Usually this is just set to "on" or "true", but you could use other values, too.

If you want a check box to be checked by default, add the attribute checked to the tag:

<label for="chkPgmg">
  <input type="checkbox" name="chkPrmg" id="chkPgmg" value="on" checked>Do you like programming?

The above example appears as:

The checked attribute is a boolean attribute: if included, the box is checked. If not included, the box is unchecked.

Note how important the <label> element is on controls like the check box: it's much easier to check because you can click on the prompt text!

Radio Buttons

Radio buttons (sometimes called option buttons by some Windows programmers) are used when you want to present the user with a list of choices from which only one selection is allowed. For example:

Favourite type of fruit:

Here, the user is only allowed to pick on choice from the list. Check boxes would not be appropriate for this input because they would allow the user to select more than one item. You can't be in more than one age range, so we use radio buttons.

Radio buttons have a type attribute value of "radio". You'll notice in the example that when you select one radio button, any other selected radio button becomes unselected. The group of buttons are treated like a single input field with one value, so each radio button in the group is given the same name:

  <legend>Favourite type of fruit:</legend>
  <label for="optApple">
    <input type="radio" name="fruit" id="optApple" value="apple" checked>Apples
  <label for="optOrange">
    <input type="radio" name="fruit" id="optOrange" value="orange">Orange
  <label for="optPear">
    <input type="radio" name="fruit" id="optPear" value="pear">Pear
  <label for="optBanana">
    <input type="radio" name="fruit" id="optBanana" value="banana">Banana
  <label for="optOther">
    <input type="radio" name="fruit" id="optOther" value="other">Other

As with check boxes, adding checked to an option will make that the selected option by default.

Note that every single radio button has the same name attribute value! This is an important part of how radio buttons work for 2 reasons:

  1. Radio buttons act as a group: only one radio button can be selected at a time. See what happens when you use radio buttons with different (or missing) name attributes:
    Favourite type of fruit:

    Notice that the radio buttons don't work properly! In order for them to act as a group, they must all have the same name.
  2. The radio button group is a single input field. When the field "fruit" is sent to the server, it will contain the value of the selected radio button. For example, if Banana is selected, then the server will receive fruit="banana".

Selection Lists

Lists are fields that contains a set of items the user can select from. Some lists are large enough to show a number of the items in the list, and these are what people often refer to when they talk about a List control. Some lists show only one item, and the user must open the list control in order to see the rest of the items. These are often referred to as "drop-down lists". Some call them "combo boxes", but a real combo box allows the user to add items to the list by typing them into the control, which is not what we're talking about here. Examples:

These two controls show the same data, but the first one is a "drop-down" style of list.

To create a list control, you use the <select></select> tags. If you want a drop-down list, that's all you need, but if you want the larger list, use the size attribute set to the number of rows you want. For example, the two select tags for the two examples above are:

Select a Lanaguage:<br>
  <select name="ddlLanguages"> 


Select a Lanaguage:<br>
  <select name="listLanguages" size="4"> 

In the second example, the list will have a scroll bar if the number of items in the list is larger than the value of the size attribute.

The items in the list are defined using the <option></option> tags:

<select name="ddlLanguages">
  <option value="C#">C#</option>
  <option value="C++">C++</option>
  <option value="D">Delphi</option>
  <option value="J">Java</option>
  <option value="VB">Visual Basic</option>

The value attribute of the option tag sets the value that will be returned to the server for this field when an item is selected. For example, if the user selects the "Java" item in the list, the field "languages" will have a value of "J" when the form is processed.

To have a default item selected, use the selected attribute in the option you want selected:

<select name="ddlLanguages">
    <option value="C#">C#</option>
    <option value="C++">C++</option>
    <option value="D">Delphi</option>
    <option value="J" selected>Java</option>
    <option value="VB">Visual Basic</option>

If you have a long list, you can group items using the <optgroup></optgroup> tags. The optgroup tag's label attribute defines the text to use in this option group. For example:

The code for the above example is:

<select name="lstAnimals" size="6">
  <optgroup label="Felines">
    <option value="cat">House Cat</option>
    <option value="tiger">Tiger</option>
    <option value="lion">Lion</option>
  <optgroup label="Canines">
    <option value="dog">Dog</option>
    <option value="wolf">Wolf</option>
  <optgroup label="Bovines">
    <option value="cow">Cow</option>
    <option value="yak">Yak</option>

Allowing Multiple Selections

There are many situations in which you might want a user to be able to select multiple items. For example, you might want the user to choose multiple animals in the list box examples above. To allow this, you include the boolean multiple attribute.

In order for a server-side program to process multiple values, you need to make sure your element's name attribute value is written with array syntax (adding square brackets):

<select name="ddlLanguages" multiple>
    <option value="C#">C#</option>
    <option value="C++">C++</option>
    <option value="D">Delphi</option>
    <option value="J" selected Java</option>
    <option value="VB">Visual Basic</option>

Other Form Elements

Text Areas

The text area is a multi-line text field that allows the user to type multiple lines of input. It doesn't use the regular input tag, but instead uses a set of <textarea></textarea> tags. The textarea tag has the following attributes:

An Example:

<textarea name="txtComments" rows="5" cols="35"></textarea>

The code above will show the following:

Try typing text in the box. It will wrap automatically. In addition, if you add more than 5 lines of text, the vertical scrollbar will automatically become enabled.

If you want something to appear automatically in the text area, you would type it between the opening and closing tags:

<textarea name="txtComments" rows="5" cols="35">...default text 
for text area goes here...</textarea>

The box below has text between the textarea tags:

HTML5 added several new input types; these types allow you to validate certian kinds of values, such as numbers, URLs, and email addresses.

Numeric Fields (Spinners)

A Spinner is a control that allows the user to select a numeric value by incrementing or decrementing. This is implemented in HTML5 using the type="number" input field.

In addition to type="number", you also need the following attributes:

<input type="number" min="5" max="10" value="5">

Try it out: you can enter a value by hand or you can increment/decrement from the default value provided. Note that this may appear differently in different browsers - in some browsers you don't see the increment/decrement arrows until you hover over the control or put your insertion point inside the field.

In this example, the user is only able to enter 5, 6, 7, 8, 9, or 10. Try manually entering other values and submitting.

See the Pen Forms: Spinner Input by Wendi Jollymore (@ProfWendi) on CodePen.

Email and URL Fields

<label for="txtEmail">Email:
    <input input type="email" required name="txtEmail" id="txtEmail">
  <label for="txtUrl">URL:
    <input type="url" required name="txtUrl" id="txtEmail">

The email field looks for a valid email address, although each browser has a different definition of what that is. In Chrome, you just need something@something, but in Opera, just an simple @ symbol will suffice. Similarly, URL usually only requires http:// or https:// but some browsers only require some text followed by a colon. If you want to add stricter validation, you would need to add the pattern attribute.

Accessible Forms

There are a number of extra things you can add to your markup to improve and enhance your form interface. For example, you can change the tab order, add field labels, and put borders around groups of elements using fieldset and legend tags.

Setting Tab Order

A form's tab order refers to the order in which a user will move from field to field by pressing the tab key. Having a tab order that is logical and convenient makes it easy to fill out forms with multiple fields. If the user has to grab the mouse and click on the next field all the time, they can get annoyed. For example, try and fill in the four fields below:

Filling out these four simple fields is awkward if you are tabbing from one field to the next, because the tab order is all over the place. To make it easier for your user to fill out large forms, use the tabindex attribute. For each control you want included in the tab order, set the tabindex attribute to a value starting with 1, and counting up. For example, the first field will have tabindex="1", the second field tabindex="2", etc:

<label for="txtFirst">First Name: 
    <input type="text" name="txtFirst" id="txtFirst" tabindex="1">
  <label for="txtLast">Last Name: 
    <input type="text" name="txtLast" id="txtLast" tabindex="3">
  <label for="txtMid">Middle Name: 
    <input type="text" name="txtMid" id="txtMid" tabindex="2">
  <label for="txtNick">Nick Name: 
    <input type="text" name="txtNick" id="txtNick" tabindex="4">

Using Field Labels

This is really just a review of what we've talked about already regarding labels.

When placing input controls on a page, you'll obviously want prompts near each control so that the user knows that goes in the field. In the Tab Order example, we used just plain text in front of the text fields. Alternatively, you can use a field label. Field labels are more accessible to visually impaired users because they are associated with a particular input field and therefore better understood by special software, such as a "screen reader". In addition, a field label can make it easier to use certain controls, such as radio buttons. When you experiment with field labels, you'll notice that you can click on the label to put the focus on the input field associated with that label. This is particularly handy for small controls like radio buttons and check boxes, especially for those users that have difficulty seeing the control or using a mouse to click the control.

A field label is created using the <label> tag. There are a few ways to create and use field labels, but there are two specific techniques that are preferred. The most important thing is that the field label is assigned or linked to a specific input element. You can do this by assigning an element to a field label using the for attribute or by nesting the input element inside the label element.

Using the FOR Attribute

The <label> tag has an attribute for="" that identifies the input field that this label is associated with. The value of this attribute should be the id attribute value of the control the label should be paired with (not the name attribute). The text that is contained in the label goes between the opening and closing label tags:

<label for="txtName">Your Name: </label>
  <input type="text" id="txtName" name="txtName"><br>
  Your Gender: <br>
  <input type="radio" name="gender" id="male">
  <label for="male"> Male</label><br>
  <input type="radio" name="gender" id="female">
  <label for="female"> Female</label>

Your Gender:

If you try clicking on the label of the radio buttons, you'll find that they act as if you clicked the radio button itself! This effect is caused by using the id attribute to differentiate between the two controls for the labels. Similarly, to put your cursor in the name text field, you can click the label text.

Nesting Label and Input Elements

You can achieve the same results by nesting the input element inside the label. This is the preferred method, because it allows you easier access to the input element in a language like JavaScript (which you'll learn in the second Web course).

This technique involves simply nesting the input element inside the label element like so:

<label for="txtName">Your Name: 
    <input type="text" id="txtName" name="txtName">
  Your Gender: <br>
  <label for="male">
    <input type="radio" name="gender" id="male">
  <label for="female"> 
    <input type="radio" name="gender" id="female">

Using Fieldset and Legend Elements

Sometimes it's helpful to visually group your controls on the page:

Favourite Colour:

Favourite Animals:

The form controls above are displayed using nested DIV elements, so it looks somewhat organized, but it can be better.

Fieldsets are borders that you can place around a group of controls using the <fieldset> tags. Additionally, they aid screen readers in reading groups of controls like radio buttons and check boxes. To use a fieldset, nest the group of input fields inside the opening and closing <fieldset> tags:

The code (which you might notice uses some in-line CSS) for the fieldset above is:

<fieldset style="display: inline-block; border-color: red; padding: 7px;">
    <label for="txtFood">Favourite Food: </label>
    <input type="text" id="txtFood" size="25"><br>
    <label for="txtBev">Favourite Beverage: </label>
    <input type="text" id="txtBev" size="25">

To add a label to the border, add the <legend> tag. This tag is also used by screen readers, which will read the text inside the legend tag in front of each option inside, for example "Favourite Colour, Blue" and "Favourite Colour, Green":

Favourite Colour

The code used to produce the above elements is:

<fieldset style="width: 20%; padding: 0px 0px 7px 7px;">
     <legend style="font-weight: bold; padding: 5px 0px;"> Favourite Colour </legend>
     <input type="radio" name="faveColour" value="blue" id="blue">
     <label for="blue"> Blue</label><br>
     <input type="radio" name="faveColour" value="green" id="green">
     <label for="green"> Green</label><br>
     <input type="radio" name="faveColour" value="red" id="red">
     <label for="red"> Red</label>