|
In case you are not familiar with HTML forms at all, let's begin by looking over what is involved in creating a web page that can collect information from a user and submit it to a web script. The <FORM> TagThe HTML <FORM> tag indicates an area of a web page that, when it contains text-entry fields or other form input elements, submits the values entered by a user to a particular URL. The ACTION attribute in a <FORM> tag indicates the location of the script that the values are to be passed to. It can be a location relative to the current page or a full URL that begins with http://. The METHOD attribute indicates the way in which the user's web browser will bundle up the data to be sent. Two methods, GET and POST, vary visibly only slightly. Form data submitted using the GET method is tagged on to the end of the URL, whereas the POST method sends the data to the web server without its being visible.
In most situations where you are using an HTML form, the POST method is preferable. It is not only better aestheticallybecause the submitted values are not revealed in the script URLbut there is no limit on the amount of data that can be submitted in this way. The amount of data that can be submitted by using the GET method is limited by the maximum URL length that a web browser can handle (the limit in Internet Explorer is 2,048 characters) and the HTTP version on the server (HTTP/1.0 must allow at least 256 characters, whereas HTTP/1.1 must allow at least 2,048). The <INPUT> TagThe <INPUT> tag is used to add one of several types of form input to a web page. The type of input item is specified in the TYPE attribute, and the simplest type is a TEXT input item. To create a TEXT input item that is suitable for entering a user's email address, you could use the following HTML: <INPUT TYPE="TEXT" NAME="name" SIZE="30" VALUE=""> In this HTML, you supply an empty VALUE attribute because you do not want to supply a default value for the input; however, the VALUE attribute can be omitted.
The CHECKBOX input type creates an input item that has only two possible values: on and off. Check boxes are useful for true/false values, and you could use the following HTML to create a check box with which the user could indicate whether he minds us contacting him by email: <INPUT TYPE="CHECKBOX" NAME="may_contact" VALUE="Y" CHECKED> In this case, the CHECKED attribute indicates that the check box should be checked automatically when the page loads. The RADIO type is similar to a check box, but instead of a true/false value, a radio button group can contain several values, of which only one can be selected at a time. To create a radio button group that can be used to gather the user's gender, you could use the following: <INPUT TYPE="radio" NAME="gender" VALUE="m"> Male <INPUT TYPE="radio" NAME="gender" VALUE="f"> Female
To indicate that one of the buttons in a radio button group should be pre-selected, you can use the CHECKED attribute. For instance, if you are creating a website that will appeal primarily to women, you can pre-select the female option, as follows: <INPUT TYPE="radio" NAME="gender" VALUE="m"> Male <INPUT TYPE="radio" NAME="gender" VALUE="f" CHECKED> Female The final input type that you will learn about is the SUBMIT button. This is the button you click to send the contents of a form to the script specified in the form's METHOD attribute. The label on the button is specified in the VALUE attribute, so the following HTML would create a submit button labeled Send comments: <INPUT TYPE=SUBMIT VALUE="Send comments"> A submit button can also have a NAME attribute, although this is rarely used. You will see later in this lesson how this affects the values sent to PHP. The <TEXTAREA> TagThe <TEXTAREA> tag is used to create a multiple-line text input item. In many respects, it behaves just like a TEXT type input tag, but the way it is formed in HTML is slightly different. Because the initial value in a text area could span many lines, it is not given in a VALUE attribute. Instead, the starting value appears between a pair of tags, as follows: <TEXTAREA ROWS=4 COLS=50 NAME="comments"> Enter your comments here </TEXTAREA> PHP is not concerned with what type of input a value comes from; the difference between a text area and text input is an HTML issue only. The <SELECT> TagThe final form item we will look at is the <SELECT> item, correctly known as a menu but more commonly called a drop-down list. The most common use of a menu is to prompt for a single selection from a predefined list of values. The following example builds a drop-down list of possible places that visitors may have heard about your website: <SELECT NAME="referrer"> <OPTION VALUE="search">Internet Search Engine</OPTION> <OPTION VALUE="tv">TV Advertisement</OPTION> <OPTION VALUE="billboard">Billboard</OPTION> <OPTION SELECTED VALUE="other">Other</OPTION> </SELECT> In this case, the SELECTED attribute makes "Other" the default selection, even though it appears at the top of the list. If no item has the SELECTED attribute, the first option in the list is selected by default. Putting It All TogetherBy putting all these form elements together and adding some label text and a little formatting, you can create a simple comments submission form that you can then process in PHP, as shown in Listing 11.1. Listing 11.1. A Web Form for Submitting User Comments<FORM ACTION="send_comments.php" METHOD=POST> <TABLE> <TR> <TD>Your name:</TD> <TD><INPUT TYPE="TEXT" NAME="name" SIZE=30></TD> </TR> <TR> <TD>Your email:</TD> <TD><INPUT TYPE="TEXT" NAME="email" SIZE=30></TD> </TR> <TR> <TD>Your gender:</TD> <TD><INPUT TYPE="RADIO" NAME="gender" VALUE="m"> Male <INPUT TYPE="RADIO" NAME="gender" VALUE="f"> Female </TD> </TR> <TR> <TD>How you found us</TD> <TD> <SELECT NAME="referrer"> <OPTION VALUE="search">Internet Search Engine</OPTION> <OPTION VALUE="tv">TV Advertisement</OPTION> <OPTION VALUE="billboard">Billboard</OPTION> <OPTION SELECTED VALUE="other">Other</OPTION> </SELECT> </TD> </TR> <TR> <TD>May we email you?</TD> <TD><INPUT TYPE="CHECKBOX" NAME="may_contact" VALUE="Y" CHECKED></TD> </TR> <TR> <TD>Comments</TD> <TD><TEXTAREA ROWS=4 COLS=50 NAME="comments">Enter your comments here </TEXTAREA></TD> </TR> </TABLE> <INPUT TYPE="SUBMIT" VALUE="Send comments"> </FORM> |
|