Creating an HTML Form


Managing HTML forms with PHP is a two-step process. First you create the HTML form itself, using any text or WYSIWYG editor you choose. Then, you create the corresponding PHP script that will receive and process the form data.

It would be outside the realm of this book to go into HTML forms in any detail, but I will lead you through one quick example so that it may be used throughout the chapter.

An HTML form is created using the form tags and various input types. The form tags look like

 <form action="script.php" method="post"> </form> 

Choosing a Method

The method attribute of a form dictates how the data is sent to the handling page. The two optionsget and postrefer to the HTTP (Hypertext Transfer Protocol) method to be used. In short, the get method sends the submitted data to the receiving page as a series of name-value pairs appended to the URL. For example,

 www.dmcinsights.com/script.  hp?name=Homer&gender=M 

The benefit of using the get method is that the resulting page can be bookmarked in the user's Web browser (since it's a URL). For that matter, you can also click Back in your Web browser to return to a get page, or reload it without problem (neither of which is true for post). Unfortunately, you are limited to how much data can be transmitted via get and it's less secure (since the data is visible).

For these reasons I will generally use post tHRoughout this book, with noted exceptions. There's a slightly technical discussion of when you should use which available at www.w3.org/2001/tag/doc/whenToUseGet.html.


The most important attribute of your form tag is action, which dictates to which page the form data will be sent. The second attributemethodhas its own issues (see the "Choosing a Method" sidebar), but post is the value you'll use most frequently.

Within the opening and closing form tags you place the different inputs, be they text boxes, radio buttons, select menus, check boxes, etc. As you'll see in the next section, what kinds of inputs your form has makes little difference to the PHP script handling it. You should, however, pay attention to the names you give your form inputs, as they'll be of critical importance when it comes to your PHP code.

To create an HTML form

1.

Begin a new HTML document in your text editor (Script 2.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 xml:lang="en" lang="en"> <head>   <meta http-equiv="content-type"     content="text/html;    charset=iso-8859-1 />   <title>Simple HTML Form</title> </head> <body> <!-- Script 2.1 - form.html --> 

Script 2.1. This simple HTML form will be used for several of the examples in this chapter.


There's nothing terribly new hereI'm still using the same basic syntax for the HTML page as I have in the previous chapterbut I have added an HTML comment indicating the file's name and number.

2.

Insert the initial form tag.

 <form action="handle_form.php"  method="post> 

Since the action attribute dictates to which script the form data will go, you should give it an appropriate name (handle_form to correspond with this script: form.html) and the .php extension (since a PHP page will handle this form's data).

3.

Begin the HTML form.

 <fieldset><legend>Enter your  information in the form  below:</legend> 

I'm using the fieldset and legend HTML tags because I like the way they make the HTML form look (they add a box around the form with a title at top). This isn't pertinent to the form itself, though.

4.

Add two text inputs.

 <p><b>Name:</b> <input type="text"  name="name size="20"  maxlength="40 /></p> <p><b>Email Address:</b> <input  type="text name="email" size="40"  maxlength="60 /></p> 

These are just simple text inputs, allowing the user to enter their name and email address. In case you are wondering, the extra space and slash at the end of each input's tag is valid XHTML. With standard HTML, these tags would conclude, for instance, with maxlength="40"> or maxlength="60"> instead.

5.

Add a pair of radio buttons.

 <p><b>Gender:</b> <input  type="radio name="gender"  value="M /> Male <input  type="radio name="gender"  value="F /> Female</p> 

The radio buttons both have the same name, meaning that only one of the two can be selected. They have different values, though.

6.

Add a pull-down menu.

 <p><b>Age:</b> <select name="age">   <option value="0-29">Under    30</option>   <option value="30-60">Between 30     and 60</option>   <option value="60+">Over    60</option> </select></p> 

The select tag starts the pull-down menu, and then each option tag will create another line in the list of choices.

7.

Add a text box for comments.

 <p><b>Comments:</b> <textarea  name="comments rows="3"  cols="40></textarea></p> 

Textareas are different from text inputs; they are presented as a box, not as a single line. They allow for much more information to be typed and are useful for taking user comments.

8.

Complete the form.

   </fieldset>   <div align="center"><input    type="submit name="submit"    value="Submit My Information   /></div> </form> 

The first tag closes the fieldset that was opened in Step 3. Then a submit button is created and centered using a div tag. Finally the form is closed.

9.

Complete the HTML page.

 </body> </html> 

10.

Save the file as form.html, upload to your Web server, and view in your Web browser (Figure 2.1).

Figure 2.1. This form takes some basic information from the user.


Tips

  • Since this page contains just HTML, I used the .html extension, but I could have also used .php without harm (since code outside of the PHP tags is treated as HTML).

  • For more information on HTML, XHTML, and forms, check out any of the resources listed in Appendix C, "Resources."




    PHP and MySQL for Dynamic Web Sites. Visual QuickPro Guide
    PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (2nd Edition)
    ISBN: 0321336577
    EAN: 2147483647
    Year: 2005
    Pages: 166
    Authors: Larry Ullman

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net