Example HTML Form

Now that we've covered just about everything we need to know about creating an HTML form, let's put it all together to see just how powerful they can be. We're also going to combine the form with an HTML table; this will give us more control over the presentation of the form, making it a bit more attractive. In order to do this we will use one table row for each form input.

The example demonstrates how you could use an HTML form to take a visitor's credit card details for buying an item from your website. This is a good example because it allows us to make use of all of the form input types we have learned about. There's quite a bit of code to digest but don't be daunted by it - it's all very simple stuff when you take each piece on its own, so just work through it bit by bit, and feel free to refer back to any other pages if you need help on anything.

<!-- Start a table for the layout of our form -->
<table>

<!-- Begin our form -->
<!-- Note the action attribute is blank in this example -->
<form action="" method="post">

<!-- Our first table row contains the words "First Name" and a text input box -->
<tr>
<td>First name:</td>
<td><input type="text" name="firstname" size="20" /></td>
</tr>

<!-- input for Last Name -->
<tr>
<td>Last name:</td>
<td><input type="text" name="lastname" size="20" /></td>
</tr>

<!-- Text area for delivery address -->
<tr>
<td>Address:</td>
<td><textarea cols="30" rows="5"></textarea></td>
</tr>

<!-- Credit card type is selected from a list -->
<tr>
<td>Credit card type:</td>
<td>
<select name="cctype">
<option value="Visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="amex">American Express</option>
</select>
</td>
</tr>

<!-- We can use a password field to obscure credit card number -->
<tr>
<td>Credit card number:</td>
<td><input type="password" name="ccnumber" size="20" /></td>
</tr>

<!-- Use radio buttons to only allow one choice of shipping -->
<tr>
<td>Shipping:</td>
<td>
<br />
<input type="radio" name="shipping" value="overnight" />Overnight<br />
<input type="radio" name="shipping" value="fedex" />Fedex<br />
<input type="radio" name="shipping" value="standard" />Standard<br />
<input type="radio" name="shipping" value="economy" />Economy<br />
</td>
</tr>

<!-- The user can check as many or as few options as they like -->
<tr>
<td>Options:</td>
<td>
<br />
<input type="checkbox" name="insurance" value="yes" />Postal insurance<br />
<input type="checkbox" name="giftwrap" value="yes" />Gift wrapped
</td>
</tr>

<!-- Add our submit and reset buttons -->
<tr>
<td><input type="submit" value="Confirm Order"></td>
<td><input type="reset" value="Reset"></td>
</tr>

<!-- Remember to close the form and table -->
</form>
</table>

Phew! There's quite a lot of code in there to work through, but hopefully it all seems fairly clear to you. If not then don't worry too much - keep experimenting and creating your own forms, you'll soon get the hang of it.

Here's what our completed HTML form looks like. The information won't actually be saved so feel free to mess about with it all you want.

First name:
Last name:
Address:
Credit card type:
Credit card number:
Shipping:
Overnight
Fedex
Standard
Economy
Options:
Postal insurance
Gift wrapped