HTML Forms and PHP
- Creating a Simple Form
- Using Get or Post
- Receiving Data from a Form in PHP
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Web sites use forms to register and log in users, to receive feedback, for online shopping, and for many other purposes. Even the most basic site will find logical reasons to incorporate them.
Frequently, programmers create CGI scripts in Perl to handle the data created by these forms, but the same results can be achieved more easily using PHP. Unlike CGI scripts, where you have to write a segment of code that will extract the information sent by the form, PHP has a nice method of built-in support for receiving data from an HTML form without the need of any parsing.
This article will cover the basics of creating HTML forms and how that data is transmitted to your PHP script. Those who are new to the topic of forms may want to refer to an in-depth HTML resource, such as HTML for the World Wide Web: Visual QuickStart Guide, for more detailed coverage of the topic, considering their importance in the field of Web site design.
Creating a Simple Form
For your HTML form you will create a feedback page that takes the user's first and last names, e-mail address, and comments. You'll need to create the necessary fields with this in mind.
To create an HTML form:
Open your text editor and create a new document:
Between the body tags, add the opening and closing <FORM> tags:
Save the page as form.html.
After the opening FORM line (line 6) but before the closing FORM tag, press Return to create a new line.
- Now begin adding your form fields by typing:
First Name <INPUT TYPE=TEXT NAME= "FirstName" SIZE=20>
Follow a consistent naming convention within your form by giving each field a logical and descriptive name. Use letters, numbers, and the underscore (_) when naming fields. As you work, keep track of names you use for each field (Script 2).
Last Name <INPUT TYPE=TEXT NAME= "LastName" SIZE=40><BR>
Add the <BR> tags to make the form look cleaner when viewed in the Web browser.
E-mail Address <INPUT TYPE= TEXT NAME="Email" SIZE=60>
Comments <TEXTAREA NAME="Comments" ROWS=5 COLS=40></TEXTAREA><BR>Script 2 Any combination of input types can be added to your form -- just ensure that all of them are within the <FORM> tags or else those elements will not appear. As a stylistic suggestion, laying out these input elements within a table can give your form a more professional-- and more useable -- appearance.
A TEXTAREA gives the user more space to enter in their comments than a TEXT field would. However, with the TEXT input you can limit how much information the user can enter, which you cannot do with the TEXTAREA. When creating your form, choose input types appropriate to the information you wish to retrieve from the user.
On a separate line, type
<INPUT TYPE=SUBMIT NAME="SUBMIT" VALUE="Submit!">
The VALUE of a SUBMIT type is what will appear on the button itself in the Web browser. You could also use "Go!" or "Enter," for example.
Save your script, upload it to your server, and view it in your browser (Figure 1). (Since this is an HTML page, not a PHP script, you could view this in your Web browser directly from your computer.)
<HTML><HEAD><TITLE>HTML Form </TITLE></HEAD><BODY></BODY> </HTML>
<FORM ACTION="HandleForm.php"> </FORM>
(Script 1).
){kind=link}
The <FORM> tags dictate where a form begins and ends. Every element of the form must be entered within these two lines. The ACTION attribute tells the server which page (or script) will receive the data from the form.
Script 1 Every HTML form begins and ends with the <FORM></FORM> tags. When hand-coding forms, take care not to forget either tag. Also be sure to direct the form to the proper handling script with the ACTION attribute.
){kind=link}
){kind=link}
Figure 1 If you have typed in your form correctly, it should look like this in your Web browser. Make sure that you close the form and include the submit button within it.
TIPS
In this example you created your form by hand-coding the HTML, but you can do this in a Web page application (such as Dreamweaver or GoLive) if that is what you are more comfortable with.
Note that you used the HTML extension (.html) here as you created a standard HTML page (not necessarily a PHP page). You could have used the PHP extension and achieved the same results, even though there is no actual PHP utilized. (Remember that in a PHP page, anything not within the PHP brackets--<?php and ?>--gets treated like HTML.)
Although I didn't do so here, I would recommend that most forms, especially more involved ones, also have a Reset button, created with the code:
<INPUT TYPE=RESET NAME=RESET VALUE="Reset">
Be careful to make sure that your ACTION attribute correctly points to an existing file on the server or else your form will not be processed. In this case, we are indicating that the HandleForm.php file is within the same directory as the form.html page.