• Back to Knowledge Base

For this article, I'm going to set a foundation on the use of HTML forms in a browser, then I'm going to get you to (hopefully) agree with me on some approaches to solving the inherent problems in forms.

You probably already know that there are three essential parts to a form:

1) The elements of the form that the user fills in, each with a name. These elements include text fields, drop-down lists, radio buttons, hidden fields, etc.
2) The method of the form. We will only deal with the POST method here.
3) The action of the form, ie. Where the form will be submitted to.

To the script that receives the contents of the form, there is no way to distinguish whether the data passed came from a drop-down list, an input (text) field, a radio button, or whatever. It just sees a NAME of the field (like FirstName) and the value of the field (like John), in the form FirstName=John. When a form is submitted, the contents of the form are sent in the header to the receiving page in a series of name-value pairs. What the script does with these name value pairs depends on the script, whether it sends an email, writes a text file, updates a database or all of the above.

The problem comes when we need to handle errors on the part of the user (or of the browser perhaps). The ideal flow is as follows: The user submits the form. The form is checked for accuracy. If all the fields meet the right requirements, then things happen; the user gets a kudos (congrats) message. If not, the user sees the form again with a message of specifically what was wrong. If the user made a mistake, we want to re-show each value he entered so he only needs to correct the mistake, not type everything over again.

This is reasonable from the form user's standpoint; executing it takes effort. If you would like a graphic diagram of the flow that a form needs to follow in order to handle errors, click here and return when you've studied the diagram. This flow chart translates into the following script:

<?php

// see if they submitted the form
If(sizeof($HTTP_POST_VARS > 1){
    //check for errors
     error_check($HTTP_POST_VARS);
     if($formOK){
          // do cool stuff…send an email... etc.

          // show the kudos or success page
           include("contact_result.php");
     }else{
          //show the form again so errors can be corrected
           include("contact_form.php");
     }
}else{
       //show the form to be filled out
         include("contact_form.php");
}

/* [NOTE: The functions shown are for outlining the flow only] */
?>

Now I know some of you will jump on me that this code could be more efficient, but in plain English it says:

"If a form has been submitted (POST_VARS present), then check for errors. If errors are present, then show the form again. If everything is OK, then do something with the form data, and show the kudos, or success, page. However, if there has been no form submission, then show the form."

We could take the code above and turn it into a page called "contact.php." Then, we would need to create a separate page, called contact_form.php. (The action of the form would be to the parent page, contact.php) Finally, we'd need to create a kudos page called contact_result.php.

I consider this flow to be the minimum professional way to present a form to a user. With this system, the form will re-present itself if they made an error, instead of asking them to hit the "back" button in their browser. Also, if there is an error, the user will have the values they typed re-presented, so they only have to correct the mistake. Let's address that issue right now.

Re-populating the form elements.

We have dealt with the "big picture" of the flow of the form, but we still need to deal with re-displaying the values in case of an error, and for that I have designed several functions. I'll build on this gradually, but we'll start with the easy element: the input tag.

Here is a sample:

<input type="text" name="Email">

For this form element, the user will see this:

Now, if we add a value attribute, the input field will be "populated," or filled, with an initial value:

<input type="text" name="Email" value="(your email here)">
The user will see this:

If the user enters an incorrect email, and the form gets re-presented, we'd like to re-present the value they entered as well. For example, if they entered "myreallylongemail@members..earthlink.net", I'm sure they'd rather catch the double period and fix it, instead of typing over.

For this, we use php tags. Take a look at the following tag:

<input type="text" name="Email" value="<?php echo $HTTP_POST_VARS["Email"];?>" >

Here's the cool thing: If the form hasn't been submitted, then the value of $HTTP_POST_VARS["Email"] will be blank, but it the form has been submitted, and we show the form again (because of an error), then whatever the user typed will also show again.

The Problem, and My Solution

But, we have a conflict here. What if we want to have the Email field show the words "(your email here)" initially, but show the user's input if there was a mistake? Here is the solution I use, a function called post_db():

<input type="text" name="Email" value="<?php echo post_db("Email","(your email here)");?>" >

The function I am calling, post_db, is shown here:

function post_db($fieldname, $defaultValue){
     global $HTTP_POST_VARS;
     if(sizeof($HTTP_POST_VARS)>1){ //show the form collection
          return $HTTP_POST_VARS[$fieldName];
     }else{
          return $defaultValue;
     }}

In English that means: "If a form has been submitted, return the value of the form. Otherwise show the default value."

Dealing with Data Translation
But there's another issue to deal with-the translation between text sent in an HTML form and text the way it gets returned.

Take a look at the input tag below:

<input type="text" name="Email" value="for a "great" deal, enter email >>here!" >
You would expect to see this I'm sure:

But instead, you'll get the following:

>here!" >

This is because HTML thinks that the first quote before great ends the value of the field, AND it also thinks that the first greater than character (>) ends the input field itself. To get these values to show up right, we have to translate certain elements into HTML equivalents. For this phrase,

"for a "great" deal, enter your email >>here!":

this is the proper HTML encoding:

for a &quot;great&quot; deal, enter your email &gt; &gt;here!

One more thing. If you enter this in an input field:

"I'm glad you're here"

and the form gets re-presented, you're going to get the following string back:

"I\'m glad you\'re here"

To overcome this, my post_db function above adds the php functions called htmlentities() and stripslashes(). This ensures that the data doesn't change if it needs to show up on a form again. So, here is the final code for the post_db function:

function post_db($default_value, $eName){
     if(sizeof($HTTP_POST_VARS)> 1){
          return htmlentities( stripslashes( $HTTP_POST_VARS["$eName"] ));
     } elseif(func_num_args==1){
          return htmlentities(stripslashes($default_value));
     }
     }// end post_db()

More Form Element Functions

So far so good. We still have to deal with drop-down lists, checkboxes, and radio buttons, to name a few items. A dropdown list is more difficult to control. Again, if we have a list of states, we may want California to be the default, but it a user from Michigan fills out the form and makes a mistake, we don't want then to have to re-select Michigan.

Dropdown lists are different because the possible values are already spelled out in HTML tags. The "static way to show a default value in the drop-down list is as follows:

<select name="Country">
     <option name="USA" selected>USA</option>
     <option name="Mexico">Mexico</option>
     <option name="Canada">Canada</option>
</select>

In this example, USA would be selected until the user changed the value. What we need is a function that can write the word "selected" after any one of the options. To do that, we'll need to insert the function after every one of the options' names, and here it is:

<select name="City">
     <option name="USA" <?php echo select_opt(1,"City", "USA");?> >USA</option>
     <option name="Mexico" <?php echo select_opt(0,"City", "Mexico");?> >Mexico</option>
     <option name="Canada" <?php echo select_opt(0,"City", "Canada");?> >Canada</option>
</select>

Here is the select_opt() function:

function select_opt($default_value, $eName, $option_value){
     // eName stands for element name…
     if (func_num_args==1){
          if ($default_value==1){return "selected ";}
     }elseif(func_num_args==3){
          if(sizeof($HTTP_POST_VARS > 1)){
               if(trim($HTTP_POST_VARS["$eName"])==trim($option_value)){return "selected ";}
          }elseif($default_value==1){
               return "selected ";
          }
     }
}// end select_opt()

This function seems more complex than post_db() (it is), but here it is in plain English:

"If only one variable has been passed, then write selected if it's a 1, nothing if it's 0. However, if there were three variables passed, see if the form has been submitted. If it has, compare the passed value with the name of this option. If they match, write selected. If the form hasn't been submitted, but this particular element has '1' as the first value, write selected."

Finally, we need to deal with automatically taking care of a radio button or a checkbox. The difference between a radio button and a checkbox are as follows:

Checkbox-- one name, one value. Either selected or not. If you do not select a checkbox, nothing is passed (not even the name of the checkbox).

Radio button: one name, MANY values, but only one can be selected.

However, you can use the same function because you're only using it to generate the word "checked" somewhere in your HTML code.

Here is an example of checkboxes:

Band
Glee Club
Track and field

Here's the HTML code:

<input type="checkbox" name = "Band" value=1 checked >Band<BR>
<input type="checkbox" name = "GleeClub" value=1 checked>Glee Club<BR>
<input type="checkbox" name = "TrackandField" value=1>Track and Field<BR>

Here is a radio button group:

Male Female

and the HTML code:

<input type="radio" name="sex" value="Male" checked>Male

<input type="radio" name="sex" value="Female">Female

Here is the code for the function, plus the function itself:

Code using select_cbox() function...

<input type="checkbox" name = "Band" value=1 <?php echo select_cbox(1,"Band");?> >Band<BR>
<input type="checkbox" name = "Glee Club" value=1 1 <?php echo select_cbox(1,"Glee Club");?> >Glee Club<BR>
<input type="checkbox" name = "Track and Field" value=1 1 <?php echo select_cbox(1,"Track and Field");?> >Track and Field<BR>

Here is the select_cbox() function:

function select_cbox($default_value, $eName, $option_value){
     if (func_num_args==1){
          if ($default_value==1){return "checked";}
     }elseif(func_num_args==3){
          if(sizeof($HTTP_POST_VARS > 1)){
               if(trim($HTTP_POST_VARS["$eName"])==trim($option_value)){return "checked ";}
          } elseif($default_value==1){
               return "checked";
     }
}

}//end select_cbox()

The function for showing a default radio button selection is identical to select_cbox(), but here is the HTML code with the function called:

<input type="radio" name="sex" value="Male" <?php select_cbox(1,"sex", "Male");?>>Male
<input type="radio" name="sex" value="Female" <?php select_cbox(1,"sex", "Male");?> >Female

Putting it all together

If you have followed this article all the way through, I've included a bonus for you. The following is a group of pages for a simple form-submission. If your server runs php, these pages will work flawlessly. Be sure and change the send-to email.

page flow script (contact.php)
form page (contact_form.php)
result page (contact_result.php)

Sam Fullman
Compass Point Media