HTML Form and PHP…

PHP and HTML Forms

In this lesson of the PHP tutorial, you will learn… 

  1. To process form data with PHP.

HTML Forms

How HTML Forms Work

A very common way to pass data from one page to another is through HTML forms. There are two methods of submitting data through a form: the get method and the post method. The method used is determined by the value of the method attribute of the form tag. The default method is get.

Get Method

When the get method is used, data is sent to the server in name-value pairs as part of the query string. The get method is most commonly used by search pages and is useful when it is important to be able to bookmark the resulting page (i.e, the page that is returned after the form is submitted).

Post Method

When the post method is used, data is sent to the server in name-value pairs behind the scenes. The two major advantages of the post method are:

  • The name-value pairs are not visible in the location bar, so sensitive data such as passwords are not displayed on the screen.
  • Files, such as images and Office documents, can be uploaded via the form.

The major disadvantage is that the resulting page cannot be bookmarked.

A Sample HTML Form

The following is a sample HTML form for inserting an employee record into a database.

Code Sample: Forms/Demos/AddEmployee.php

<html>
<head>
<title>Add Employee</title>
</head>
<body>
<h1>Add Employee</h1>
<form method="post" action="ProcessEmployee.php">
<table>
 <tr>
  <td>First name:</td>
  <td><input type="text" name="FirstName" size="15"/></td>
 </tr>
 <tr>
  <td>Last name:</td>
  <td><input type="text" name="LastName" size="15"/></td>
 </tr>
 <tr>
  <td>Title:</td>
  <td><input type="text" name="Title" size="30"/></td>
 </tr>
 <tr>
  <td>Title of Courtesy:</td>
  <td>
   <input type="radio" name="TitleOfCourtesy" value="Dr."/>Dr.
   <input type="radio" name="TitleOfCourtesy" value="Mr."/>Mr.
   <input type="radio" name="TitleOfCourtesy" value="Mrs."/>Mrs.
   <input type="radio" name="TitleOfCourtesy" value="Ms."/>Ms.
  </td>
 </tr>
 <tr>
  <td>Birth date:</td>
  <td>
   <select name="BirthMonth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
   </select>
   <select name="BirthDay">
   <?php
    for ($i=1; $i<=31; $i++)
    {
     echo "<option value='$i'>$i</option>";
    }
   ?>
   </select>
   <select name="BirthYear">
   <?php
    for ($i=2006; $i>=1900; $i=$i-1)
    {
     echo "<option value='$i'>$i</option>";
    }
   ?>
   </select>
  </td>
 </tr>
 <tr>
  <td>Hire date:</td>
  <td>
   <select name="HireMonth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
   </select>
   <select name="HireDay">
   <?php
    for ($i=1; $i<=31; $i++)
    {
     echo "<option value='$i'>$i</option>";
    }
   ?>
   </select>
   <select name="HireYear">
   <?php
    for ($i=2006; $i>=1992; $i=$i-1)
    {
     echo "<option value='$i'>$i</option>";
    }
   ?>
   </select>
  </td>
 </tr>
 <tr>
  <td>Address:</td>
  <td><input type="text" name="Address" size="50"/></td>
 </tr>
 <tr>
  <td>City:</td>
  <td><input type="text" name="City" size="30"/></td>
 </tr>
 <tr>
  <td>Region:</td>
  <td><input type="text" name="Region" size="2"/></td>
 </tr>
 <tr>
  <td>Postal Code:</td>
  <td><input type="text" name="PostalCode" size="10"/></td>
 </tr>
 <tr>
  <td>Country:</td>
  <td><input type="text" name="Country" size="5"/></td>
 </tr>
 <tr>
  <td>Home Phone:</td>
  <td><input type="text" name="HomePhone" size="15"/></td>
 </tr>
 <tr>
  <td>Extension:</td>
  <td><input type="text" name="Extension" size="5"/></td>
 </tr>
 <tr>
  <td colspan="2">Notes:</td>
 </tr>
 <tr>
  <td colspan="2">
   <textarea name="Notes" cols="50" rows="3"></textarea>
  </td>
 </tr>
 <tr>
  <td>Manager:</td>
  <td>
   <select name="ReportsTo">
    <option value="0">Choose...</option>
    <option value="1">Nancy Davolio</option>
    <option value="2">Andrew Fuller</option>
    <option value="3">Janet Leverling</option>
    <option value="4">Margaret Peacock</option>
    <option value="5">Steven Buchanan</option>
    <option value="6">Michael Suyama</option>
    <option value="7">Robert King</option>
    <option value="8">Laura Callahan</option>
    <option value="9">Anne Dodsworth</option>
   </select>
  </td>
 </tr>
 <tr>
  <td>Password:</td>
  <td><input type="password" name="Password1" size="10"/></td>
 </tr>
 <tr>
  <td>Repeat Password:</td>
  <td><input type="password" name="Password2" size="10"/></td>
 </tr>
 <tr>
  <td colspan="2"><input type="submit" value="Add Employee"/></td>
 </tr>
</table>
</form>
</body>
</html>

The above code, which contains some embedded PHP code, outputs a simple HTML form. Its action page is ProcessEmployee.php, which will eventually contain PHP code to process the submitted form.

Form Variables

Form variables are variables that are created when an HTML form is submitted using the post method. These variables are stored in the $_POST superglobal array. Here are a few things you should know about how HTML forms are processed:

  1. If a text field or textarea is left blank, the variable is sent to the server with a value of “” (empty string).
  2. Select menus always send a variable to the server (unless they have been disabled in some way).
  3. If no radio button in a radio array is checked, no variable for that radio array is sent to the server.
  4. If a checkbox is not checked, no value is sent to the server. If it is checked, the default value of “on” is sent unless otherwise set in the HTML.
  5. If the submit button has a name (e.g, <input type=”submit” name=”Inserting” value=”Add Employee”/>), when that submit button is clicked a variable by that name with the corresponding value will be sent to the server.

Exercise: Processing Form Input

Duration: 40 to 50 minutes.

In this exercise, you will create a page that processes the form data. The form entry page, Exercises/AddEmployee.php, is already complete and is identical to Demos/AddEmployee.php above. Filled out, the form would look like this:

If everything is filled out correctly, the page should display as follows:

If all fields are left blank except for the password fields, which contain two different values, the page should display as follows:

  1. Open Forms/Exercises/ProcessEmployee.php in your editor.
  2. For each form entry (other than the dates, which we’ll worry about later), create a simple global variable to hold…
    • either an error if the entry is not filled out or filled out incorrectly.
    • or the value entered.
  3. Output the variables as list items as shown in the screenshots above.
  4. Save your work.
  5. To test your solution, load Forms/Exercises/AddEmployee.php in the browser and fill out and submit the form.

Code Sample: Forms/Exercises/ProcessEmployee.php

<?php
 //For each entry coming through the form,
 //  create a simple global variable to hold...
 // - either an error if the entry is not filled or filled incorrectly
 // - or the value entered.
 //The first one is done for you.

 if ($_POST['FirstName'] == '')
 {
  $FirstName = '<span style="color:red;">First name omitted.</span>';
 }
 else
 {
  $FirstName = $_POST['FirstName'];
 }
?>
<html>
<head>
<title>Process Employee</title>
</head>
<body>
 <h1>Process Employee</h1>
 <ul>
 <?php
 //Output the variables as list items.
 //Part of the first one is done for you.
  echo "<li><b>Name:</b> $FirstName</li>";
 ?>
 </ul>
</body>
</html>

If there are any errors, include a link at the bottom that directs the user to the form. If there are no errors, include a form full of hidden fields containing the values entered and a submit button that reads “Confirm”.

PHP and HTML Forms Conclusion

In this lesson of the PHP tutorial, you have learned how to process forms and do simple form validation. We will learn to do more advanced form validation later in the course.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s