G.5. More Complex XHTML Forms In the preceding section, we introduced basic forms. In this section, we introduce elements and attributes for creating more complex forms. Figure G.4 contains a form that solicits user feedback about a Web site. Figure G.4. Form with text areas, a password box and checkboxes. 1 <?xml version = "1.0" ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 4 5 <!-- Fig. G.4: form2.html --> 6 <!-- Form Design Example 2 --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Forms</title> 11 </head> 12 13 <body> 14 15 <h1>Feedback Form</h1> 16 17 <p>Please fill out this form to help 18 us improve our site.</p> 19 20 <form method = "post" action = "/cgi-bin/formmail"> 21 22 <p> 23 <input type = "hidden" name = "recipient" 24 value = "deitel@deitel.com" /> 25 <input type = "hidden" name = "subject" 26 value = "Feedback Form" /> 27 <input type = "hidden" name = "redirect" 28 value = "main.html" /> 29 </p> 30 31 <p><label>Name: 32 <input name = "name" type = "text" size = "25" /> 33 </label></p> 34 35 <!-- <textarea> creates a multiline textbox --> 36 <p><label>Comments: <br /> 37 <textarea name = "comments" rows = "4" cols = "36"> 38 Enter your comments here. 39 </textarea> 40 </label></p> 41 42 <!-- <input type = "password"> inserts a --> 43 <!-- textbox whose display is masked with --> 44 <!-- asterisk characters --> 45 <p><label>E-mail Address: 46 <input name = "email" type = "password" 47 size = "25" /> 48 </label></p> 49 50 <p> 51 <strong>Things you liked:</strong><br /> 52 53 <label>Site design 54 <input name = "thingsliked" type = "checkbox" 55 value = "Design" /></label> 56 57 <label>Links 58 <input name = "thingsliked" type = "checkbox" 59 value = "Links" /></label> 60 61 <label>Ease of use 62 <input name = "thingsliked" type = "checkbox" 63 value = "Ease" /></label> 64 65 <label>Images 66 <input name = "thingsliked" type = "checkbox" 67 value = "Images" /></label> 68 69 <label>Source code 70 <input name = "thingsliked" type = "checkbox" 71 value = "Code" /></label> 72 </p> 73 74 <p> 75 <input type = "submit" value = 76 "Submit Your Entries" /> 77 <input type = "reset" value = 78 "Clear Your Entries" /> 79 </p> 80 81 </form> 82 83 </body> 84 </html>
  |
The textarea element (lines 3739) inserts a multiline text box, called a text area, into the form. The number of rows is specified with the rows attribute, and the number of columns (i.e., characters) is specified with the cols attribute. In this example, the textarea is four rows high and 36 characters wide. To display default text in the text area, place the text between the <textarea> and </textarea> tags. Default text can be specified in other input types, such as text boxes, by using the value attribute The "password" input in lines 4647 inserts a password box with the specified size. A password box allows users to enter sensitive information, such as credit card numbers and passwords, by "masking" the information input with asterisks (*). The actual value input is sent to the Web server, not the characters that mask the input. Lines 5471 introduce the checkbox form element. Checkboxes enable users to select from a set of options. When a user selects a checkbox, a check mark appears in the check box. Otherwise, the checkbox remains empty. Each "checkbox" input creates a new checkbox. Checkboxes can be used individually or in groups. Checkboxes that belong to a group are assigned the same name (in this case, "thingsliked"). Common Programming Error G.2  | When your form has several checkboxes with the same name, you must make sure that they have different values, or the scripts running on the Web server will not be able to distinguish them. |
We continue our discussion of forms by presenting a third example that introduces several additional form elements from which users can make selections (Fig. G.5). In this example, we introduce two new input types. The first type is the radio button (lines 7694) specified with type "radio". Radio buttons are similar to checkboxes, except that only one radio button in a group of radio buttons may be selected at any time. The radio buttons in a group all have the same name attributes and are distinguished by their different value attributes. The attribute-value pair checked = "checked" (line 77) indicates which radio button, if any, is selected initially. The checked attribute also applies to checkboxes. Figure G.5. Form including radio buttons and a drop-down list. 1 <?xml version = "1.0" ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 4 5 <!-- Fig. G.5: form3.html --> 6 <!-- Form Design Example 3 --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Forms</title> 11 </head> 12 13 <body> 14 15 <h1>Feedback Form</h1> 16 17 <p>Please fill out this form to help 18 us improve our site.</p> 19 20 <form method = "post" action = "/cgi-bin/formmail"> 21 22 <p> 23 <input type = "hidden" name = "recipient" 24 value = "deitel@deitel.com" /> 25 <input type = "hidden" name = "subject" 26 value = "Feedback Form" /> 27 <input type = "hidden" name = "redirect" 28 value = "main.html" /> 29 </p> 30 31 <p><label>Name: 32 <input name = "name" type = "text" size = "25" /> 33 </label></p> 34 35 <p><label>Comments:<br /> 36 <textarea name = "comments" rows = "4" 37 cols = "36"></textarea> 38 </label></p> 39 40 <p><label>E-mail Address: 41 <input name = "email" type = "password" 42 size = "25" /></label></p> 43 44 <p> 45 <strong>Things you liked:</strong><br /> 46 47 <label>Site design 48 <input name = "thingsliked" type = "checkbox" 49 value = "Design" /></label> 50 51 <label>Links 52 <input name = "thingsliked" type = "checkbox" 53 value = "Links" /></label> 54 55 <label>Ease of use 56 <input name = "thingsliked" type = "checkbox" 57 value = "Ease" /></label> 58 59 <label>Images 60 <input name = "thingsliked" type = "checkbox" 61 value = "Images" /></label> 62 63 <label>Source code 64 <input name = "thingsliked" type = "checkbox" 65 value = "Code" /></label> 66 </p> 67 68 <!-- <input type = "radio" /> creates a radio --> 69 <!-- button. The difference between radio buttons --> 70 <!-- and checkboxes is that only one radio button --> 71 <!-- in a group can be selected. --> 72 <p> 73 <strong>How did you get to our site?:</strong><br /> 74 75 <label>Search engine 76 <input name = "howtosite" type = "radio" 77 value = "search engine" checked = "checked" /> 78 </label> 79 80 <label>Links from another site 81 <input name = "howtosite" type = "radio" 82 value = "link" /></label> 83 84 <label>Deitel.com Web site 85 <input name = "howtosite" type = "radio" 86 value = "deitel.com" /></label> 87 88 <label>Reference in a book 89 <input name = "howtosite" type = "radio" 90 value = "book" /></label> 91 92 <label>Other 93 <input name = "howtosite" type = "radio" 94 value = "other" /></label> 95 96 </p> 97 98 <p> 99 <label>Rate our site: 100 101 <!-- the <select> tag presents a drop-down --> 102 <!-- list with choices indicated by the --> 103 <!-- <option> tags --> 104 <select name = "rating"> 105 <option selected = "selected">Amazing</option> 106 <option>10</option> 107 <option>9</option> 108 <option>8</option> 109 <option>7</option> 110 <option>6</option> 111 <option>5</option> 112 <option>4</option> 113 <option>3</option> 114 <option>2</option> 115 <option>1</option> 116 <option>Awful</option> 117 </select> 118 119 </label> 120 </p> 121 122 <p> 123 <input type = "submit" value = 124 "Submit Your Entries" /> 125 <input type = "reset" value = "Clear Your Entries" /> 126 </p> 127 128 </form> 129 130 </body> 131 </html>
  |
Common Programming Error G.3 | | Not setting the name attributes of the radio buttons in a form to the same name is a logic error because it lets the user select all of them at the same time. |
The select element (lines 104117) provides a drop-down list of items from which the user can select an item. The name attribute identifies the drop-down list. The option element (lines 105116) adds items to the drop-down list. The option element's selected attribute specifies which item initially is displayed as the selected item. |
