Drop-down selection boxes
In the last section, we looked at how to create a simple form, and we learned how to use text boxes for users input,
a submit button and a reset button.
In this section we'll look at some more components you can use in forms.
Now, let's look at the
<textarea> component. An example of a textarea is -
A textarea is a little like the text input component we saw in section one. The difference is that a textarea
can take more than one line of text, making it very useful for taking large amounts of text from a user.
To create a textarea, we use the
<textarea> tag to begin it, and its closing tag
to end it. Any text we place between the opening and closing tags appear in the textarea box when the
page loads up (although the user can delete this and enter something else). For example, the code -
- would look like this -
There are three main attributes of the
Please enter your comments here
<textarea> tag we need to learn. Firstly, as with the
text boxes we saw in section one, we need to assign each textarea a
name. This is then passed to the
server when the user submits the form, along with the value (what they entered), for processing.
We can also control the size of the textarea using the attributes
cols controls the width, that is the number of characters wide it will be.
rows controls the height, that is the number of lines of text high it will be. So, if we
wanted a textarea that was 20 characters wide and four lines high, we'd use the code -
<textarea name="test" cols="20" rows="four">
Enter your comments here.
Radio boxes are another useful form component. Radio boxes look like this -
It can be clicked 'on' and 'off'. Radio boxes are useful because they can be used to give the user a choice from a number
of items, like here. You can see from that example that when you click
on one, it will unselect any other that is currently selected.
To make a radio box, we use the
<input> tag, along with the
type attribute -
As with other form components, we need to give the radio a name, using (as you might have guessed) the
<input type="radio" name="example">
Radios are used to give the user a choice, so we'd use a group of them. Each of these needs to have the same name,
but a different value. We'll set the value using the
value attribute. So, for example, we're giving
the user a choice of web-sites, we could make a group of radios, separated with line-breaks (
making sure that each radio has the same name but a different value, e.g. -
If you enter the above code into Notepad and save it away, you should end up with something like this.
Choose your favourite web-site:<br>
<input type="radio" name=&website" value="Hotmail">Hotmail<br>
<input type="radio" name=&website" value="Google">Google<br>
<input type="radio" name=&website" value="Yahoo">Yahoo<br>
<input type="radio" name=&website" value="CNN">CNN<br>
Radio boxes are great for multiple choice options, but what if we just want to give the user one option, e.g.
'Yes or no?'? Well, that's where checkboxes come in handy. Here's an example checkbox -
A checkbox can be checked and unchecked. You might have seen a checkbox used if you were signing up for an email
account - perhaps 'Check this box if you don't want to receive news of special offers' or the like.
To make a checkbox, we again use the
<input> tag, and the
type attribute to specify
that we want a checkbox -
As with the radio button, we need to give the checkbox a name and value, which will be used when the
form is submitted -
Remember, when you're assigning values or names, make sure they are relevant to the information the form or form
You can use many checkboxes to ask the user for different pieces of information, like this.
<input type="checkbox" name="example" value="test">
Selection boxes are a very useful way of giving the user a list of options within a form. Selection boxes look like this -
You will probably have seen a selection box used for the navigation in a web-site at some point.
To create a selection box, we need to introduce two new tags -
<select> begins the selection box, and
</select> ends it. The select
item needs a name assigned to it, using the
Between those tags goes any of the options we want to give the user. To create an option, we use the
Each option needs a value, and then some text after the tag which will appear in the selection box.
<option> tag doesn't have to have a closing tag (i.e.
</option>), but it's good
practice to do so anyway.
For example, we might want to give the user a choice of soft drinks to choose from. We would use code like the following -
Which would look like this.
Choose your favourite drink - <br>
One more thing to look at is the
multiple attribute of the
<select> tag. Including this
attribute makes the selection box appear as a list box, and allows the user to select more than one item, by
either pressing Ctrl whilst clicking (on a PC), or by pressing Command and clicking (on a Mac).
So we could use this in the example we saw above -
- which would look like this.
Choose your favourite drinks (use Ctrl+Click to choose more than one, or Command+Click if you're using a Mac) - <br>
<select name="example" multiple>
We've covered many new tags in the two sections on forms. Practice, and experiment with them. Try making 'neater'
looking forms by placing them in tables to control their appearance. Next we'll look at frames.
Top of page -
Back to Forms (Part One) -
Next - Frames (Part One)