When browsing Web sites, users often need to provide such information as search keywords, e-mail addresses and zip codes. XHTML provides a mechanism, called a form, for collecting such data from a user.
Data that users enter on a Web page normally is sent to a Web server that provides access to a site's resources (e.g., XHTML documents, images). These resources are located either on the same machine as the Web server or on a machine that the Web server can access through the network. When a browser requests a Web page or file that is located on a server, the server processes the request and returns the requested resource. A request contains the name and path of the desired resource and the method of communication (called a protocol). XHTML documents use the Hypertext Transfer Protocol (HTTP).
Figure G.3 sends the form data to the Web server, which passes the form data to a CGI (Common Gateway Interface) script (i.e., a program) written in Perl, C or some other language. The script processes the data received from the Web server and typically returns information to the Web server. The Web server then sends the information as an XHTML document to the Web browser. [Note: This example demonstrates client-side functionality. If the form is submitted (by clicking Submit Your Entries) an error occurs because we have not yet configured the required server-side functionality.]
Figure G.3. Form with hidden fields and a text box.
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
|"http://www.w3.org/1999/xhtml"> 9||10||Internet and WWW How to Program - Forms 11 12 13||14 15
Feedback Form16 17
Please fill out this form to help 18 us improve our site.19 20 21 22 23 "post" action = "/cgi-bin/formmail"> 24 25
26 27 28 "hidden" name = "recipient" 29 value = "email@example.com" /> 30 "hidden" name = "subject" 31 value = "Feedback Form" /> 32 "hidden" name = "redirect" 33 value = "main.html" /> 3435 36 37
Name: 38 "name" type = "text" size = "25" 39 maxlength = "30" /> 4041 42
43 44 45 46 "submit" value = 47 "Submit Your Entries" /> 48 "reset" value = 49 "Clear Your Entries" /> 5051 52 53 54 55
Forms can contain visual and nonvisual components. Visual components include clickable buttons and other graphical user interface components with which users interact. Nonvisual components, called hidden inputs, store any data that the document author specifies, such as e-mail addresses and XHTML document file names that act as links. The form is defined in lines 2352 by a form element. Attribute method (line 23) specifies how the form's data is sent to the Web server.
Using method = "post" appends form data to the browser request, which contains the protocol (i.e., HTTP) and the requested resource's URL. Scripts located on the Web server's computer (or on a computer accessible through the network) can access the form data sent as part of the request. For example, a script may take the form information and update an electronic mailing list. The other possible value, method = "get", appends the form data directly to the end of the URL. For example, the URL /cgi-bin/formmail might have the form information name = bob appended to it.
The action attribute in the
tag specifies the URL of a script on the Web server; in this case, it specifies a script that e-mails form data to an address. Most Internet Service Providers (ISPs) have a script like this on their site; ask the Web site system administrator how to set up an XHTML document to use the script correctly.
Lines 2833 define three input elements that specify data to provide to the script that processes the form (also called the form handler). These three input elements have the type attribute "hidden", which allows the document author to send form data that is not input by a user.
The three hidden inputs are: an e-mail address to which the data will be sent, the email's subject line and a URL where the browser will be redirected after submitting the form. Two other input attributes are name, which identifies the input element, and value, which provides the value that will be sent (or posted) to the Web server.
We introduce another type of input in lines 3839. The "text" input inserts a text box into the form. Users can type data in text boxes. The label element (lines 3740) provides users with information about the input element's purpose.
The input element's size attribute specifies the number of characters visible in the text box. Optional attribute maxlength limits the number of characters input into the text box. In this case, the user is not permitted to type more than 30 characters into the text box.
There are two other types of input elements in lines 4649. The "submit" input element is a button. When the user presses a "submit" button, the browser sends the data in the form to the Web server for processing. The value attribute sets the text displayed on the button (the default value is Submit Query). The "reset" input element allows a user to reset all form elements to their default values. The value attribute of the "reset" input element sets the text displayed on the button (the default value is Reset).
G 5 More Complex XHTML Forms
Introduction to Computers, the Internet and Visual C#
Introduction to the Visual C# 2005 Express Edition IDE
Introduction to C# Applications
Introduction to Classes and Objects
Control Statements: Part 1
Control Statements: Part 2
Methods: A Deeper Look
Classes and Objects: A Deeper Look
Object-Oriented Programming: Inheritance
Polymorphism, Interfaces & Operator Overloading
Graphical User Interface Concepts: Part 1
Graphical User Interface Concepts: Part 2
Strings, Characters and Regular Expressions
Graphics and Multimedia
Files and Streams
Extensible Markup Language (XML)
Database, SQL and ADO.NET
ASP.NET 2.0, Web Forms and Web Controls
Networking: Streams-Based Sockets and Datagrams
Searching and Sorting
Appendix A. Operator Precedence Chart
Appendix B. Number Systems
Appendix C. Using the Visual Studio 2005 Debugger
Appendix D. ASCII Character Set
Appendix E. Unicode®
Appendix F. Introduction to XHTML: Part 1
Appendix G. Introduction to XHTML: Part 2
Appendix H. HTML/XHTML Special Characters
Appendix I. HTML/XHTML Colors
Appendix J. ATM Case Study Code
Appendix K. UML 2: Additional Diagram Types
Appendix L. Simple Types