Working with HTML Forms

 

Introduction.  Now we get to one of the most important ways to interact with users.  I will do a little survey of HTML form syntax.  Then we will work an example.

The following table contains a quick survey of the major form controls.  It doesn't say much about the large variety of other options that can be set within each tag.

 

 

Control Type

Syntax

Description
Text Box

<INPUT  TYPE=TEXT  NAME=____>

 Use when you want the user to enter a string of characters or a number.  You can also set the size of the box among many other things.

This can also be type="password" if you want it to not display what the user types as they type it.
Text Area <TEXTAREA  NAME=____></TEXTAREA> Use when you want the user to enter a longer string of characters such as a message.

You can also set the column width and row height.
Select Box <SELECT  NAME=____ >
             <OPTION  VALUE="      "></OPTION>
             <OPTION  VALUE="      "></OPTION>
           ...
             <OPTION  VALUE="      "></OPTION>
</SELECT>                        		Use when you want to restrict the user to selecting an item in a set of acceptable answers.  Each option in the List box is determined by the <OPTION> tag.  You can also influence how many elements appear on the form before the user selects the control.  Even though there may be ten items in the list, it can appear either as a combo box with one item showing or a list box with all ten items showing.
Check Box <INPUT  TYPE=CHECKBOX  NAME=____   > Use anytime you have one or more binary options that can be mixed and matched.  If they are in a related group presume that more than one can still be checked.  You can set up a default value with a CHECKED entry at the end in the tag..
Radio Buttons <INPUT  TYPE=RADIO  NAME=____  VALUE=____ > Use when you have a set of options that are mutually exclusive.  That is, only none or one of the options can be selected.  All radio buttons with the same NAME are in the grouping.  The VALUE is used to identify each button in the group.
Submit Button <INPUT TYPE=SUBMIT> This puts a command button on the form that the user should press to submit the form for processing.  This will send the information gathered from the user to somePage.asp.

 

 

While the following example is quite artificial I am working it this way to make certain we have a script that makes use of all of these form controls.

First you need to develop the HTML form page all_form.html.  This page has an example of at least one of each of the controls listed above.

 

<html>
<head>
<title>HTML Form</title>
</head>

<body bgcolor = "660000" text="cccccc">
<form action="handle_all_form.php" method=post>
<table>
<tr>
<td><font size = 4 color=cccccc>First Name:</font>
</td>
<td><input type=text name="txtFirstName" size=20>
</td>
</tr>
<tr>
<td><font size = 4 color=cccccc>Last Name:</font>
</td>
<td><input type=text name="txtLastName" size=20>
</td>
</tr>
<tr>
<td><font size = 4 color=cccccc>EMail Address:</font>
</td>
<td><input type=text name="txtEMail" size=50>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
</tr>
<tr>
<td><font size = 4>Comments:</font>
</td>
<td><textarea name="tareaComments" rows = 5 columns = 20></textarea>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
</tr>
<tr>
<td><font size = 4 color=cccccc>Interests:</font>
</td>
<td><input type=checkbox name="chkPHP"><font size = 4 color=cccccc>PHP</font>
</td>
</tr>
<tr>
<td>
</td>
<td><input type=checkbox name="chkJSP"><font size = 4 color=cccccc>JSP</font>
</td>
</tr>
<tr>
<td>
</td>
<td><input type=checkbox name="chkMySQL"><font size = 4 color=cccccc>MySQL</font>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
</tr>
<tr>
<td><font size = 4 color=cccccc>Credit Card:</font>
</td>
<td><select name="cboCreditCard">
<option value="Discover">Discover
<option value="MasterCard">Mastercard
<option value="Visa">Visa
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
</tr>
<tr>
<td><font size = 4 color=cccccc>Education:</font>
</td>
<td><input type=radio name="rbEducation" value="NoCollege"><font size = 4 color=cccccc>No College</font><br>
<input type=radio name="rbEducation" value="College"><font size = 4 color=cccccc>College</font><br>
<input type=radio name="rbEducation" value="Masters"><font size = 4 color=cccccc>Masters</font><br>
<input type=radio name="rbEducation" value="PhD"><font size = 4 color=cccccc>Ph.D.</font>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
</tr>
<tr>
<td colspan = 2 align = center><input type = submit name="submit" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>

 

After uploading and running this in your account on the server you should see something like the following when you go to the page.

 

 

After entering information you want to process it.  This will be done with the following script which you should call handle_all_form.php.  Notice how this is the name of the action in the <form> tag.

 

<html>
<head>
<title>Displaying the Inputted Information</title>
</head>

<body>
<?php
// obtaining the information from the form and displaying it
print "Your first name is <b>$txtFirstName </b><BR>\n";
print "Your last name is <b>$txtLastName </b><BR>\n";
print "Your email address is <b>$txtEMail </b><BR>\n";
print "Your comments are <b>$tareaComments </b><BR>\n";
print "Your interest in PHP is <b>$chkPHP </b><BR>\n";
print "Your interest in JSP is <b>$chkJSP </b><BR>\n";
print "Your interest in MySQL is <b>$chkMySQL </b><BR>\n";
print "Your credit card is <b>$cboCreditCard </b><BR>\n";
print "Your education level is <b>$rbEducation </b><BR>\n";
?>
</body>
</html>

 

This is almost the simplest possible processing script.

Notice how the names of the variables correspond to the names of the controls on the form page.  This is listed out in the following table.

 

Control Type Control Name Variable Name
text box txtFirstName $txtFirstName
txtLastName $txtLastName
txtEMail $txtEMail
text area tareaComments $tareaComments
check box chkPHP $chkPHP
chkJSP $chkJSP
chkMySQL $chkMySQL
select cboCreditCard $cboCreditCard
radio button rbEducation $rbEducation

 

But you should also notice how both the select/combo box and the radio button grouping have multiple options.

While it depends on what the user enters you should notice how the processing results correspond to the inputs.  This is illustrated in the following image.