Learnit Training

4. Forms

Many websites nowadays use forms to give website visitors the opportunity to interact with the website. Here are a few examples that may seem familiar.

They all have in common that there are boxes where you can type something, that you can click on something with your mouse to continue (login/send/search) and that on the page where you landed, something happened with what you entered. In this chapter, we will work with a form similar to the one on the Telegraaf website.

4.1. The HTML behind a form

Even though HTML is assumed to be familiar in this course, it is easy to imagine that the HTML for forms has sunk a bit since it is virtually useless without the help of a language like PHP. The form we are going to work with looks like this:

Form

Task 5.1.

  1. Download the code for this form by right-clicking here and selecting "Save target as" (or in Firefox: "Save link as").
  2. Save the file form.html to c: ³ (or to c:³ if you had modified the installation directory of XAMPP).
  3. View the form at http://localhost/phpcursus/4/form.html.
  4. Request the source code of the form (View > Source), and study it. We will discuss it below.

A first rule that may strike you, but is in any case important, is this:

<form name="reactie_formulier" method="post" action="verwerk.php">

What it method attribute will be discussed in a moment. The action-attribute specifies where, after the send button is pressed, the browser should be sent; process.php so in this case. We will discuss what to do there in a moment.

There are also two tags:

<input type="text" name="naam" />

These tags are the input fields; the fields where text can be typed. It is important that they all have a unique name.

A final noteworthy tag is:

<input  type="submit" value="verstuur" />

This is a special type of the previous one, it causes the form to be sent to the page that was specified in action.

4.2. Get and mail

There are two ways to send the form, these ways are called methods. The example uses the item method.

Task 5.2.

  1. Open phpcourse.html in Notepad
  2. Check that the attribute method is set to item.
  3. Go to http://localhost/phpcursus/4/form.html, fill in the form with any information and click on send.
  4. See what happens.
  5. You will probably get the message "Object not found!", but please pay attention to the address bar, which reads: http://localhost/phpcursus/4/verwerk.php.
  6. Change the method now in get; line 6 of form.html then reads:
    <form name="reactie_formulier" method="get" action="verwerk.php">
    
  7. Surf again to http://localhost/phpcursus/4/form.html and press F5 to get the new version (with get method).
  8. Fill in fictitious information again and press send.
  9. The address bar should now look something like this:

get method

The content of the form is after the file name process.php put. The difference between get and item is illustrated by this. Get attaches everything to the url, this can be useful because you can clearly see what is happening. But more often it is inconvenient because there is a limit to the length of values that can be sent this way. Furthermore, it can also look sloppy. For this reason, we work here with the item method.

Task 5.3.

Put the method in phpcourse.html back to item.

4.3. Processing a form

By now we know that once the form is filled in and submit is clicked, it is sent to process.php. What we then often want to do is validate the information from the form; see if it has been filled in correctly. And if it is, we usually want to save it. We won't save it here yet, we can only do that once we are able to work with the database.

Retrieving the information from the form is actually very simple, using the so-called superglobal $_POST (or of course $_GET if we were to use the get method). The following script is a first version of process.php



	Process form


You filled in:
\n";
echo "\n";
echo "
Name: " . $_POST['name'] . "
E-mail: " . $_POST['email'] . "
Comment: " . $_POST['reaction'] . "
\n"; ?>

Task 5.4.

  1. Create a new file process.php in the phpcourse folder.
  2. Open the file in Notepad and paste the script above into it
  3. Go to http://localhost/phpcursus/4/form.html again, fill in the form with any information and click send again.

process.php

4.3.1. Validate

Now we can display the data entered in the form, but what happens if a visitor does not enter any data or enters incorrect data? In this case, incorrect data means, for example, that the e-mail address is not in the form of an e-mail address. Of course, we have no way of knowing whether an e-mail address really belongs to the visitor.

Obviously, we need to check what is being input before we send it back to the browser or do anything else with it. We call this checking validation. First we check whether the variable has arrived at all. This is done by checking if it is present in the $_POST array using the isset() function. We also check that it does not contain an empty string.

Naam: " . $naam  . "\n";
    }
else {
	echo "Naam: Vul een naam in!\n";
    }
?>

Task 5.5

  1. Open verwerk.php again in Notepad
  2. Change the script so that the above piece of code is inserted
  3. Save but do not exit
  4. Surf to http://localhost/phpcursus/4/form.html
  5. Do not enter anything in the name field and press send, see if the script you just created works correctly
  6. Make sure that this validation is also applied to the email address and the response
  7. Check the operation of the script
  8. If necessary, look here if you cannot work it out or for verification purposes

4.3.1.1 Validate e-mail address with Filters

Now we only check if a field in the form is not empty. We do not check if an email address is correct. Fortunately, PHP offers a function that can help with validation: filter_var(). We can validate the e-mail address in the following way:
if ( isset($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
    ...
  }
else {
    ...
 }

Remark: we will replace the code which is not relevant now by ...

Remark: a && b is where as a and b both where are.

4.3.1.2 Validating with Regular Expressions

However, the number of validation filters is limited. For example, there is no validation filter for Dutch postcode. You can check this using a regular expression. Regular expressions are specifications of what a string should look like, and go a bit too far for this online course. There are many good resources on the web that can help you further (e.g. www. regular-expressions.info/php.html).

4.3.2 Cleaning up texts

We already have control for the e-mail address, but not yet for the name and the comment. It could really end dramatically for our website if a visitor were to enter HTML codes!

Task 5.6

  1. Think about what would happen if a visitor entered the following line as 'e-mail address':
    </td></tr></table><table border='1'><tr><tr>
    
  2. Try this out!
  3. Look at the source code of verwerk.html if the above line is filled in, understand what it says!
All characters that could cause problems should be removed. Again, we can use the filter_var function. We give it a 'dirty' text and the result is the cleaned-up text from which all HTML tags have been removed.
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);

Task 5.7

  1. Open process.php again in Notepad if it is not still open.
  2. Adjust the script so that the above filtering is also carried out.
  3. Think about how the reaction can be controlled and do it!