Building Better Web Forms

The Form Structure Elements:

As well as the actual input elements, there are some html tags which are used for structuring forms:

Label Tags

Each individual field should have a label. This allows the browser to associate that text specifically with that button or field. The label can be associated with the field in two ways.

1: The label has a for attribute which indicates the id of the field

<label for="text">Enter Text:</label>
<input name="text" id="text"/>

Or, and this is easier, but doesn't work as it should in Internet Explorer

2: The label has a for attribute which indicates the id of the field 

<label>Enter Text:<input name="text"/></label>

You can do both, and it is probably a good idea. The practical upshot of this is that when someone clicks on the label, the actual element is focused upon. This is useful for lists of checkboxes and radio buttons.

In the example below, i've put some extra padding and borders around the labels to give an idea how this works:

<label for="thing1" 
 style="border:1px solid gray; padding:10px;">
<input id="thing1" type="checkbox" name="thing1" value="1"/>
 Thing 1 
</label>

Fieldsets and Legends

Different parts of the form are seperated from each other using fieldset tags. Fieldsets are labeled using legend tags. These display slightly different from browser to browser, and can be difficult to style in Internet Explorer.

Your Details


Your Comments

Choose your Thing:

The Form Tag

Chances are you already know that your form as a whole should be surrounded by form tags. The form tag should indicate where the data is to be sent, and whether it is to be sent using get and post.

If you wish some scripting actions to occur before the form is posted (and possibly preventing it from being posted if the data is invalid), you add this to the onsubmit attribute. 

<form method="post" action="receipt.htm" onsubmit="alert('!');">

The code for the above form example showing use of input elements, labels, fieldsets and form tags is as follows:

<form method="post" action="tagsstructure.php" >

<fieldset><legend>Your Details</legend>

<p>
<label for="name">Name: 
<input name="name" id="name"/>
</label>
<br/>
<label for="email">Email: 
<input name="email" id="email"/>
</label>
</p>

</fieldset>

<fieldset><legend>Your Comments</legend>

<p>
<label for="comments">Comments:<br/>
<textarea rows="5" cols="50" name="comments" id="comments">
</textarea>
</label>
</p>

<p>Choose your Thing:<br/>
<label for="thing1" style="padding:10px;">
<input id="thing1" type="checkbox" name="thing1" value="1"/>
Thing 1 
</label>

<label for="thing2" style="padding:10px;">
<input id="thing2" type="checkbox" name="thing2" value="2"/>
Thing 2 
</label>	

<label for="thing3" style="padding:10px;">
<input id="thing3" type="checkbox" name="thing3" value="3"/>
Thing 3 
</label>	

<label for="thing4" style="padding:10px;">
<input id="thing4" type="checkbox" name="thing4" value="4"/>
Thing 4 
</label>	

<label for="thing5" style="padding:10px;">
<input id="thing5" type="checkbox" name="thing5" value="5"/>
Thing 5 
</label>	
</p>

</fieldset>

<input type="submit"/>
</form>