Section G.4. Basic XHTML Forms | Visual Basic 2005 for Programmers (2nd Edition)

G.4. Basic XHTML Forms

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  <?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.3: form.html   -->  6  <!-- Form Design Example 1 -->  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        <!-- this tag starts the form, gives the   --> 21        <!-- method of sending information and the --> 22        <!-- location of form scripts              --> 23        <form method = "post" action = "/cgi-bin/formmail"> 24 25           <p> 26              <!-- hidden inputs contain non-visual --> 27              <!-- information                      --> 28              <input type = "hidden" name = "recipient" 29                 value = "deitel@deitel.com" />         30              <input type = "hidden" name = "subject" 31                 value = "Feedback Form" /> 32              <input type = "hidden" name = "redirect" 33                 value = "main.html" /> 34           </p> 35 36           <!-- <input type = "text"> inserts a text box --> 37           <p><label>Name:                                      38                 <input name = "name" type = "text" size = "25" 39                    maxlength = "30" />                         40              </label></p>                                      41 42           <p> 43              <!-- input types "submit" and "reset" insert --> 44              <!-- buttons for submitting and clearing the --> 45              <!-- form's contents                         --> 46              <input type = "submit" value = 47                 "Submit Your Entries" />    48              <input type = "reset" value =  49                 "Clear Your Entries" />     50           </p> 51 52        </form> 53 54     </body> 55  </html>

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 <form> 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 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 G.1

Place hidden input elements at the beginning of a form, immediately after the opening <form> 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.

Look-and-Feel Observation G.1

Include a label element for each form element to help users determine the purpose of each form element.

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).