| 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: <HTML><HEAD><TITLE>HTML Form </TITLE></HEAD><BODY></BODY> </HTML> -
Between the body tags, add the opening and closing <FORM> tags: <FORM ACTION="HandleForm.php"> </FORM> (Script 3.1). Script 3.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. 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. -
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><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. As you work, keep track of names you use for each field (Script 3.2). Script 3.2. Any combination of input types can be added to your formjust 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 professionaland more useableappearance. 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><BR> Comments <TEXTAREA NAME="Comments" ROWS=5 COLS=40></TEXTAREA><BR> 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 3.1). (Since this is an HTML page, not a PHP script, you could view this in your Web browser directly from your computer.) Figure 3.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. Tip 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. Tip 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.) Tip 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">. Tip 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. |