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.
Pre-Requisites
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.
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:
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?
</label>
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?
</label>
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:
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:
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:
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:
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.
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>
and
Select a Lanaguage:<br>
<select name="listLanguages" size="4">
...
</select>
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:
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:
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:
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):
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:
rows="n"
The number of rows the text area should display.
cols="n"
The width of the text area in characters (like
the size attribute for text boxes).
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:
min="n" - the minimum number allowed in the field
max="n" - the maximum number allowed in the field
step="i" - the increment value (how much to add/subtract
when the user manipulates the control); the default is 1 so if
you want to step by 1, just leave this out
<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.
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:
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:
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:
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:
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":