Chapter 3 1

Basic Form-Processing Techniques

JavaServer Pages

By Xue Bai

Chapter 3 2

Objectives

In this chapter, you will:

• Design a form to collect information from users

• Use the GET method to send form information to the server

• Use the POST method to send form information to the server

• Retrieve information from a form

• Output information to users

• Use variables to store information obtained from a form

Chapter 3 3

Collecting Information

• A form serves as a container that holds controls such as text fields, labels, buttons, and images

• Form tags:

<FORM NAME="formName" ACTION="getUserName.jsp" METHOD="POST">

<!--form elements go inside of form tags -->

</FORM>

Chapter 3 4

Form Attributes

• Name:

– is required if you want form controls processed on the client side; otherwise, it is optional

• Action:

– Specify the destination Web page where the form is processed

• METHOD:

– Specify how to send form to the Web server, either POST or GET

Chapter 3 5

Control Element in a Form

• The input fields on a form are called controls and are usually (but not always) created with the <INPUT> tag

<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="POST">

Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName">

</FORM>

Chapter 3 6

Control Elements’ Attributes

• TYPE:

– Specifies the input type

• NAME:

– Each control in a form must have a NAME. The data entered by the user is retrieved by referencing the name of its control field. Without a name, the data stored in the control field cannot be retrieved

• VALUE:

– A default value may be assigned to a control element

Chapter 3 7

For Elements Example

<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="POST">

Your First Name:<INPUT TYPE = "TEXT" NAME="firstName"><br>

Your Middle Name:<INPUT TYPE = "TEXT" NAME="middleName"><br>

Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName">

</FORM>

Chapter 3 8

Form Example

Chapter 3 9

A Text Input with Default Value

<FORM >

<INPUT TYPE = "TEXT" NAME="txtField"

VALUE="This is the default text">

</FORM>

Chapter 3 10

Submitting Form for Processing

• In order to process form data, you need to submit the form to the server, and then retrieve and process data on the server-side

• To submit a form, the submit() method of the form must be called

– Using Submit button

– Explicitly call the submit method of a form

Chapter 3 11

Using Submit Button

<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="POST">

Your First Name:<INPUT TYPE = "TEXT" NAME="firstName"><br>

Your Middle Name:<INPUT TYPE = "TEXT" NAME="middleName"><br>

Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>

<INPUT TYPE=SUBMIT VALUE="Submit">

<INPUT TYPE=RESET VALUE="Reset">

</FORM>

Chapter 3 12

Submit Button

Chapter 3 13

Explicitly Call the Submit Method of a Form

<FORM NAME=“balance” ACTION=“processBalance.jsp”>

Balance:<INPUT TYPE=TEXT NAME=amt>

<a href=“JavaScript:document.balance.submit()”>

Submit the form

</FORM>

Chapter 3 14

GET Method

• Form data is appended to the end of the designated URL after a question mark

• The URL is the one specified as the ACTION value in a form

• If you do not explicitly set the METHOD attribute for a form, by default the form is sent using the GET method

Chapter 3 15

GET Method and Query String

<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="GET">

Your First Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>

Your Middle Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>

Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>

<INPUT TYPE=SUBMIT VALUE="Submit">

<INPUT TYPE=RESET VALUE="Reset">

</FORM>

Chapter 3 16

Submit a Form with the GET Method

Chapter 3 17

Get User Information

Chapter 3 18

POST Method

• When you use the POST method, the form element data is sent to the server as a transaction message body

• Unlike the GET method, the POST method does not append form element data to the URL

• Note that when the POST method is used, you can generate a query string by attaching a queryString to the URL directly

Chapter 3 19

Retrieve Query String

<%= request.getQueryString() %>

Chapter 3 20

Retrieve Data Stored in a Control Element

request.getParameter(“elementName”)

Example:

request.getParameter(“major”);

request.getParameter(“balance”);

Chapter 3 21

Form Processing Techniques

Chapter 3 22

Retrieve Form Data

<BODY BGCOLOR="<%= request.getParameter("bgColor")%>">

Hello, <%= request.getParameter("myName") %>:

here is your message displayed using your preferences:<br>

<br>

<font color="<%= request.getParameter("fontColor")%>"

size="<%= request.getParameter("fontSize") %>">

<%= request.getParameter("message")%>

</font>

</BODY>

Chapter 3 23

Output to the user

<%= “Your message goes here” %>

<% out.println(“Your message goes here”); %>

Unlike the first output method: <%= %>, with the out.print method, you can put many statements within a single pair of <% %>

Chapter 3 24

Storing Form Information

• There are many situations in which you will need to store form information and use it later in your JSP scripts. Like all programming languages, JSP uses variables to temporarily store information

• A variable is a location in computer memory where a value is stored for use by a program

• In JSP script, all variables must be declared before you can use them

• After a variable has been declared, a value can be stored in the variable, and this value can be used throughout your JSP page

Chapter 3 25

Using Variables

<% String major = request.getParameter(“major”);

out.println(major);

%>

<%= major %>

Chapter 3 26

Using Basic JSP Techniques

Chapter 3 27

Using Basic JSP Techniques