J.12. Basic XHTML Forms

When browsing Web sites, users often need to provide information such as e-mail addresses, search keywords and zip codes. XHTML provides a mechanism, called a form, for collecting such user information.

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 or 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 J.12 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 C++, C, Perl 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 in the form of 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.]

Figure J.12. Simple form with hidden fields and a text box.

(This item is displayed on pages 1349 - 1350 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 1 11 12 13

14 15

Feedback Form

16 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 29 "hidden" name = "recipient" 30 value = "[e-mail]" /> 31 32 "hidden" name = "subject" 33 value = "Feedback Form" /> 34 35 "hidden" name = "redirect" 36 value = "main.html" /> 37

38 39 40

41 Name: 42 "name" type = "text" size = "25" 43 maxlength = "30" /> 44 45

46 47

48 49 50 51 52 "submit" value = 53 "Submit Your Entries" /> 54 55 "reset" value = 56 "Clear Your Entries" /> 57

58 59 60 61 62

---

Forms can contain visual and non-visual components. Visual components include clickable buttons and other graphical user interface components with which users interact. Non-visual 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 begins at line 23 with the form element. Attribute method 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 2936 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 type attribute "hidden", which allows the document author to send form data that is not entered by a user to a script.

The three hidden inputs are an e-mail address to which the data will be sent, the e-mail'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.

Good Programming Practice J.6

Place hidden input elements at the beginning of a form, immediately after the opening tag. This placement allows document authors to locate hidden input elements quickly.

 

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.

Common Programming Error J.6

Forgetting to include a label element for each form element is a design error. Without these labels, users cannot determine the purpose of individual form elements.

 

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 types of input elements in lines 5256. 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). 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).