J.13. More Complex XHTML Forms

Table of contents:

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)

"http://www.w3.org/1999/xhtml"> 9 10

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.1//EN"
 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4
 5 
 6 
 7
 8 
Form design example 2 11 12 13 14 15

Feedback Form

16 17

Please fill out this form to help 18 us improve our site.

19 20 "post" action = "/cgi-bin/formmail"> 21 22

23 "hidden" name = "recipient" 24 value = "deitel@deitel.com" /> 25 26 "hidden" name = "subject" 27 value = "Feedback Form" /> 28 29 "hidden" name = "redirect" 30 value = "main.html" /> 31

32 33

34 Name: 35 "name" type = "text" size = "25" /> 36 37

38 39 40

41 Comments:
42 <span style="color: #0099CC;">"comments"</span> <span style="color: #000099;">rows =</span> <span style="color: #0099CC;">"4"</span> 43 <span style="color: #000099;">cols =</span> <span style="color: #0099CC;">"36"</span><span style="color: #000099;">></span>Enter your comments here. 44 <span style="color: #000099;"> 45

46 47 48 49 50

51 E-mail Address: 52 "email" type = "password" 53 size = "25" /> 54 55

56 57

58 Things you liked:
59 60 Site design 61 "thingsliked" type = "checkbox" 62 value = "Design" /> 63 64 Links 65 "thingsliked" type = "checkbox" 66 value = "Links" /> 67 68 Ease of use 69 "thingsliked" type = "checkbox" 70 value = "Ease" /> 71 72 Images 73 "thingsliked" type = "checkbox" 74 value = "Images" /> 75 76 Source code 77 "thingsliked" type = "checkbox" 78 value = "Code" /> 79

80 81

82 "submit" value = 83 "Submit Your Entries" /> 84 85 "reset" value = 86 "Clear Your Entries" /> 87

88 89 90 91 92

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 </tt> and <tt> 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)

"http://www.w3.org/1999/xhtml"> 9 10

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.1//EN"
 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4
 5 
 6 
 7
 8 
Form design example 3 11 12 13 14 15

Feedback Form

16 17

Please fill out this form to help 18 us improve our site.

19 20 "post" action = "/cgi-bin/formmail"> 21 22

23 "hidden" name = "recipient" 24 value = "deitel@deitel.com" /> 25 26 "hidden" name = "subject" 27 value = "Feedback Form" /> 28 29 "hidden" name = "redirect" 30 value = "main.html" /> 31

32 33

34 Name: 35 "name" type = "text" size = "25" /> 36 37

38 39

40 Comments:
41 <span style="color: #0099CC;">"comments"</span> <span style="color: #000099;">rows =</span> <span style="color: #0099CC;">"4"</span> 42 <span style="color: #000099;">cols =</span> <span style="color: #0099CC;">"36"</span><span style="color: #000099;">> 43 44

45 46

47 E-mail Address: 48 "email" type = "password" 49 size = "25" /> 50 51

52 53

54 Things you liked:
55 56 Site design 57 "thingsliked" type = "checkbox" 58 value = "Design" /> 59 60 61 Links 62 "thingsliked" type = "checkbox" 63 value = "Links" /> 64 65 66 Ease of use 67 "thingsliked" type = "checkbox" 68 value = "Ease" /> 69 70 71 Images 72 "thingsliked" type = "checkbox" 73 value = "Images" /> 74 75 76 Source code 77 "thingsliked" type = "checkbox" 78 value = "Code" /> 79 80 81

82 83 84 85 86 87

88 How did you get to our site?:
89 90 Search engine 91 "howtosite" type = "radio" 92 value = "search engine" checked = "checked" /> 93 94 95 Links from another site 96 "howtosite" type = "radio" 97 value = "link" /> 98 99 100 Deitel.com Web site 101 "howtosite" type = "radio" 102 value = "deitel.com" /> 103 104 105 Reference in a book 106 "howtosite" type = "radio" 107 value = "book" /> 108 109 110 Other 111 "howtosite" type = "radio" 112 value = "other" /> 113 114 115

116 117

118 Rate our site: 119 120 121 122 123 "rating"> 124"selected">Amazing 12510 1269 1278 1287 1296 1305 1314 1323 1332 1341 135Awful 136 137 138 139

140 141

142 "submit" value = 143 "Submit Your Entries" /> 144 145 "reset" value = "Clear Your Entries" /> 146

147 148 149 150 151


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.

Introduction to Computers, the Internet and World Wide Web

Introduction to C++ Programming

Introduction to Classes and Objects

Control Statements: Part 1

Control Statements: Part 2

Functions and an Introduction to Recursion

Arrays and Vectors

Pointers and Pointer-Based Strings

Classes: A Deeper Look, Part 1

Classes: A Deeper Look, Part 2

Operator Overloading; String and Array Objects

Object-Oriented Programming: Inheritance

Object-Oriented Programming: Polymorphism

Templates

Stream Input/Output

Exception Handling

File Processing

Class string and String Stream Processing

Web Programming

Searching and Sorting

Data Structures

Bits, Characters, C-Strings and structs

Standard Template Library (STL)

Other Topics

Appendix A. Operator Precedence and Associativity Chart

Appendix B. ASCII Character Set

Appendix C. Fundamental Types

Appendix D. Number Systems

Appendix E. C Legacy Code Topics

Appendix F. Preprocessor

Appendix G. ATM Case Study Code

Appendix H. UML 2: Additional Diagram Types

Appendix I. C++ Internet and Web Resources

Appendix J. Introduction to XHTML

Appendix K. XHTML Special Characters

Appendix L. Using the Visual Studio .NET Debugger

Appendix M. Using the GNU C++ Debugger

Bibliography



C++ How to Program
C++ How to Program (5th Edition)
ISBN: 0131857576
EAN: 2147483647
Year: 2004
Pages: 627

Flylib.com © 2008-2020.
If you may any questions please contact us: flylib@qtcs.net