19.1 How HTML Forms Transmit Data

HTML forms let you create a variety of user interface controls to collect input in a Web page. Each of the controls typically has a name and a value, where the name is specified in the HTML and the value comes either from user input or from a default value in the HTML. The entire form is associated with the URL of a program that will process the data, and when the user submits the form (usually by pressing a button), the names and values of the controls are sent to the designated URL as a string of the form

 name1=value1&name2=value2...&name  N  =value  N

This string can be sent to the designated program in one of two ways: GET or POST . The first method, an HTTP GET request, appends the form data to the end of the specified URL after a question mark. The second method, HTTP POST , sends the data after the HTTP request headers and a blank line. In the following examples, we show explicitly how the data is sent to the server for both GET and POST requests .

For example, Listing 19.1 (HTML code) and Figure 19-1 (typical result) show a simple form with two textfields . The HTML elements that make up this form are discussed in detail in the rest of this chapter, but for now note a couple of things. First, observe that one textfield has a name of firstName and the other has a name of lastName . Second, note that the GUI controls are considered text-level (inline) elements, so you need to use explicit HTML formatting to make sure that the controls appear next to the text describing them. Finally, notice that the FORM element designates http://localhost:8088/SomeProgram as the URL to which the data will be sent.

Figure 19-1. Initial result of `GetForm.html` .

graphics/19fig01.jpg

Before submitting the form, we started a server program called EchoServer on port 8088 of our local machine. EchoServer , shown in Section 19.12, is a mini Web server used for debugging. No matter what URL is specified and what data is sent to EchoServer , it merely returns a Web page showing all the HTTP information sent by the browser. As shown in Figure 19-2, when the form is submitted with Joe in the first textfield and Hacker in the second, the browser simply requests the URL http://localhost:8088/SomeProgram?firstName=Joe&lastName=Hacker .

Listing 19.1 GetForm.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>   <TITLE>A Sample Form Using GET</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <CENTER> <H2>A Sample Form Using GET</H2>  <FORM ACTION="http://localhost:8088/SomeProgram">   First name:   <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR>   Last name:   <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P>   <INPUT TYPE="SUBMIT"> <!-- Press this button to submit form -->   </FORM>  </CENTER> </BODY></HTML>

Figure 19-2. HTTP request sent by Internet Explorer 6.0 when submitting `GetForm.html` .

graphics/19fig02.jpg

Listing 19.2 (HTML code) and Figure 19-3 (typical result) show a variation that uses POST instead of GET . As shown in Figure 19-4, submitting the form with textfield values of Joe and Hacker results in the line firstName=Joe&lastName=Hacker being sent to the browser on a separate line after the HTTP request headers and a blank line.

Figure 19-3. Initial result of `PostForm.html` .

graphics/19fig03.jpg

Figure 19-4. HTTP request sent by Internet Explorer 6.0 when submitting `PostForm.html` .

graphics/19fig04.jpg

That's the general idea behind HTML forms: GUI controls gather data from the user, each control has a name and a value, and a string containing all the name/value pairs is sent to the server when the form is submitted. Extracting the names and values on the server is straightforward in servlets: that subject is covered in Chapter 4 (Handling the Client Request: Form Data). The commonly used form controls are covered in the following sections.

Listing 19.2 PostForm.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>   <TITLE>A Sample Form Using POST</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <CENTER> <H2>A Sample Form Using POST</H2> <FORM ACTION="http://localhost:8088/SomeProgram"  METHOD="POST"  >   First name:   <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR>   Last name:   <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P>   <INPUT TYPE="SUBMIT"> </FORM> </CENTER> </BODY></HTML>

Figure 19-1. Initial result of GetForm.html .

Listing 19.1 GetForm.html

Figure 19-2. HTTP request sent by Internet Explorer 6.0 when submitting GetForm.html .

Figure 19-3. Initial result of PostForm.html .

Figure 19-4. HTTP request sent by Internet Explorer 6.0 when submitting PostForm.html .

Listing 19.2 PostForm.html

Figure 19-1. Initial result of `GetForm.html` .

Figure 19-2. HTTP request sent by Internet Explorer 6.0 when submitting `GetForm.html` .

Figure 19-3. Initial result of `PostForm.html` .

Figure 19-4. HTTP request sent by Internet Explorer 6.0 when submitting `PostForm.html` .