www.gibmonks.com

Main Page




Previous Page
Next Page

[Page 1352]

J.13. More Complex XHTML Forms

In the previous section, we introduced basic forms. In this section, we introduce elements and attributes for creating more complex forms. Figure J.13 contains a form that solicits user feedback about a Web site.

Figure J.13. Form with textareas, password boxes and checkboxes.
(This item is displayed on pages 1352 - 1354 in the print version)

 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. J.13: form2.html  -->
 6  <!-- Form design example 2. -->
 7
 8  <html xmlns = "http://www.w3.org/1999/xhtml">
 9     <head>
10        <title>Form design example 2</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
26              <input type = "hidden" name = "subject"
27                 value = "Feedback Form" />
28
29              <input type = "hidden" name = "redirect"
30                 value = "main.html" />
31           </p>
32
33           <p>
34              <label>Name:
35                 <input name = "name" type = "text" size = "25" />
36              </label>
37           </p>
38
39           <!-- <textarea> creates multiline textbox -->
40           <p>
41              <label>Comments:<br />
42                 <textarea name = "comments" rows = "4"
43                    cols = "36">Enter your comments here.
44                 </textarea>
45              </label></p>
46
47           <!-- <input type = "password"> inserts -->
48           <!-- textbox whose display is masked   -->
49           <!-- with asterisk characters          -->
50           <p>
51              <label>E-mail Address:
52                 <input name = "email" type = "password"
53                    size = "25" />
54              </label>
55           </p>
56
57           <p>
58              <strong>Things you liked:</strong><br />
59
60              <label>Site design
61              <input name = "thingsliked" type = "checkbox"
62                 value = "Design" /></label>
63
64              <label>Links
65              <input name = "thingsliked" type = "checkbox"
66                 value = "Links" /></label>
67
68              <label>Ease of use
69              <input name = "thingsliked" type = "checkbox"
70                 value = "Ease" /></label>
71
72              <label>Images
73              <input name = "thingsliked" type = "checkbox"
74                 value = "Images" /></label>
75
76              <label>Source code
77              <input name = "thingsliked" type = "checkbox"
78                 value = "Code" /></label>
79           </p>
80
81           <p>
82              <input type = "submit" value =
83                 "Submit Your Entries" />
84
85              <input type = "reset" value =
86                 "Clear Your Entries" />
87           </p>
88
89        </form>
90
91     </body>
92  </html>

The textarea element (lines 4244) inserts a multiline text box, called a textarea, 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 textboxes, by using the value attribute.

The "password" input in lines 5253 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 asterisks that mask the input.

Lines 6078 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").

We continue our discussion of forms by presenting a third example that introduces several more form elements from which users can make selections (Fig. J.14). In this example, we introduce two new input types. The first type is the radio button (lines 90113), 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. All radio buttons in a group have the same name attribute; they are distinguished by their different value attributes. The attributevalue pair checked ="checked" (line 92) indicates which radio button, if any, is selected initially. The checked attribute also applies to checkboxes.

Figure J.14. Form including radio buttons and drop-down lists.
(This item is displayed on pages 1355 - 1358 in the print version)

 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. J.14: form3.html  -->
 6   <!-- Form design example 3. -->
 7
 8   <html xmlns = "http://www.w3.org/1999/xhtml">
 9      <head>
10         <title>Form design example 3</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 
26               <input type = "hidden" name = "subject"
27                  value = "Feedback Form" />
28 
29               <input type = "hidden" name = "redirect"
30                  value = "main.html" />
31            </p>
32 
33            <p>
34               <label>Name:
35                  <input name = "name" type = "text" size = "25" />
36               </label>
37            </p>
38 
39            <p>
40               <label>Comments:<br />
41                  <textarea name = "comments" rows = "4"
42                     cols = "36"></textarea>
43               </label>
44            </p>
45 
46            <p>
47               <label>E-mail Address:
48                  <input name = "email" type = "password"
49                     size = "25" />
50               </label>
51            </p>
52 
53            <p>
54               <strong>Things you liked:</strong><br />
55 
56               <label>Site design
57                  <input name = "thingsliked" type = "checkbox"
58                     value = "Design" />
59               </label>
60 
61               <label>Links
62                  <input name = "thingsliked" type = "checkbox"
63                     value = "Links" />
64               </label>
65 
66               <label>Ease of use
67                  <input name = "thingsliked" type = "checkbox"
68                     value = "Ease" />
69               </label>
70 
71               <label>Images
72                  <input name = "thingsliked" type = "checkbox"
73                     value = "Images" />
74               </label>
75 
76               <label>Source code
77                  <input name = "thingsliked" type = "checkbox"
78                     value = "Code" />
79               </label>
80 
81            </p>
82 
83            <!-- <input type = "radio" /> creates one radio   -->
84            <!-- button. The difference between radio buttons -->
85            <!-- and checkboxes is that only one radio button -->
86            <!-- in a group can be selected.                  -->
87            <p>
88               <strong>How did you get to our site?:</strong><br />
89 
90               <label>Search engine
91                  <input name = "howtosite" type = "radio"
92                     value = "search engine" checked = "checked" />
93               </label>
94 
95               <label>Links from another site
96                  <input name = "howtosite" type = "radio"
97                     value = "link" />
98               </label>
99 
100              <label>Deitel.com Web site
101                 <input name = "howtosite" type = "radio"
102                    value = "deitel.com" />
103              </label>
104
105              <label>Reference in a book
106                 <input name = "howtosite" type = "radio"
107                    value = "book" />
108              </label>
109
110              <label>Other
111                 <input name = "howtosite" type = "radio"
112                    value = "other" />
113              </label>
114
115           </p>
116
117           <p>
118              <label>Rate our site:
119
120                 <!-- <select> tag presents a drop-down -->
121                 <!-- list with choices indicated by    -->
122                 <!-- <option> tags                     -->
123                 <select name = "rating">
124                    <option selected = "selected">Amazing</option>
125                    <option>10</option>
126                    <option>9</option>
127                    <option>8</option>
128                    <option>7</option>
129                    <option>6</option>
130                    <option>5</option>
131                    <option>4</option>
132                    <option>3</option>
133                    <option>2</option>
134                    <option>1</option>
135                    <option>Awful</option>
136                 </select>
137
138              </label>
139           </p>
140
141           <p>
142              <input type = "submit" value =
143                 "Submit Your Entries" />
144
145              <input type = "reset" value = "Clear Your Entries" />
146           </p>
147
148        </form>
149
150     </body>
151  </html>


[Page 1355]

Common Programming Error J.7

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 between them.


Common Programming Error J.8

When using a group of radio buttons in a form, forgetting to set the name attributes to the same name is a logic error that lets the user select all of the radio buttons at the same time.


The select element (lines 123136) provides a drop-down list from which the user can select an item. The name attribute identifies the drop-down list. The option element (lines 124135) adds items to the drop-down list. The option element's selected attribute specifies which item initially is displayed as the selected item in the select element.


Previous Page
Next Page