Wednesday, February 12, 2025

Order Form Part 2: Adding the Form Itself

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" name="ofrm">
<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, and we’ve given it a name, ofrm, that we’ll be referring to later. 
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 640×480
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 start to add the ability for the form to calculate itself "on the fly".

 

 


Return to the previous step  | 
Proceed to the next step

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured