How Forms Work
| < Day Day Up > |
| You've undoubtedly used forms on the Web, and you might even understand how they're laid out and how they work. Regardless, a review of HTML form basics is in order. Short Review of HTML Form ElementsBefore you jump into how a form works, you should review how HTML represents a form and the roles that all the elements in that form play. By the Way The HTML presented in this book should not be taken as a model of great HTML. Enough HTML is presented to demonstrate the CGI features needed, but not much else. There are generally no <head> or <body> tags shown, nor a <!DOCTYPE> in any of the HTML presented in the examples. In addition, the screens are quite plain. Feel free to add your own HTML to make the screens more attractive and complete. Most browsers will display the HTML presented here correctly. An HTML form is a portion of an HTML document that accepts user input. When the browser loads HTML containing a form, various HTML tags create user input areas on the page. The user input is put into various form elements such as check boxes, radio buttons , selection menus , and text entry elements. After the user has manipulated the input elements with the web browser, the form is typically submitted to a CGI program for processing. A typical HTML form is constructed something like the one shown in Listing 22.1. Listing 22.1. A Small HTML Form1: <form action="http://www.server.com/cgi-bin/submit.cgi" method="get"> 2: Name <input type="text" name="name"/><br/> 3: Description<br/> 4: <textarea name="description" rows="5" cols="40"> 5: </textarea> 6: <input type="radio" name="sex" value="male"/>Male 7: <input type="radio" name="sex" value="female"/>Female 8: <br/> 9: <input type="submit" value="Send"/><input type="reset"/> 10: </form> Figure 22.1 shows the form from Listing 22.1 rendered with the Netscape browser. Figure 22.1. The form from Listing 22.1 rendered in Netscape. The <form> tag specifies the beginning of the form within the complete HTML document. The method attribute specifies whether this form will use the GET or POST method for form submission. If this attribute is not specified, the browser submits the form to the CGI program using the GET method. The difference between the methods is documented later. The action attribute specifies the URL of the CGI program that will receive the form data. The <input> tag presents the user with an input field ”in this case, a blank text box. The text box is assigned a name ”coincidentally "name". The <textarea> tag causes the browser to display a multiline text box to accept input. The important attribute to notice is the name attribute; in this case, the name of the field is description . Each form element in an HTML form should have a different name attribute. When the CGI program is given the form for processing, the name attribute is used to tell the fields apart. Finally, the submit button is displayed. When the user clicks this button, the form values are passed to a CGI program for processing, as explained in the next section. The HTML 4.0 specification contains quite a few different form element types, so I will not try to document them all fully in this book. For example, many form elements contain attributes to fix certain properties of the form element, such as rows and cols in the textarea in the preceding form. For the rest of this book, whenever HTML form elements are used, only the most basic attributes will be used. By the Way You can find the full HTML 4.0 specification, including the valid form elements and their attributes, at http://www.w3c.org. What Happens When You Click Submit?After a user has filled in a form on his or her web browser, a short chain of events takes place:
|
EAN: 2147483647
Pages: 241