PHP | Handling Forms

What is Dynamic Sites?

Before Perl and PHP became widespread on the web site scene, the vast majority of sites were classed as "static" they would only change when the original author(s) uploaded new content to them. This was fine for the time, because the Internet's primary aim was for many years to be a tool to allow universities and research institutes to share information and learning.

When the Web first started to be used by the masses in the mid-90s, the number of uses it could be put to grew very quickly, and people wanted to do everything online reserving tickets for a gig, shopping, and downloading music. In order to be able to properly communicate with users, dynamic sites became popular because they could get feedback from users, allow users to influence content on sites by adding their own information and views, and form communities of people who all share the same goal.

Designing a Form

A "form" on the Web is considered to be zero or more form elements, plus a submit button. These forms are designed to electronically replicate the forms we've all filled in hundreds of times before in real life signing up for a bank account, a passport, etc. You start your form using the <form> HTML tag, and you end with </form>. By separating forms like this, you can have multiple forms on one page.

There are two attributes to the <form> tag that you should be aware of and use: action and method. Action sets the location of the page that will handle the results of the formthe place where the variables should be sent. Method describes how the data should be submitted, and you have two options: GET and POST.

GET and POST

When defining the method a web browser should use to send variables to the page specified by your action, you either use GET or POST. Both send variables across to a page, but they do so in different ways.

GET sends its variables in the URL of your visitors' web browsers, which makes it easy to see what was sent. However, it also makes it very easy for visitors to change what was sent, and, moreover, there is usually a low limit on the number of characters that can be sent in a URL often fewer than 250. As a result, if you send long variables using GET, you are likely to lose large amounts of them.

POST sends its variables behind the scenes, which means it is much harder to mimic, cannot be changed without some effort on your visitors' behalf, and has a much higher limit (usually several megabytes) on the amount of data that can be sent. The downside to using POST is that browsers will not automatically resend post data if your user clicks her Back button, leading to messages like "The data on this page needs to be resent", which often confuse users. This does not happen with GET, because browsers consider GET URLs the same as any other URL, and happily resend data as needed.

You can set how much data PHP should accept by editing the post_max_size enTRy in your php.ini fileit is usually set to 8M by default, allowing your users to transfer up to 8 megabytes.

Given this newfound knowledge, here's the same form again, this time using action and method. It will still look the same as our previous effort, but this time it will use POST to send data to someform.php:

<form action="someform.php" method="post">
<input type="submit" />
</form>

Available Elements

There are many types of elements you can place into your forms. The most important of these are shown in below table.

Element	Description
input type="checkbox"	A checkbox that lets users select multiple options.
input type="file"	A text box plus a button that opens a file selection dialog.
input type="hidden"	A hidden form element where you set the value.
input type="password"	A text box where the text is replaced by a password character (usually asterisk *).
input type="radio"	A radio button. Radio buttons are like grouped checkboxes you can only select one at a time.
input type="reset"	A button to clear the form. It's one of the weird oddities of the Web that this still existsdo you know anyone who uses it?
input type="submit"	A button to submit the form.
input type="text"	A text box.
option	An option in a SELECT element.
select	A listbox; can also be a drop-down list box.
textarea	Multiline text box.

A Working Form

We now have enough information to construct a working form, so here goes:

<form action="someform.php" method="post"> Name: <input type="text" name="Name" value="Jim" /><br /> Password: <input type="password" name="Password" /><br /> Age: <input type="text" name="Age" /><br /> <input type="submit" /> </form>

That will submit three variables to someform.php: Name, Password, and Age. Form variables are given names using the name attributethe names you use here will be used in the PHP script that receives the variables. The default value of a field can be set using the value attribute, which means that the Name text box will be set to Jim by default. This new form is shown in below figure.

The Age field, which will presumably contain numbers like 18, 34, etc., is the same type as the Name field, which is likely to contain strings like "Bob," "Sarah," etc. HTML does not have any way to say "restrict this field to numbers only," which means users can enter their age as "Elephant," if they wish. Never trust input from users!

And now a more complicated form, using various other types:

<form action="someform.php" method="get"> Name: <input type="text" name="Name" value="Jim" /><br /> Password: <input type="password" name="Password" maxlength="10" /><br /> Age range: <select name="Age"> <option value="Under 16">Under 16</option> <option value="16-30" selected="selected">16-30</option> <option value="31-50">31-50</option> <option value="51-80">51-80</option> </select><br /><br /> Life story:<br /> <textarea name="Story" rows="10" cols="80"> Enter your life story here</textarea><br /><br /> <input type="radio" name="FaveSport" value="Tennis" /> Tennis <input type="radio" name="FaveSport" value="Cricket" /> Cricket <input type="radio" name="FaveSport" value="Baseball" /> Baseball <input type="radio" name="FaveSport" value="Polo" /> Polo <br /> <input type="checkbox" name="Languages[ ]" value="PHP" checked="checked" /> PHP <input type="checkbox" name="Languages[ ]" value="CPP" /> C++ <input type="checkbox" name="Languages[ ]" value="Delphi" /> Delphi <input type="checkbox" name="Languages[ ]" value="Java" /> Java <br /><input type="submit" /> </form>

There are several pieces of particular importance in there, so you should read through carefully:

• maxlength="10" is one of the attributes for the Password elementthis can be used in normal text boxes too, and acts to restrict the number of characters that can be typed in to the value of maxlength (10, in the example).
• Age is now a drop down list box note how the name attribute is placed inside the select element, but each individual option element has its own value. The text inside the value attribute is what is submitted to the form handler specified in the form's action attribute. The text after each option and before the next option is the text the user will see.
• selected is specified as an attribute of one of the option elements, which means that that option will be the default selection of the parent select list.
• Life story is a textarea element. Note that it has attributes rows and cols to specify the size of the text area in characters.
• All members of a radio element group need to have the same name attribute. The name attribute is used to inform the browser which group each radio element is part of so that users can select only one at a time.
• All members of a checkbox group need to have the same name attribute, and that name attribute needs square brackets [ ] at the end. The reason for the square brackets is that it informs PHP that the value may be an array of informationusers can select multiple values, and PHP will place them all into an array of the value of the name attribute.
• checked is specified as an attribute of one of the checkboxes, which means it will be checked by default.
• GET is the method attribute for the form, meaning that the information sent through to the handler page (someform.php) will be sent in the location bar of the browser as a normal URL. This will allow you to see how easy it is to change variables in the location bar and, by entering lots of text into the Story textarea element, how easy it is to have too much data for GET to handle.

Below figure shows how the form should look.