Larger Text Normal Text Smaller Text

IT 280 Web Development II, Spring 2008

Processing HTML Forms

Background

The QUERY_STRING provides a way to send information to the server.
It is at the end of the URL, following a ?
It is limited to a single string.
Typing it as part of the URL is not very convenient or versatile.
The browser will also use it to send data from a form to the server.

HTML Forms

HTML forms provide a way for the user to enter values.
Refer back to the Week 8 Notes on forms for how to create forms.
Form data can be processed client-side using a language such as JavaScript.
Form data can also be sent to the server for server-side processing.
The form action specifies what will process the form.

The form action

If the data are to be processed server-side the form tag must have a URL for the action attribute.

The value of the action attribute is the URL at which the form will be processed.

    <form action="action_url">
   
      ... <!-- form elements go in here. -->
   
    </form>

There are many ways to process data server-side.
The processing could be done by a CGI script or a PHP script or another type of program.
PHP was developed as a web language, and includes built-in variables and functions that are designed especially for processing form data.

Example 1

We will look at how to process information entered into the following form

      <form action="process_form1.php">
      
            <!-- When the submit button is clicked, send -->
            <!-- form data to the PHP page process_form1.php -->
      
      <input type="text"
             name="username"
             value="Type in your name" />
      
      <input type="text"
             name="the_word"
             value="Enter word of the day" />
      
      <input type="submit" /><input type="reset" />
      </form>

Getting the information from a form

Form elements are like variables
The web form provides one way of assigning values to them.
For example, in example form above, the initial assignments are
- variable username has value "Type in your name"
- variable the_word has value "Enter word of the day"
The initial values are changed when the user fill in the form.
They can also be changed through JavaScript.

URL-encoding

When the submit button is clicked, the form information is organized as name and value pairs.
The name-value pairs are sent as one long encoded string to the server.

In the example, with the initial values, the encoded string will be

     username=Type+in+your+name&the_word=Enter+word+of+the+day

The encoded string will be the QUERY_STRING.

       http://process_form1.php?username=Type+in+your+name&the_word=Enter+word+of+the+day

How do we get the values to use in a program?

PHP form variables

PHP automatically provides associative array variables that let you access the individual values.
For the example form, the variable name is _GET[]
```
        $_GET["form_variable_name"]    
```

Example 1 (continued)

When the example form is submitted, PHP decodes decodes the query string and makes the values available through _GET[].

The two items of data are:

    $_GET["username"]
    $_GET["the_word"]

The underscore _ is part of the name.
You can use the variables in a complete PHP document.
This example is just one possible dopcument.

   <html>
   <head><title>First PHP form processing</title></head>
   <body>
   <h1>Processing a Form with PHP</h1>
   <h2>The values entered into the form:</h2>
   <p>Hi there, <?php echo $_GET["username"]; ?>.<br />
   Your word is <?php echo $_GET["the_word"]; ?>.
   </p>

   <h2>Some environment variables:</h2>  
   <p>This document is located at 
       http://<?php echo $_SERVER["HTTP_HOST"], $_SERVER["PHP_SELF"]; ?>.<br />
   You requested it from the page <?php echo $_SERVER["HTTP_REFERER"]; ?>.
   </p>
   
   <p>The HTTP request method used is 
   <?php echo $_SERVER["REQUEST_METHOD"]; ?>.<br />
   The complete query string is 
   <?php echo $_SERVER["QUERY_STRING"]; ?>.
   </p>
   
   </body>
   </html>

The directory for example 1 comtains

Example 2

In the example1, the form was in one document and the processing PHP in another. Often it is convenient to have the form and the PHP in the same document.

   <h1>Process a form with PHP</h1>
    <h2>The form</h2>
   <form action="form2.php">
   
         <!-- When the submit button is clicked, send -->
         <!-- form data to the PHP page process_form.php -->
   
      <p><input type="text"
             name="username"
             value="Type in your name" /></p>
      
      <p><input type="text"
             name="the_word"
             value="Enter word of the day" /></p>
      
      <p><input type="submit" /><input type="reset" /></p>
   </form>
   <h2>The results</h2>
   <p>Value of username: <?php echo $_GET["username"]; ?> </p>  
   <p>Value of the_word: <?php echo $_GET["the_word"]; ?> </p>

The directory for example 2 comtains

Link to the document (form and PHP code, .php extension)
Source for the document

Example 3

Before the form in example 2 is submitted, there aren't any results to show.

This version only shows the results if there are values.

   <h1>Process a form with PHP - if there are data</h1>
    <h2>The form</h2>
   <form action="form3.php">
   
         <!-- When the submit button is clicked, send -->
         <!-- form data to the PHP page process_form.php -->
   
      <p><input type="text"
             name="username"
             value="Type in your name" /></p>
      
      <p><input type="text"
             name="the_word"
             value="Enter word of the day" /></p>
      
      <p><input type="submit" /><input type="reset" /></p>
   </form>

   <p><?php
    if ($_GET["username"] != "" || $_GET["the_word"] != "") 
     {
        echo "<h2>The results</h2>";
        echo "<p>Value of username:" , $_GET["username"], "</p>";
        echo "<p>Value of the_word:" , $_GET["the_word"], "</p>"; 
      }?>

The directory for example 3 comtains

Link to the document (form and PHP code, .php extension)
Source for the document

HTTP Request Methods

There are two different methods used for sending form data; GET and POST.
They can be specified by providing a method attribute in the form tag.
Method GET is the default value for the method attribute. If the atttribute is omitted, it will be the method used.
In method GET, the encoded string is appended to the URL following a question mark (?)
Method GET limits the amount of data that can be sent; it should not be used with long forms or those with open-ended textarea elements.
Method POST must be explicitly specified (method="post")
In method POST, the encoded string is sent as a separate attachment to the request.
Method POST can handle large amounts of data, but is slightly less efficient.

Method POST should be used if there are terxtareas or lots of corm controls.

Example 4

This example uses method POST because there is a textarea for comments.
If there are no form vallues sent, it displays the form.
If there are form values, it show the results, but not the form.

   <body>
   <?php
       if ($_POST["username"] != "" || $_POST["comments"] != "") {
       //If some form data are submitted, tell it back
       
         //the echoed items are separated by commas.
         //The variables are not inside quotes
         echo "<p>Hi there, ", 
              $_POST['username'], 
              ". </p><p>Your comments are: <br /> ",
              $_POST['comments']. "</p>
              ";
       }
       else {
       //If nothing submitted, show them the form
       
         //The PHP string is enclosed in single quotes 
         // because the HTML requires double.
         echo '
           <form action="form4.php" method="post">
               <p>Your name: <input type="text"
                      name="username"
                      value="" />
               <br /> 
               Comments:<br /><textarea name="comments" 
                                   rows="5" cols="60"></textarea><br />
              <input type="submit"/> <input type="reset"/></p>
       
           </form>
           ';
       }
   ?>
   <hr />
   <p>This document is located at: 
       http://<?php echo $_SERVER["HTTP_HOST"], $_SERVER["PHP_SELF"]; ?>.<br />
     The complete query string was: <?php echo $_SERVER["QUERY_STRING"]; ?>
   </p>
   </body>

The directory for example 4 comtains

Link to the document (form and PHP code, .php extension)
Source for the document

Lab Exercise 11

Make a PHP document page that includes a form.
The form should have the following controls:
- a text input for the user's name
- a text input for favorite color
- a text input for least favorite food
The PHP in the page will process the form when submitted (adapt the examples).
- Tell the user about their entered color and food. (____, you really like the color ____ and you really dislike the food ____.)
Ater you are finished with the document, create a second copy of the file, but give it the extension .txt
Add an entry to your table of contents page with links to both the .php and .txt files.

Be sure to add an entry for the lab to your table of contents page and to complete the submission on Blackboard.

Comments to: chang@hood.edu

Last Modified: 08 April 2008. 16:10