Building An Order Form

By Vince Barnes

In the last part of this short series, we created a web page to hold our order form.  Now it's time to add the form itself to the page.

For our purposes, the form will be designed to illustrate the principles involved, rather than getting too complicated.  This doesn't mean that you couldn't use it as the basis of something you would like to create - only that you'd have to add a few more fields to have a real working form.  For example, when you take a look at this form, you'll see that we've been really skimpy on the contact information.  We just don't want to obscure the main points among a bunch of repetitive code.

To the code!  Here is the first part:

<form method="POST" action="submitted.html">
<p>Please tell us who you are (<font color="#FF0000">red</font> denotes required information):</p>
<table border="0" cellpadding="0" width="550" id="table1">
 

OK!  We've defined a form (for more about forms, see So, You Want A Form, Huh?  -- but, pay special attention to the editorial note at the front of the tutorial, and to the articles it links to!) with an action that, for the moment, will simply take us to another page.  We've also started a table with a width fixed at 550.  This is so that we can use the characteristics of a table to neatly format our form (for more about tables, see our Table Tutorials) and the fixed width will keep it looking good even on a 640x480 screen.

Next, we need all the form fields themselves.  First, we'll complete our table with the contact information fields:

<tr>
<td width="340" align="right"><font color="#FF0000">Name</font></td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="Name" size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right"><font color="#FF0000">Email</font>
(Your confirmation will be sent here): </td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="Email" size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Other Contact Info:</td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="OtherInfo" size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="200">&nbsp;</td>
</tr>
</table>
 

Then we'll start a new table to hold our item ordering fields:

<p>And tell us what you would like:</p>
<table border="0" cellpadding="0" width="550" id="table2">
 

and then, of course, add in the ordering fields themselves:

<tr>
<td width="250" height="31"><b>Item Description</b></td>
<td align="center" width="100" height="31"><b>Quantity</b></td>
<td align="right" height="31" width="60"><b>Price </b></td>
<td align="right" height="31" width="140"><b>Total</b></td>
</tr>
<tr>
<td width="250">Class &quot;A&quot; Widgets</td>
<td align="center" width="100">
<input type="text" name="qtyA" size="5" tabindex="5"></td>
<td align="right" width="60">1.25</td>
<td align="right" width="140">
<input type="text" name="totalA" size="12" tabindex="99"></td>
</tr>
<tr>
<td width="250">Class &quot;B&quot; Widgets</td>
<td align="center" width="100">
<input type="text" name="qtyB" size="5" tabindex="5"></td>
<td align="right" width="60">2.35</td>
<td align="right" width="140">
<input type="text" name="totalB" size="12" tabindex="99"></td>
</tr>
<tr>
<td width="250">Class &quot;C&quot; Widgets</td>
<td align="center" width="100">
<input type="text" name="qtyC" size="5" tabindex="5"></td>
<td align="right" width="60">3.45</td>
<td align="right" width="140">
<input type="text" name="totalC" size="12" tabindex="99"></td>
</tr>
<tr>
<td width="250">&nbsp;</td>
<td align="center" width="100">&nbsp;</td>
<td align="right" width="60">&nbsp;</td>
<td align="right" width="140">&nbsp;</td>
</tr>
<tr>
<td width="250">
<p align="right"><b>TOTALS:</b></td>
<td align="center" width="100">&nbsp;</td>
<td align="right" width="60">&nbsp;</td>
<td align="right" width="140">
<input type="text" name="GrandTotal" size="15" tabindex="99"></td>
</tr>
<tr>
<td width="250">&nbsp;</td>
<td align="center" width="100">&nbsp;</td>
<td align="right" width="60">&nbsp;</td>
<td align="right" width="140">&nbsp;</td>
</tr>
</table>
 

and finally, we'll complete our form with the requisite "submit" button, and provide a "reset" button for the convenience of our customers.  These buttons are also going to be confined by a table fixed at the same width as the other tables, so that they can be nicely aligned with the rest of our form:

<p>&nbsp;</p>
<table border="0" cellpadding="0" width="550" id="table3">
<tr>
<td width="563">
<p align="center">
<input type="submit" value="Submit" name="subButton" tabindex="50">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Reset" name="resetButton" tabindex="50"></td>
</tr>
</table>
</form>

 

Notice also the use of the "tabindex" attribute (see TABINDEX and a Couple of Other Form Tricks for more info) to ensure that the cursor moves around our form in a user friendly fashion, avoiding the "total" fields which we are going to use to display the results of "on the fly" calculations.  Note that when "tabindex" values are the same, the cursor jumps from field to field in the order they appear on the page.  I like to use this feature to create field groups, such that the cursor moves from section to section as I require, but from field to field within each section in their order of appearance.  In this way, I can change the order of fields within a section without messing up tabbing sequences, and can move sections around by using a global edit to alter the tabbing sequence

And there it is, again!  Our simple, basic web page is beginning to gain a little sophistication.  If you'd like to see the page as it now is, with the form in place, click here!

In the next step, we'll add the ability for the form to calculate itself "on the fly".




Page 2 of 4

Previous Page
1 2 3 4
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date