PHP Tutorial – Lesson 6 HTML Forms are our friends!
It’s been a few days since I posted. The holiday season was great and is generally the only time I actually take some time off. The workaholic in me has finally kicked my butt and has sent me back to the office though, so here goes.
We talked earlier about sending input to a PHP script. So far, we have only discussed making requests via the GET method. The GET method is the method used most often on the internet. 99 percent of the time, when you click a hyperlink, you are using the GET method to retrieve the next page. The URL specified in the hyperlink instructs the browser as to which page to request next. It is common to embed data into these links by using the ? symbol and then following that with name=value pairs. This was discussed in an earlier tutorial in the series. In that tutorial, we entered the data (everything after the ?) on the address bar of the browser. This could easily have been put into a hyperlink URL.
The abillity to send data via a GET request was a great leap forward in interactive web design. The problem was (and still is) that GET has certain limits. A major limit is that many browsers and/or servers have a maximum length. This means that you can only send so much data via a URL (some where around 2K if I remember correctly). This is definatly not big enough for some purposes like uploading a file (an empty word document is around 25K if I remember right). The second major issue with using GET requests is that ALL of the information sent to the PHP script is visible on the address bar. Could you imagine logging into your email, and having your password visible on the address bar? Worse yet, most browsers remember the URLs and it could be sitting there in a list for some later user to inspect!
The solution to the GET problem was to create a new way to submit the data. The POST method does not send the data as part of the URL and therefore solves both problems at the same time. Lets look at an HTTP request in both formats to see the differences and the similarities. Notice that though the location of the information changes, the format (name=value pairs) does not.
GET Request
GET /login.php?user=bob&password=mypassword HTTP/1.0
POST Request
POST /login.php HTTP/1.0
user=bob&password=mypassword
That is an excerpt from the HTTP protocol and is an example of the conversation that goes on between a browser and a web server. See how similar the GET and POST methods are?
POST is NOT better than GET, it is just more appropriate in certain circumstances. When you fill out a form, POST is a great solution. When you are clicking a link, GET is generally the better solution. Hyperlinks can’t do a POST request, only GET (you can get it to do a POST but this requires some trickery that we in the industry call Javascript…).
How do you know when to use one or the other? If you really don’t want to display the information in the URL because it would cause security issues, or if the information that you are sending is very large, then you would use a POST, otherwise, use a GET. GET is more convenient as that is the default for all Hyperlinks. Post generally requires a whole form be involved.
What is this HTML form you mention??
Lets use a very simple form, a login box. A login box allows you to type in your User Name and your Password, and then hit the login button. Want to see an example of a login form? Try going to http://www.hotmail.com. Notice that you get a text box for user name, password, and a sign in button.
If you look at the source for that login box, you will find something similar to the following (This is greatly simplified, if you look at the source for hotmail, you will get TONS of other stuff).
<FORM action="login.php" method="POST">
User Name: <INPUT type=text name=user_name>
Password: <INPUT type=password name=password>
<INPUT type=submit value="Log In">
</FORM>
The form starts with the FORM tag. Notice that the closing FORM tag surrounds ALL the inputs that are in this form. This is important as you can have several different forms one page. By including all the inputs in the appropriate form (between the begning and end FORM tags), the form knows which values to package up and send to the server. Only INPUT items that are in the current form are sent (this includes TEXTAREA and SELECT inputs).
Each INPUT that you want sent to the PHP script gets a name. Notice that there is no name on the Log In button. We don’t need to send the value of the Log In button as it doesn’t really tell us anything. We do want to send the user name and password that the user typed in though, so these each get a name.
INPUT items also have a type. Notice that the text type is a simple text box, the password type is a text box that masks the characters type by showing dots, and the submit type is a button. There are others (radio, checkbox) and other input types that have their own special tag (SELECT, TEXTAREA).
Lets take a step back now and look more at the FORM tag. If you notice, it has an attribute called Method. Method can be either POST or GET. Try both and see the difference (setting it to get makes it act like a hyperlink in that it puts the data on the URL). We generally use POST when dealing with forms so that the data does not show up in the URL (more secure for username and password) and also to avoid having problems with maximum data sizes (there is still a maximum in cases, but it is generally 4 or 8 Meg instead of 2-4K).
Next, there is an attribute called action. This is simply a full or relative URL that says where to submit this information to. In our case, we will have a script called login.php waiting to recieve user names and passwords from our form. You will find in web programming that there are almost always two files for data entry, the form (actual data entry; login_form.php) and the action script (processing of the data entered; login.php). This is important because you need the form for the user to fill out, and then the script that does the processing (saving information into the database, sending an email, etc..).
Lets setup our own login form and script. First, create a file called login_form.php. In this file, paste the following…
<FORM action="login.php" method="POST">
User Name: <INPUT type=text name=user_name>
Password: <INPUT type=password name=password>
<INPUT type=submit value="Log In">
</FORM>
This was exactly the form we discussed earlier in the article.
Next, create a file called login.php and paste the following…
<?php
//Get the user name entered in the form
$user_name = $_POST["user_name"];
// Get the password entered in the form
$password = $_POST["password"];
echo "You entered: $user_name, $password
";
?>
Now, navigate to the form (login_form.php). You should see a form and be able to fill out your information. When you click the login button, the browser will package up the information in the inputs and send them to the script specified in action. Login.php runs and can use the POST array to get the values passed to it (or use the GET array if the information was sent via a GET request). The login script doesn’t actually do anything more than simply echo the information passed to it. If you really want to learn to do authentication in PHP, then come back later on for a future article on the subject.
Give it a try. Once it works, try moving one of the inputs outside of the FORM tag and see what happens?
Forms are the primary means of data entry for web based applications. Make sure you understand this material!
Happy Holidays
Ray Pulsipher
Owner
Computer Magic And Software Design
