Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Advanced
square Forms (Part One)
Square Forms (Part Two)
Square Frames (Part One)
Square Frames (Part Two)
Square Entities
Square Meta tags
Square Search engines
Square Publishing
Square Conclusion
 
Textareas
Radio boxes
Checkboxes
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.

Textareas

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 </textarea> 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 -
<textarea>
Please enter your comments here
</textarea>
- would look like this -
There are three main attributes of the <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 and rows. 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.
</textarea>

Radio boxes

Radio boxes are another useful form component. Radio boxes look like this -
A radio box
A radio box
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 -
<input type="radio">
As with other form components, we need to give the radio a name, using (as you might have guessed) the name attribute -
<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 (<br>), making sure that each radio has the same name but a different value, e.g. -
<form>
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>
</form>
If you enter the above code into Notepad and save it away, you should end up with something like this.
Checkboxes

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 -
Check me!
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 -
<form>
Click here:<br>
<input type="checkbox">
</form>
As with the radio button, we need to give the checkbox a name and value, which will be used when the form is submitted -
<form>
Click here:<br>
<input type="checkbox" name="example" value="test">
</form>
Remember, when you're assigning values or names, make sure they are relevant to the information the form or form component contains! You can use many checkboxes to ask the user for different pieces of information, like this.

Drop-down select boxes

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> and <option>. <select> begins the selection box, and </select> ends it. The select item needs a name assigned to it, using the name attributes. Between those tags goes any of the options we want to give the user. To create an option, we use the <option> tag. Each option needs a value, and then some text after the tag which will appear in the selection box. The <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 -
<form>
Choose your favourite drink - <br>
<select name="example">
<option value="CocaCola">CocaCola</option>
<option value="Pepsi">Pepsi</option>
<option value="7-Up">7-Up</option>
<option value="Fanta">Fanta</option>
</select>
</form>
Which would look like this.
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 -
<form>
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>
<option value="CocaCola">CocaCola</option>
<option value="Pepsi">Pepsi</option>
<option value="7-Up">7-Up</option>
<option value="Fanta">Fanta</option>
</select>
</form>
- which would look like this.

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.

TopTop of page - BackBack to Forms (Part One) - Next - Frames (Part One)Next

Introduction - The Basics - Moving On - Advanced - Glossary - Reference