Chapter 7: Working With Forms

Google

Designing forms in HTML

Here's the HTML code that creates the form you just saw:

<p align="center"><br>
<H3>EXAMPLE ORDER FORM:</H3><br>
<FORM method="POST" action="ad_proc.php">
<table border="0" width="100%">
<tr>
<td width="250"><b><font face="Arial"> Basic Information:</font></b></td>
<td width="350"><font face="Arial">( <b>*</b> Required Information )</font></td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* First Name: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="fname" size="30" maxlength="15"></font></td>

</tr>
<tr>
<td width="250">
<font face="Arial"><b>* Last Name: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="lname" size="30" maxlength="20"></font></td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* Address: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="address" size="30" maxlength="60"></font></td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* City: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="city" size="30" maxlength="40"></font></td>
</tr>
<tr>
<td width="250"><font face="Arial" ><b>* State / Province: </b></font>
</td><td width="350"><font face="Arial"><input type="text" name="state" size="30" maxlength="20"></font></td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* Zip: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="zipcode" size="30" maxlength="10"></font></td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* Country: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="country" size="30" value="USA" maxlength="60">
</font></td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* Email: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="email" size="30" maxlength="48"></font></td>
</tr>
<tr>
<td width="250">
<font face="Arial"><b>* Phone: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="phone" size="30" maxlength="20"></font></td>
</tr>
<tr>
<td width="250">
<font face="Arial"><b> Company: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="company" size="30" maxlength="60"></font></td>
</tr>
<tr>
<td width="250">
<font face="Arial"><b> Fax: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="fax" size="30" maxlength="20"></font></td>
</tr>
<tr>
<td width="250"><b><font face="Arial">Ad Information:</font></b></td>
<td width="350"> </td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* Quantity: </b></font></td>
<td width="350"><font face="Arial"><input type="text" name="quantity1" size="3"></font></td>
</tr>
<tr>
<td width="250"><font face="Arial"><b>* Ad Type:</b></font></td>
<td width="500"><font face="Arial"><b>
<input type="radio" name="adtype" value="Regular" checked> Regular Classified Ad
<input type="radio" name="adtype" value="Sponsor"> Top Sponsor Ad
<input type="radio" name="adtype" value="Solo"> Solo Ad</b></font></td>
</tr>
</table>
<div align="center"><table border="0" width="90%">
<tr><td width="100%" height="50"><div align="center"><p><b>
<input type="submit" value="Click Button To Begin Order Processing">
</b></p></div></td></tr>
<tr><td><b>After you press the button, the computer will pause as it
processes your order. Please do not hit the button twice, as it is
normal for the computer to pause for a few seconds as it processes
your order.</b><br><br></td></tr>
<tr><td align="left"><b>Note: Due to intermittent server problems, you
may sometimes get an "Error 500" screen. If this happens, simply press
your browser's "BACK" button. You'll return here with all your information
intact. Then click the button again to submit your order.</b><br><br></td>
</tr></table></div>
</FORM>
</p>

Look at the very first line of the FORM. The first thing you should notice is that the form uses the "POST" method. There are two methods available, GET and POST. Don't use GET; it can cause a whole bunch of security problems. The second thing to observe is action="ad_proc.php". This indicates what will happen when the "Submit" button is clicked.

To run a script when the form is submitted, you'll put the path to the script here. Most times you can use a relative path, such as /cgi-bin/my_script.php, but sometimes the path must be absolute (complete and unambiguous). Do that only if you have to! If you move the file to a new server or domain (or to a different directory on the same server) you'll have to change any absolute paths.

Note: for HTML files, use a relative path whenever possible. It's a real time-saver if you move things around on your site.

Asking for user input

Now, look for any lines beginning with the word "input". In each of these, there's a "type" given. Inputs of type text display a one-line text box used for items like name or email address. Inputs of the radio button or checkbox types allow selection of one or more items from a limited set of choices. Another input type, not shown in this example, is "select", which produces a drop-down list. (See an HTML reference book or tutorial for instructions on using this common input.)

Another common input type is TEXTAREA; it won't have the word "input" inside the tag but it is an input anyway. Inputs of this type display a box where you can type in several lines of text. You can specify the width and height of the box, too.

These inputs are all things the user can type in or select. There are other inputs, of type hidden, which the user normally doesn't know about. They are not really well hidden. They just don't display as part of the Web page. Click on View Source to see the code of a Web page and they are perfectly visible.


Checking and validating the inputs

There are two issues here. First, did the user enter all the items you require? Second, are the values they entered reasonable - and safe? Whoa! Safe?? Yes, you heard me. If a malicious person can enter system commands in a form field, they could do serious damage to your site! For example, they could send the contents of your password file to their email address and gain complete access to your system. They could delete all your files, making your site vanish in an instant.

Pretty scary stuff...isn't it? But don't panic! We have solutions. First, let's think about making sure we get data in all the form fields that we feel are vital. You could use JavaScript to validate each field. But maybe the visitor's browser can't process JavaScript. Or maybe it can but they've disabled it. Some people do that because it's possible for JavaScript to do things the user won't like.

So here's my plan: have the script check all the required fields for empty values. If a required field is empty, call the form back up with an error message to the user about which fields they can't leave blank. I'll show you how to do that a little later when I give you examples of useful code.

Previous Page   Table of Contents   Next Page

Copyright © 2004 Steve Humphrey