PHP and HTML Forms
In this chapter will create a simple HTML form to gather information from the user and then create a PHP script to process that data once it has been submitted to the server. This chapter assumes an understanding of HTML forms. See the An Overview of HTML Forms chapter for a basic overview of this topic.
Creating the Form
The first step involves creation on an HTML page to contain our form. The form will be very simple in that it will contain only a text area for the user to enter data and a submit button with which to send it to the server. We will use the POST method of transmitting the data to the server and specify "subscribe.php" as the server side script to hanlde the data:
<html> <head> <title>Simple HTML Form</title> </head> <body> <form action="submit.php" method="post"> <input type="text" name="customerName" value="Enter your name here" /> <input type="submit" name="submit_button" value="Press to Submit" /> </form> </body> </html>
The above HTML code will result in the following when loaded into a web browser:
Processing Form Data Using PHP
Now that we have created out form we need to understand how to process the data enter by the user in our server side PHP script. There are two mechanisms for transmitted the data form an HTML form to the server, GET and POST. In our example above we specified POST, but in eiterh case the task of reading this data in our PHP script is equally simple.
Essentially PHP places the data from the form into an associative array (for information on PHP arrays see PHP Arrays) which can be accessed from within the server side PHP script. For POST and GET the array variable names are $_POST and $_GET respectively.
For our example HTML form we can write a simple subscribe.php script to output the content of the $_POST methoid when the form is submitted it to our web server:
<?php echo 'Data submitted:<br>'; print_r($_POST); ?>
When a name is entered and the submit button pressed the following output is genereted by our subscribe.php script:
Data submitted:
Array ( [customerName] => Neil [submit_button] => Press to Submit )
You will recall we mentioned this is an associative array so each element is accessible by a named index key. You may also have noticed that we gave our text input a name value of 'customerName' when we defined it in our form:
<input type="text" name="customerName" value="Enter your name here" />
This name is used as the key into our GET and POST associative arrays so that we can access each data element individually by the name used in the form. Let's extend both our HTML form and PHP scripts to handle more test fields and also include a toggle button:
<html> <head> <title>Simple HTML Form</title> </head> <body> <form action="subscribe.php" method="post"> Name: <input type="text" name="customerName" value="" /><br> Email: <input type="text" name="emailAddress" value="" /><br> Send Email Newsletter: <input type="checkbox" name="sendNews" checked /><br> <input type="submit" name="submit_button" value="Press to Submit" /> </form> </body> </html>
We can now modify our subscriber.php script to read the additional information from the $_POST array variable. Before we do this, however, there is important issue note. Data about the sendNews check box will only be included in the POST data if the check box is set. If it is not set they no entry for it will be include din the $_POST array. We need, therefore, to use the array_key_exists() or isset() functions to verify if the check box was set or not. This is considered to good practice for validating array elements are set:
<?php
print_r( $_POST );
echo "Your name is " . $_POST['customerName'] . "<br>";
echo "Your email address is " . $_POST['customerName'] . "<br>";
if (array_key_exists ('sendNews', $_POST))
{
echo "You have requested our newsletter<br>";
} else {
echo "You have declined our newsletter<br>";
}
?>
Now, when we reload the web page, enter a name and email address and check the toggle, submitting the form gives us the following output:
Your name is Neil
Your email address is [email protected]
You have requested our newsletter
