PHP Form Processing



Form Tag Review (HTML)


The <form> tag is the parent tag for any form.  All elements of the form must occur WITHIN the <form> ... </form> tags.  The form tag has several attributes including id, name, method, and action.  The action attribute is used to direct users to a new page when they submit the form, like a thank you page or order summary. The method attribute is the process in which the information is sent. The basic options are GET and POST. POST sends the information behind the scenes and GET appends the information to the address contained in the action attribute. When using GET, the variables and their values are visible to the user and can be accessed by JavaScript. POST variables are not visible and require a server side scripting language to access.

The most common tag used in a form is input. It is a singleton tag so the appropriate use is <input />  The input tags most important attribute is type.  The items marked with an * are HTML 5 types.  These new types build in some validation that in the past required Javascript.  The good news is that older browsers that do not support HTML 5 will simply treat these fields as text fields (the default type for input) so users will still be able to enter their information.  Type options include text, password, email*, url*, date*, number*, tel*, checkbox, radio, submit. Other attributes include name, id, size, maxlength, value, placeholder, required, pattern.

Other useful form tags include select (with option), textarea, and button.

Formatting a Form (CSS)


Placing forms on a page allows great user interaction and data collection.  However, if the form is not well organized and difficult to read, users may become confused or frustrated.  Here are a few ways to format a form:  In each of the instances below, the <form> tag is wrapped around all internal formatting structures.


Submitting/Validating a Form (JavaScript)


The simple inclusion of an
<input type='submit' />
paired with the appropriate form tag attributes will allow a form to be sent. Often, before we submit the form, we need to check information for validity or completeness. In these cases, we can use the onsubmit event in the form tag. By calling a JavaScript method in the onsubmit event, we can check information before the form is sent. However, to do this, two things must happen. First, the called JavaScript method must return a value of true or false based on its findings. Second, the onsubmit event must return a value of true or false (same as the method) to tell the form if the data should be sent. An example can be seen below:
<script>
    function validate()
    {
        return window.confirm("Do you want to submit the form?");
    }
</script>
<form method='GET' action='formHandler.html' onsubmit='return validate()' >
    <input type='text' id='name' name='name' />
    <input type='submit' value='Submit' />
</form>

In the above form, clicking the submit button calls the validate method. The validate method produces a confirm button which returns a value of true or false, which is in turn, returned by the validate method. Then, the onsubmit event returns the result of the method to the form, telling the form if it should submit (true) or not (false). The onsubmit method will, by default, return true if no other value is specified.

It should also be noted that a form can be submitted directly through JavaScript using the formElement.submit() method.

When validating a form, it is important to notify users of any issues. One way to do this would be to send an alert box with issues. Another way would be to get the element in question and alter its style in some way to make it stand out (e.g. change the background color to red). Often times, these concepts are used in conjunction. There is some type of alert (either popup or at the top of the page) AND the questionable items are highlighted to draw the users attention.

Processing Forms in PHP


PHP, as a server side language, can take input from a form on one page and then transfer that information info another document for use. Typically, the form page is html (or php) with the form method set to post and the action set to the php script that will process the form and generate another html document. Let's look at the following example:
<form name='info' method='POST' action='welcome.php'>
      Name: <input type='text' size='20' name='name' id='name' />
     <input type='submit' value='Move on-->' />
</form>

Important items to note in the code above:
Clicking on the submit button would trigger the following code to execute (PHP code in welcome.php):
  echo <"h1 align=\"center\">Welcome, ".$_POST['name']."!!";
The other method of sending information is the GET method. When using get, the information is appended to the link. So, submission of the above form with method GET would result in a page call of welcome.php?name=mickey. Similar to the use of POST, you can receive those values in the welcome page using $_GET['name'].

Often, the target page will be relying on data received from the form to perform operations. If the data was not checked by JavaScript or if there is an error, it is possible that the data may not go through. If the php on the receiving page is relying on certain data that is not present, the rendering of the target page may result in an error. For this reason, PHP provides a function to ensure that the elements have value. This function is the isset(variable). Simple code, such as what follows, will help ensure thta values are present.
if(isset($_POST['submit1))   //alternately !isset($_POST['name']) tests if not set
     echo "Submit 1 button pressed.";
else
    echo "Not submit 1 button.";

This process can also be used to submit a form to its own page. The processing code for a form can be contained at the top of the page in a condition that checks isset($_POST['submit']). Then, the form processing and form setup can be housed in the same page, thus eliminating the need for separate processing pages.