Introduction
At some point, all web developers will need to collect data from their users. In a dynamic web page, everything revolves around the users input, so knowing how to ask for and collect this data is essential to any developer.
This article is a basic tutorial on how to user HTML Forms, the most common method of data collection.
Assumptions
- Basic HTML knowledge.
- Basic PHP knowledge.
HTML Forms
A common and simple way of gathering data is through HTML Forms. Forms are containers for user input and can contain any number of different input types.
The HTML form element requires a few parameters to work properly:
- Action: this should point to the page that is meant to process the collected data. As soon as the form is submitted, the browser is redirected to this location, along with all your data.
- Method: this is the method of transportation. There are two choices here: 'GET' and 'POST'. I will cover them both in the next chapter.
A typical form element might look like this:
-
<form id="Form1" action="submit.php" method="post">
-
<!-- Input elements will be put here -->
-
</form>
-
GET & POST
The methods used to transport the data from our forms to the server are called GET and POST.
For simple text forms, both of them will work fine. But for more complex data, such as Unicode text and files, the GET protocol can not be used.
When using the GET protocol, the form data is transported via the URL string.
That is to say; each variable, accompanied by it's data, is added to the URL.
Because of this, the GET protocol can only transport characters that can be encoded into the URL, and can not exceed the maximum characters allowed in an URL string.
This is how a typical URL string may look when using the GET protocol.
-
http://www.example.com/page.php?fname=John&lname=Doe
-
The POST protocol uses the HTTP request itself to transport the data.
The result of this is that the data itself is not visible to the user, and this allows us to transport large amounts of data, including binary data.
I would recommend using this method rather than the GET method with very few exceptions.
Most modern HTTP servers are able to process requests that contain both methods at the same time (some older versions of IIS do not however), which can be useful at times.
Either of these two can be intercepted and read by most novice hackers, so never assume unencrypted data is safe.
Be careful when submitting sensitive data, and try to take extra security measures when possible.
The Input element
As all forms do, HTML forms need fields that need to be filled. That is what the input element is for.
Input elements are positioned inside the form element, and can be used as a number of different fields:
- Text: This input forms a simple textbox.
- Password: This is like the Text input, except all letters are hidden, using * signs.
- Button: This creates a simple button. Mostly used to trigger scripts.
- Submit: This also creates a button, except when this button is clicked, the form is submitted.
- Reset: Like the submit type, this is a button. When clicked, this button resets all input fields in the form.
- Checkbox: This creates a checkbox. Only boxes that have been checked will be sent along with the data. Unchecked boxes will be disregarded.
- Radio: Creates a radio button. If you create a number of these with the same name, only one of them can be selected at any given time, and only the selected one will be included with the data.
- Hidden: This field is not displayed. It is hidden, but its value will be sent. These can be highly useful when populating forms using scripts.
A simple example of a form populated with input elements:
-
<form id="Form1" action="submit.php" method="post">
-
Username: <input type="text" name="Username" /><br />
-
Password: <input type="password" name="Password" /><br />
-
Remember me: <input type="checkbox" name="Remember" checked="checked" />
-
<input type="hidden" name="SubmitCheck" value="sent" />
-
<input type="Submit" name="Form1_Submit" value="Login" />
-
</form>
-
Reading the form data
All right! Now we have a form, all we need to do know is read the data. To do that we are going to use PHP.
PHP contains these three arrays; $_GET, $_POST and $_REQUEST.
The first two are pretty transparent. The third, however is different.
The $_GET and $_POST arrays contain all the data sent using either the GET or the POST methods. Logically, the $_GET array contains GET data, and the $_POST array the POST data.
The index(key) of the array is the name property of the input element. So if we were to send the form we created earlier, we could print the Username you passed like this:
'echo $_POST['Username'];'
The $_REQUEST array is a little different than the other two.
It contains both GET and POST data, so if your lazy you can just call "$_REQUEST['Username']" instead of $_GET or $_POST.
Note, that depending on your PHP configuration, either the $_GET or $_POST array (aswell as the $_COOKIE array) supersedes the other, overriding duplicate values. So it is safest to always use $_GET or $_POST
Using the collected data
So before we finish this, let's make a simple example, using our login form from before.
This form tests for the username 'John' and the password 'Doe' and responds accordingly.
Note, that I have changed the 'action' property of the form to point to itself, which will cause the page to reload, along with the data.
-
<?php
-
###
-
# Warning!
-
# This code contains severe security issues
-
# which should be addressed before real-life usage.
-
#
-
# These issues have been ignored intentionally to
-
# simplify the code so we can focus on the topic
-
# in discussion.
-
#
-
# They are a subject of a much more advanced
-
# topic than the one covered in this article.
-
###
-
-
// Lets test if the form has been submitted
-
if(isset($_POST['SubmitCheck'])) {
-
// The form has been submited
-
// Check the values!
-
if($_POST['Username'] == "John" and $_POST['Password'] == "Doe") {
-
// User validated!
-
echo "Thats right! You have been logged in!";
-
-
// Check if the checkbox was checked
-
if(isset($_POST['Remember'])) {
-
echo "<br />You will be remembered!";
-
}
-
else {
-
echo "<br />John who?!";
-
}
-
}
-
else {
-
// User info invalid!
-
echo "Sorry mate, try again!";
-
}
-
}
-
else {
-
// The form has not been posted
-
// Print the form
-
echo <<<END
-
<form id="Form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
-
Username: <input type="text" name="Username" /><br />
-
Password: <input type="password" name="Password" /><br />
-
Remember me: <input type="checkbox" name="Remember" checked="chekced" />
-
<input type="hidden" name="SubmitCheck" value="sent" />
-
<input type="Submit" name="Form1_Submit" value="Login" />
-
</form>
-
END;
-
}
-
?>
-
The finish line
So, thats it for my extremely basic article on HTML Forms.
A final warning!
Use data posted through HTML Forms carefully.
Always assume the data you receive is somehow meant to damage your web and validate it accordingly!
Remember that your web is only as good as the information it displays, so make sure your data is in order.
Me or one of my fellow developers here at TSDN will most like be posting an article on input validation in the near future, so stay tuned!
- Atli Þór
