HTML-Forms.pdf

C REATING AND

P ROCESSING HTML

F ORMS

Topics in This Chapter

• Data submission from forms

• Text controls

• Push buttons

• Check boxes and radio buttons

• Combo boxes and list boxes

• File upload controls

• Server-side image maps

• Hidden fields

• Groups of controls

• Tab ordering

• A Web server for debugging forms

Training courses from the book’s author:

http://courses.coreservlets.com/

• Personally developed and taught by Marty Hall

• Available onsite at your organization (any country)

• Topics and pace can be customized for your developers

• Also available periodically at public venues

• Topics include Java programming, beginning/intermediate servlets

and JSP, advanced servlets and JSP, Struts, JSF/MyFaces, Ajax,

GWT, Ruby/Rails and more. Ask for custom courses!

Training courses from the book’s author:

http://courses.coreservlets.com/

• Personally developed and taught by Marty Hall

• Available onsite at your organization (any country)

• Topics and pace can be customized for your developers

• Also available periodically at public venues

• Topics include Java programming, beginning/intermediate servlets

and JSP, advanced servlets and JSP, Struts, JSF/MyFaces, Ajax,

GWT, Ruby/Rails and more. Ask for custom courses!

HTML forms provide a simple and reliable user interface to collect data from the

user and transmit the data to a servlet or other server-side program for processing.

In this chapter we present the standard form controls defined by the HTML 4.0

specification. However, before covering each control, we first explain how the form

data is transmitted to the server when a GET or POST request is made.

We also present a mini Web server that is useful for understanding and debugging

the data sent by your HTML forms. The server simply reads all the HTTP data sent

to it by the browser, then returns a Web page with those lines embedded within a

PRE element. We use this server throughout the examples in this chapter to show the

form control data that is sent to the server when the HTML form is submitted.

To use forms, you’ll need to remember where to place regular HTML files to

make them accessible to the Web server. This location varies from server to server, as

discussed in Chapter 2 and the Appendix. Below, we review the location for HTML

files in the default Web application for Tomcat, JRun, and Resin.

Default Web Application: Tomcat

• Main Location.

install_dir /webapps/ROOT

• Corresponding URL.

http:// host / SomeFile .html

• More Specific Location (Arbitrary Subdirectory).

install_dir /webapps/ROOT/ SomeDirectory

607

J2EE training from the author: http://courses.coreservlets.com/

608

Chapter 19 ■ Creating and Processing HTML Forms

• Corresponding URL.

http:// host / SomeDirectory / SomeFile .html

Default Web Application: JRun

• Main Location.

install_dir /servers/default/default-ear/default-war

• Corresponding URL.

http:// host / SomeFile .html

• More Specific Location (Arbitrary Subdirectory).

install_dir /servers/default/default-ear/default-war/ SomeDirectory

• Corresponding URL.

http:// host / SomeDirectory / SomeFile .html

Default Web Application: Resin

• Main Location.

install_dir /doc

• Corresponding URL.

http:// host / SomeFile .html

• More Specific Location (Arbitrary Subdirectory).

install_dir /doc/ SomeDirectory

• Corresponding URLs.

http:// host / SomeDirectory / SomeFile .html

The server’s default Web application is useful for practice and learning, but when

you deploy real-life applications, you will almost certainly use custom Web applica-

tions; see Section 2.11 for details.

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 but-

ton), 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

J2EE training from the author: http://courses.coreservlets.com/

19.1 How HTML Forms Transmit Data 609

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 dis-

cussed 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) ele-

ments, 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 desig-

nates http://localhost:8088/SomeProgram as the URL to which the data will be sent.

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>

<H2>A Sample Form Using GET</H2>

First name:

Last name:

</FORM>

</CENTER>

</BODY></HTML>

J2EE training from the author: http://courses.coreservlets.com/

610

Chapter 19 ■ Creating and Processing HTML Forms

Figure 19–1 Initial result of GetForm.html .

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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: