HTML Forms and PHP
This chapter is from the book
This chapter is from the book
This chapter is from the book
In the previous chapter, you had a brief introduction to variables. Although you'll often create your own variables, you'll also commonly use variables in conjunction with HTML forms. Forms, as you've certainly seen, are a fundamental unit of today's Web sites, enabling such features as registration and login systems, search capability, and online shopping. Even the most basic site will find logical reasons to incorporate HTML forms. And, with PHP, it's stunningly simple to receive and handle data generated by them.
With that in mind, this chapter will cover the basics of creating HTML forms and how the form data is transmitted to your PHP script. Simultaneously, this chapter will introduce several key concepts of real PHP programming, including how to debug and manage errors in your scripts.
Creating a Simple Form
For the HTML form example in this chapter, you'll create a feedback page that takes the user's salutation, name, email address, response, and comment. You'll need to create the necessary fields with this in mind. First, let's briefly revisit the topic of XHTML.
As stated in the first chapter (which introduced the fact that this book would use XHTML), the language has some rules that result in a significantly different syntax than HTML. For starters, the code needs to be in all lowercase letters, and every tag attribute must be enclosed in quotes. Further, every tag must be closed; those that don't have formal closing tags, like <input>, are closed by adding a blank space and a slash at the end. Thus, in HTML you might write
<INPUT TYPE=TEXT NAME=address SIZE=40>
but in XHTML it's
<input type="text" name="address" size="40" />
This explanation will help to avoid confusion as the following page follows XHTML standards.
To start a basic HTML form:
- Open your text editor and begin a new document (Script 3.1):
<!DOCTYPE html PUBLIC "-//W3C//→DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/→xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/ → xhtml"> <head> <meta http-equiv="content-type" → content="text/html; charset= → iso-8859-1"/> <title>Feedback Form</title> </head> <body> Please complete this form to submit → your feedback: <br/>Script 3.1. Every HTML form begins and ends with the lt;form> tags. When you're hand-coding forms, take care not to forget either one. Also be sure to direct the form to the proper handling script using the action attribute.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset= iso-8859-1" /> 6 <title>Feedback Form</title> 7 </head> 8 <body> 9 Please complete this form to submit your feedback: <br /> 10 11 <form action="handle_form.php"> 12 13 </form> 14 15 <!-- Script 3.1 - feedback.html --> 16 </body> 17 </html> Add the opening and closing <form> tags:
<form action="handle_form.php"> </form>
The <form> tags dictate where a form begins and ends. Every element of the form must be entered between these two lines. The action attribute tells the server which page (or script) will receive the data from the form and is one of the most important considerations.
- Complete the page with the closing body and HTML tags.
<!-- Script 3.1 - feedback.html --> </body> </html>
- Save the page as feedback.html.
Now that you've been introduced to the fundamental form tags, let's add the various form elements (inputs for the user's name, email address, and so on) to complete the form.
To create form elements:
- After the opening form line (line 11) but before the closing form tag, press Enter (or Return) to create a new line.
Add three radio buttons for the person's title (Script 3.2):
Mr. <input type="radio" name="title" → value="Mr."/> Mrs. <input type="radio" name="title" → value="Mrs."/> Ms. <input type="radio" name="title" → value="Ms."/> <br/>
This HTML code creates three radio buttons (clickable circles; see Figure 3.1). Because they all have the same name value, only one of the three can be selected at a time. Per XHTML rules, the code is in lowercase except for the values, and an extra space and slash are added to the end of each input to close the tag.
Figure 3.1 The title radio buttons.
In the interest of spacing out the form, the <br/> tag is added at the end.
Add text inputs for the user's name and email address:
Name: <input type="text" name="name" → size="20" /> <br/> Email Address: <input type="text" → name="email" size="20" /> <br/>
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. These text inputs make the text boxes in the browser (Figure 3.2).
Figure 3.2 Text input types make boxes like these.
Script 3.2. You can add any combination of input types to your form—just ensure that all of them are within the lt;form> tags, or they won't appear.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 6 <title>Feedback Form</title> 7 </head> 8 <body> 9 Please complete this form to submit your feedback: <br /> 10 11 <form action="handle_form.php"> 12 13 Mr. <input type="radio" name="title" value="Mr." /> 14 Mrs. <input type="radio" name="title" value="Mrs." /> 15 Ms. <input type="radio" name="title" value="Ms." /> 16 <br /> 17 Name: <input type="text" name="name" size="20" /> 18 <br /> 19 Email Address: <input type="text" name="email" size="20" /> 20 <br /> 21 Response: <select name="response"> 22 <option value="excellent">This is excellent.</option> 23 <option value="okay">This is okay.</option> 24 <option value="boring">This is boring.</option> 25 </select> 26 <br /> 27 Comments: <textarea name="comments" rows="3" cols="30"></textarea> 28 <br /> 29 <input type="submit" name="submit" value="Send My Feedback" /> 30 31 </form> 32 33 <!-- Script 3.2 - feedback.html --> 34 </body> 35 </html>
Add a select menu for a response:
Response: <selectname="response"> <option value="excellent">This is → excellent.</option> <option value="okay">This is okay. → </option> <option value="boring">This is boring. → </option> </select> <br />
You add a response drop-down menu here mostly to use another popular form field type, the select menu (Figure 3.3). Each option listed between the select tags is an answer the user can choose.
Figure 3.3 The select tag creates a drop-down menu.
Add a textarea to record the comments:
Comments: <textareaname="comments" → rows="3"cols="30"></textarea> <br />
A textarea (Figure 3.4) gives the user more space to enter their comments than a text field would. However, the text input lets you limit how much information the user can enter, which you can't do with the textarea (not without using JavaScript, that is). When you're creating a form, choose input types appropriate to the information you wish to retrieve from the user.
Figure 3.4 The textarea tags generate a larger text box.
Add the submit button:
<input type="submit" name="submit" → value="Send My Feedback" />
The value attribute of a submit type is what appears on the button in the Web browser (Figure 3.5). You could also use Go! or Enter, for example.
Figure 3.5 Every form needs to have a submit button, which may look different from one Web browser to another.
- Save your script, upload it to your server (or store it in the appropriate directory on your computer in which you've installed PHP), and view it in your browser (Figure 3.6). (Because this is an HTML page, not a PHP script, you could view it in your Web browser directly from your computer.)
Figure 3.6 If you've typed in your form correctly, it should look like this in your Web browser.
)
)
)
)
)
)