Filling out forms with PHP

In HTML, to indicate that we're going to insert a form, the tag <form> is used like this:

Code: HTML

What you have to recall is that our form's content is put between the tags <form> and </form>
There are two interesting attributes to know about the tag <form>:

• method="post": you have to know that there are different ways to send the form (different "methods"). Just remember the "post" method, which is the only one we will be interested in for PHP. It means you will always put method="post" for your forms!
• action="target.php": essential. It is the name of the page that will be called when the user will have sent the form (i.e when the "send" button will be clicked! ) For instance, the previous code is located on the page form.php. Once the form has been sent, it loads the page target.php in which we will process the guest's data.

Don't forget that you're supposed to work on 2 different pages: the one containing the form (form.php in our example), and the one receiving the form's data to process them (target.php).

But now you may wonder if and why we actually used one page only for the practical work "password" and "minichat". Yes, we did, the target page was also the one of the form. We had put not only the form in minichat.php, but also the data processing (because we had an action="minichat".php" that sent back to the same page).

Eventually, things might become clearer for you:

• The first time that the minichat is loaded, we check if some variables sent by the form like $_POST['nickname'] exist (that's what isset is here for). We know that we must not write any information in the database (we skip the if), because the first time we loaded the page we did not enter anything in the form.
• This time when a message has been entered, the page reloads with information from the form entered by the user (like the nickname). As a result, $_POST['nickname'] exists, SO we know we must save something.

And all this is done on the very same page



In the variables' chapter, I quickly evoked forms including text-area fields and you may remember that I had promised you we'd get back to them later to see all the form's elements we can process with PHP.
The time has come

You may know it already but in a form, you can put a lot of different elements: text fields, buttons, check boxes etc.
I will list them all, and show you how to use each and every one of them. I bet with this you'll be prepared to brave the forms by yourselves

Small text fields

This is what a text field looks like:


In HTML, it is inserted simply with the tag:
<input type="text" />



But you will have to add two attributes, which will be very useful:

• name: text field's name. Choose it accurately because it is going to produce a variable. For instance:
  <input type="text" name="nickname" />
  In target.php, it will create a variable $_POST['nickname']
• value: what the text field contains at the beginning. The default text field is empty. But it can be really convenient to pre-fill the field: on the minichat practical work, for instance, it would be easy to write the user's nickname automatically! Example:
  <input type="text" name="nickname" value="M@teo21" />

I know you're starting to worry because you haven't seen any PHP yet, and you're afraid of the terrible thing you might fall into.
Calm down, there's nothing coming

It's quite simple actually: the text that the guest will have entered will be available in target.php through a variable called $_POST['nickname'].

And this is nothing new since we have already seen it in the variables chapter. By the way, I figured that I would just give you the example I had already made instead of creating a new one (what do you mean, lazybones? )

Code: HTML


Code: PHP


This button will open the page call.php:



In target.php, a variable $_POST['first_name'] containing what the user has entered in the form has been displayed.



To go back to the Mini-Chat, the nickname can be written again in the field "nickname" without any problem if the variable $_POST['nickname'] exists. It would give us something like:

Code: PHP

Roughly speaking, we have put some PHP right in the middle of the tag <input /> (we sure can).
If we have the guest's nickname, we'll then add the attribute value="nickname", which will pre-fill the text field.



Among other things, you'll acknowledge the significance of concatenation and apostrophes to separate the text from variables. It has spared us the use of backslash before the inverted commas.

Big text fields

The big text field (also called "multiline input field"), looks like that:


We can write as many lines as we want. It is more appropriate if the guest has to write a long message for instance.

We will use the following HTML code to insert this big text field.

Code: HTML

Here again, we have the attribute name that will define the name of the variable to be created in target.php. In our case, it will be the variable $_POST['message'].
More specific thing: there's no value attribute. Actually, here the default text is written between <textarea> and </textarea>. Much more convenient to make an echo in between
If you don't want to put any default value, just don't write anything between <textarea> and </textarea>

Drop down box

Here it comes:


We use the following HTML code:
Code: HTML

We just have to use the tag <select>, to which we give a name (here "choice").
Afterwards, we write the different options... before closing the tag with </select>.

There will be a variable $_POST['choice'] created, which will contain the choice made by the user. If he has chosen "Choice 3", the variable $_POST['choice'] will equal the correspondent value, i.e "choice3".

Defining the default choice is an important thing, and it could be useful to know how to do it. It should be the first one, but if you add the attribute selected="selected" to a tag <option>, it will then become the default choice. We could write:
<option value="choice3" selected="selected">Choice 3</option>

Check Boxes

It looks like that:




This is the code we're going to use to display check boxes:

Code: HTML

Here again, we name the check box ("box"). This name is going to generate a variable in the target page, for instance $_POST['box'].

• If the box is checked, the value of $_POST['box'] will be "on".
• If it's not ckecked, $_POST['box'] will not contain anything (NULL).

If you want the box to be checked by default, you'll need to add the attribute checked="checked". As for:
<input type="checkbox" name="box" checked="checked" />
The box will be checked already.

Radio Buttons

They work by groups of 2 minimum. For instance:



The code accounting for this example is:

Code: HTML

As you can see, the two radio buttons have the same name ("hamburgers"). It is essential because they work by "groups": all radio buttons from a same group are called the same.
It allows the browser to know which radio buttons to disable when another one from the group is activated. Indeed, being able to check "Yes" and "No" at the same time would be stupid

To pre-check one of these radio buttons, just do the same as for check boxes: add a checked. As you can see here, "Yes" is checked by default.

A variable $_POST['hamburgers'] will be created in the target page. It will have the value of the radio button chosen by the guest. If we like hamburgers, we'll then have $_POST['hamburgers'] = 'yes'.
Don't forget to fill the radio button "value" attribute because it will define the variable's value

Hidden fields

What does this handy thing consist in? It is a code in your form that will not be visible to the eyes of your guest, but it will create a variable with a value.
Suppose you want to remember that the guest's nickname is "Mateo21". You will type this code:

Code: HTML

Nothing will appear on screen.
But in the target page, a variable $_POST['nickname'] will be created (corresponding to name). Its value will be "Mateo21" (corresponding to value)!

It sounds useless, but when you'll start creating forms you'll find it necessary soon enough

We're going to practice on a check box. We'll ask the guest's favourite colour. When he will have chosen, we must be able to do 2 things:

1. We're going to write the guest's favourite colour (by means of a simple echo).
2. This colour will be made the check box's default choice.

Let's call up our memories with something we haven't seen since Part I: the functions that you can define by yourselves. We are going to define a function called defaultChecked that will return 'selected' if the colour given is the user's choice, or nothing if it's not the guest's favourite colour.

Let's stop chatting and start coding

Code: PHP



I can imagine your face while looking at this code:
On the one hand, I understand this code might scare you; on the other, just avoid telling me about it otherwise I could get really angry

Why? Because I "only" used a function, which is something I taught you in one of this PHP tutorial's first chapters!!!
It means that theoretically you should be able to understand all that.

Anyway, I'll explain how it works. I don't want to undergo any of your hostile reactions!
You can roughly forget about the beginning of the code. Just look after the "End of function" commentary. If the user has made a choice, then we display what the guest's favourite colour is.



Then we display your simple form. As we want to reload the same page, I haven't put any action attribute.
For each option, I display what my function defaultChecked returns when I put the colour "Green" for instance. The function can return 'selected="selected"', in this case you display selected that will be the default choice, or might not return anything, which means it won't be a default choice.

If you're having problems understanding how my function works, I highly recommend that you read the function chapter again.
Don't hesitate to spend some time on this code to see how it works because I find it quite interesting. If you were able to understand this, you have understood everything

Did you know that you could also upload files thanks to forms?

You will need to read this section if you want your guests to send (or upload) images, programs or any other type of file to your website.

Two steps again:

1. The guest reaches your form and fills it out (indicating the file to upload). A simple HTML page is enough to create the form.
2. PHP receives the form's data and "saves" the files in one of the server's files, if it contains any.



Before seeing how to process the file's uploading on the server with PHP, we are going to start by creating the form allowing to upload a file (a simple HTML page).

The Upload-file form

If ever your form offers your guests to upload a file, you need to add the following attribute enctype="multipart/form-data" to the tag <form>.

Code: HTML

Thanks to enctype, the guest's browser knows that it is about to upload files.

Once it's done, we can add a tag allowing to upload a file inside the form. It's a very simple tag like <input type="file" />. As usual, think about naming this form field (using the attribute name) for PHP to recognize the field later on.

Code: HTML

Enough

You can add some more standard fields to the form (text field, check boxes). You can also offer to upload several files at the same time.
In this case, we're going to stand with one field only (upload file) to stay simple.

Upload processing in PHP

As you may have noticed, the form aims at a PHP page called upload_file.php, on which the guest will be redirected after the form has been sent.

This is where it's starting to get important. We have to write the code of the page upload_file.php to process the file's uploading.




Actually, the moment when the PHP page is executing, the file has been sent on the server but is stored in a temporary folder.
You are to decide whether you accept the file permanently or not. You can check if the file has the right extension for instance (if you ask for an image and you are sent ".txt", you must decline the file).



There is a $_FILES['field_name'] variable created for each file uploaded. In our case, the variable will be called $_FILES['myfile'].
This variable is a spreadsheet containing several pieces of information regarding the file:

Variable	Meaning
$_FILES['myfile']['name']	Contains the name of the file uploaded by the guest
$_FILES['myfile']['type']	Indicates the type of the uploaded file. If it's a gif image for instance, the type will be image/gif.
$_FILES['myfile']['size']	Indicates the size of the uploaded file. Be careful: this size is in bytes. Around 1000 bytes will be needed to make 1kB, and 1000 000 bytes to make 1 MB. Note that the sending size is limited by PHP. As a default value, it is impossible to upload files bigger than 8 Mb.
$_FILES['myfile']['tmp_name']	Right after being uploaded, the file is stored in a temporary directory on the server, while waiting for your PHP script to decide whether it accepts to store it permanently or not. This variable contains the file's temporary location (this is handled by PHP).
$_FILES['myfile']['error']	Contains an error code allowing to know if the sending was done properly or if there was a problem, and if that's the case, which one. If there wasn't any error, the value of the variable is 0.

Let's make the following checks to decide whether we accept the file or not:

1. First of all, check if the guest really uploaded a file (by testing the variable $_FILES['myfile'] with isset). If there's no sending error (with $_FILES['myfile']['error'])
2. Check if the size of the file doesn't exceed 1 MB for instance (around 1 000 000 bytes) with $_FILES['myfile']['size']
3. Check if the file's extension is authorized (you definitely have to forbid anyone from uploading PHP files, if not they could execute scripts on your server!).
In our case, we will authorize images only (.png, .jpg, .jpeg and .gif files).
To do so we will scan the variable $_FILES['myfile']['name'].


A series of tests will be carried out in our page upload_file.php

1/ Test if the file was uploaded

We start by testing if the variable $_FILES['myfile'] exists with isset() to check whether a file was uploaded.
We also have to check THAT there is no sending error.
Code: PHP

2/ Check the size of the file

We want to prevent the file from exceeding 1 MB, around 1 000 000 bytes (I'm rounding off to make things simpler).
As a consequence, we must test $_FILES['myfile']['size']:

Code: PHP

3/ Check the file's extension

The file's extension can be retrieved in a variable through this code:

Code: PHP


The function pathinfo returns an array containing, among other things, the file's extension in $fileinfo['extension']. We store this in the variable $extension_upload.

Once you have retrieved the extension, we can compare it to an authorized extensions spreadsheet (an array) and check if the extension recovered is really part of the authorized extensions by means of the function in_array().

Phew! That finally gives us:

Code: PHP

4/ Validate the file's upload

If everything is fine, the file is accepted by calling move_uploaded_file().
This function takes 2 parameters:

• The temporary name of the file (we have it with $_FILES['myfile']['tmp_name'])
• The path and name under which the file will be stored permanently. We can use the file's original name $_FILES['myfile']['name'] or generate a name randomly.

I suggest that we place the file in a subfolder "uploads".
We'll keep the same file name as the original one. Since $_FILES['myfile']['name'] contains the entire path to the original file (C:\folder\file.png for instance), we'll have to extract the name from the file. We can use the function basename for that, which will only return "file.png"

Code: PHP





This script is only a beginning, and you will certainly have to improve it. For instance, if the file's name contains spaces or accents it will pose a problem once you have sent it on the web. Besides, if somebody uploads a file bearing the same name as someone else's, the old one will be overwritten!

The solution generally consists in "choosing" ourselves the name of the file stored on the server rather than using the original name. You can do an incrementing counter:
1.png, 2.png, 3.jpg etc.



If you want to go further, I recommend that you read DHKold's tutorial on file upload by forms. It's more exhaustive than mine and will expalin certain details better than I could.

Have a nice reading