HTML Forms

HTML forms are used to make web pages interactive. They set up an interaction between the client (the user's browser) and a server (where the PHP code is executed).

We will use forms to input data from the user. We will eventually learn how to send the data to a database server, but for now, we will process the user's inputs in simple PHP scripts.

Contents

Online Tutorial

There is a nice, self-paced, online tutorial on HTML here.

Building a Form

A form is an HTML element, enclosed within <FORM>...</FORM> tags. Every form must include three components:

  • The submission type (GET or POST) is defined by the METHOD attribute. This determines how the data are transmitted to the server.
  • The body of the form contains one or more <INPUT> elements.
  • The form's destination (a server, usually) is defined by the ACTION attribute.

Example 1

Save the following code as form1.html in your document root and open it in your browser. It displays a simple form with a label, a textfield, and a "Go!" button. If you click the "Go!" button, you will receive an error message because there is no form1.php script yet.

<HTML>
<HEAD>
  <TITLE>Building a Form</TITLE>
</HEAD>
<BODY>
  <FORM ACTION="form1.php" METHOD="GET">
  <LABEL>
      Search: <INPUT TYPE="TEXT" NAME="SEARCH" />
   </LABEL>
   <INPUT TYPE="Submit" VALUE="Go!" />
</FORM>
</BODY>
</HTML>

Here's how it works:

  • ACTION='form1.php' -- This says that when the form's "Go!" button is clicked, the form's data will be passed to a PHP script named form1.php.
  • METHOD='GET' -- This describes how the form's data will be passed. The GET method encodes the form data right into the URL itself.
  • INPUT -- This form has two inputs, a textfield (TEXT) for inputting data, and a SUBMIT button, for submitting the data to the server.

Observe that when you click the "Go!" button on this form it puts the contents of the SEARCH input element into the URL:

http://localhost/form1.php?SEARCH=hello

Example 1 Continued

Now let's process the form's data. Save the following code as form1.php in your document root. This is the PHP script that will run when you click the "Go!" button on the previous form. It reports the search string and then displays the same form as the first HTML file.

<HTML>
<HEAD>
  <TITLE>Building a Form</TITLE>
</HEAD>
<BODY>
<?php
$search	= $_GET["SEARCH"];
echo "<BR><strong>You are searching for $search</strong><BR>";
?>
 <FORM ACTION="<?php $_SERVER['PHP_SELF'] ?>" METHOD="GET">
  <LABEL>
      Search: <INPUT TYPE="TEXT" NAME="SEARCH" />
   </LABEL>
   <INPUT TYPE="Submit" VALUE="Go!" />
 </FORM>
</BODY>
</HTML>

This PHP script can be used repeatedly. It processes its own form data. Here's how it works:

  • $_SERVER['PHP_SELF'] -- This PHP environment variable refers to the name of the file itself -- i.e., form1.php. This says that when the form's "Go!" button is clicked, the file itself will process the data.

Example 2

Save the following code as form2.php. In this example, an if/else statement is used. If the search string is empty, then the script will display the form. Otherwise it will display the search string.

<HTML>
<HEAD>
  <TITLE>Building a Form</TITLE>
</HEAD>
<BODY>
<?php
$search= $_GET["search"];     // Get the data stored in the form's search element
$self = $_SERVER['PHP_SELF']; // This file itself will process the form.
if ($search =='' ) {
    echo ('
    <FORM ACTION="'.$self.'"  METHOD="GET">
    <LABEL>
        Search: <INPUT TYPE="TEXT" NAME="search" />
    </LABEL>
    <INPUT TYPE="Submit" VALUE="Go!" />
    </FORM>');
} else {
    echo "<strong>The search string is: $search</strong>";
}
?>
</BODY>
</HTML>

After loading this page in your browser, use the browser's View source to see the HTML document it generates.

Example 3: Input Types

This example illustrates some of the various INPUT elements that can be used with a form, including the HIDDEN element. As in the previous example, an if/else statement is used to decide whether to display the form itself or the data that was input through the form. Note the use of a loop to process all the elements of the $_GET[] array.

<HTML>
<HEAD>
  <TITLE>Building a Form</TITLE>
</HEAD>
<BODY>
<?php
$search = $_GET["search"];
$self = $_SERVER['PHP_SELF'];
if ($search ==  '' ) {
    echo ('
    <h4>A Sample Form</h4>
    <FORM ACTION="'.$self.'"  METHOD="GET">
    <LABEL> <strong>Search:</strong> <INPUT TYPE="TEXT" NAME="search" /> </LABEL>
    <BR><LABEL> <strong>Textfield:</strong> <INPUT TYPE="Text" NAME="name"
            VALUE="my name" MAXLENGTH="max characters allowed" />
        </LABEL>
    <BR><LABEL> <strong>Text area:</strong>
           <TEXTAREA NAME="suggestions"   COLS="40" ROWS="5"> </TEXTAREA>
        </LABEL>
    <BR>
       <FIELDSET> <strong>Checkboxes: </strong>
         <LABEL>Chocolate <INPUT TYPE="checkbox" NAME="icecream[]" VALUE="chocolate" /> </LABEL>
         <LABEL>Vanilla <INPUT TYPE="checkbox" NAME="icecream[]" VALUE="vanilla" /> </LABEL>
         <LABEL>Strawberry <INPUT TYPE="checkbox" NAME="icecream[]" VALUE="strawberry" /> </LABEL>
       </FIELDSET>
       <FIELDSET> <strong>Radio buttons: </strong>
         <LABEL>Chocolate <INPUT TYPE="radio" NAME="topping" VALUE="chocolate" /> </LABEL>
         <LABEL>Marshmallow <INPUT TYPE="radio" NAME="topping" VALUE="marshmallow" /> </LABEL>
         <LABEL>Butterscotch <INPUT TYPE="radio" NAME="topping" VALUE="butterscotch" /> </LABEL>
       </FIELDSET>
       <LABEL><strong>Hidden:</strong> <INPUT TYPE="hidden" NAME="hidden" VALUE="secret" /> </LABEL> 
Nothing shows on page
       <BR><strong>Select menu: </strong>
        <SELECT NAME="size" >
         <OPTION></OPTION>
         <OPTION>One scoop</OPTION>
         <OPTION>Two scoops</OPTION>
         <OPTION>Three scoops</OPTION>
         </SELECT>
    <BR><INPUT TYPE="Submit" VALUE="Go!" />
    </FORM>');
} else {
   echo "The search string is: <strong>$search</strong><BR>";
   foreach ($_GET as $key=>$value) {
      echo "\$_GET[<strong>$key: </strong>]: $value<BR>";
   }
}
?>
</BODY>
</HTML>

Example 4. Miles to Kilometers

This example illustrates a simple converter program. Get the input from the user. Convert it to kilometers and display the result:

<HTML>
<HEAD>
  <TITLE>MilesToKm</TITLE>
</HEAD>
<BODY>
<h4>Miles to Kilometers Converter</h4>

<FORM ACTION="  <?php $_SERVER['PHP_SELF'] ?>  "  METHOD="POST">

<?php
$miles = $_POST["miles"];
if ($miles != '' ) {
   $km = $miles / 0.62;
   print  "<strong>$miles miles equals:  $km kilometers </strong><BR>";
}
?>

<BR>
<LABEL> <strong>Distance in Miles:</strong> <INPUT TYPE="TEXT" NAME="miles" /> </LABEL>
<INPUT TYPE="Submit" VALUE="Go!" />
</FORM>
</BODY>
</HTML>

Note that in this case, the FORM is always displayed, so this script can be used repeatedly to convert miles to kilometers. Notice also that the POST method is used so the FORM's data are not visible in the URL.