the <form> tag

The virtual lecture discussed what forms are and how they work at a basic level. Let's now think about all this in more detail, starting with the <form> tag. In some ways this is the most important tag of all as far as forms are concerned as without it, they won't appear on the page at all. At the simplest level, the <form> tag acts rather like a <table> or <ul> tag. That is, it acts as a "container" for other tags which place the form elements on screen: mainly <input> tags. Therefore, any given form on the screen will be bounded by opening and closing <form> tags.

However, unlike <table> and <ul> tags, you can safely place many other tags within the <form>. Even very simple forms will almost certainly have some text formatting tags within them, as there's no other way to get captions on your form elements. You might also use table tags to arrange the form on the screen. Even images can go between <form> tags. Realise that the <form> tag, then, acts as a container for form elements; it does not have any effect on the text which lies within it.

The example below might make this a little clearer. It will also serve as an example of a fully-fledged and (theoretically - the e-mail address is again false) functional form, to show you the complete <form> tag in action.

And here's the code; some tags and attributes have been omitted for clarity at this stage. Note the placing of the <form> tags is not absolutely crucial - they could have gone somewhere inside the table. What was crucial was ensuring that all four <input> tags lay between the <form> tags. If you ever place an <input> tag on your page, for any reason (including when you're using them to get buttons as links, for example), and the button or box doesn't appear, it is very likely that you have placed that tag outside a <form> tag.

<form action="mailto:drew@.leeds.ac.uk" method="post" enctype="text/plain">
<table>
<caption>A simple form</caption>
<tr><td><p>What is your name?</p>
<br /><input type="text" name="yourname" size="20" id="yourname" /></td>
<td><p>What is your sex?</p>
<p>Male<input type="radio" name="mf" value="m" id="mfm" /></p>
<p>Female<input type="radio" name="mf" value="f" id="mff" /></p>
</td></tr>
<tr><td colspan="2"><input type="submit" value="Send details" /></td>
</tr></table>
</form>

You can have more than one form on a page, but you cannot nest forms. If you try, you will cause a quantum paradox, resulting in an implosion that will destroy the universe. Actually, that probably won't happen, but browsers won't like your page much.

For more details on the <input> tags see the pages on input types and form buttons. As for that other guff in the <form> tag, that is all to do with processing the form. As you might guess, this is going to e-mail the details to my e-mail address, the simplest method of form processing.

Note that if all you want to do is stick form buttons or boxes on your page for reasons unconnected to actually getting data off the user - as when buttons are used as links - you still need the <form> and </form> tags as I've said, but they can be used without any of these other attributes. It is usually advisable to put a "dummy" action="" attribute in these tags as well.

Back to the top

Back to the menu for lesson 9