Lecture Notes: HTML Form Procesing with Java Servlet

By Jack G. Zheng, CIS@Georgia State University

Last updated 7/2/2006

HTML Form

HTML form is a web interface (based on HTML) to accept user input

Forms are widely used in many web applications that need user input

Login or sign in
Registration, subscription
Searching, navigation
Survey, test
Discussion, email, posting
Online editing, data input, data query
Administration, transaction, configuration
…

HTML Form Basic structure

Action

Action defines the destination where user data are sent to. It is usually a program or a webpage with server-side scripts that is able to process the data
Action is triggered by "submit" button; when the button is clicked, form data are submitted to the destination page/program

Form Method

Form data can be sent using "get" method or "post" method; use the corresponding method in servlet to process "get" or "post"

public void doGet( javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response )
throws javax.servlet.ServletException, java.io.IOException
public void doPost( javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response )
throws javax.servlet.ServletException, java.io.IOException

Form elements

Each element is a specific way of accepting user input (see chapter 19 of the textbook)

Action elements: push buttons (submit, reset), …
Data elements: text field, radio button, checkbox, list box, combo box, hidden field, …

Each element has a "name" attribute; this attribute serves as the parameter name when the data are passed to the server side programs.

HTML Form Input Processing

Use "getParameter()" or "getParameterValues()" method to get form element values

String p1=request.getParameter("p1"); // p1 is the form element name
//or
String[] p1=request.getParameterValues("p1");

Live Examples:

Note: the following examples use "invoker servlet" mapping, and "get" method to send data.

<form name="profile" method="get" action="../servlet/zheng.examples.form.TextProcessing">

<input type="text" name="name" size="20" maxlength="20">

</td>
</tr>
<tr>
<td bgcolor="#99CCFF"><strong>Password</strong></td>
<td>

<input name="password" type="password" size="20" maxlength="20">

</td>
</tr>
<tr>
<td valign="top" bgcolor="#99CCFF"><strong>Self-introduction</strong></td>
<td>

<textarea name="introduction" cols="30" rows="4"></textarea>

</td>
</tr>
</table>
<p>

</p>

<input type="HIDDEN" name="sid" value="1234">

</form>

Try the live example: text processing

Text / password field

Single line input element

Text area

Multi-lined input element for lengthy text input

<textarea>initial text</textarea>

Text input elements processing

All inputs in a text input element are passed as a “String” type parameter which has the same name as the element name
If there is no input in the text input element
- A vacant “String” is returned
- Use StringVariable.equals(“”) to test if it is a vacant string
If the parameter (element) name is not defined
- “request.getParameter()” retunes “null”

Hidden field

These fields will not be displayed on the page. They are usually used to set important but read-only (or should not be displayed) parameters, such as IDs, date/time, counters, special code, ...

Hidden field will be passed directly as a “String” type parameter

<form name="profile" method="get" action="../servlet/zheng.examples.form.RadioProcessing">
<table width="500" border="0">
<tr>
<td bgcolor="#99CCFF"><strong>Education level</strong></td>
<td>

<input type="radio" name="education" value="high school"> High school
<input type="radio" name="education" value="college">
College
<input type="radio" name="education" value="graduate">Graduate
<input type="radio" name="education" value="other">
Other

</td>
</tr>
</table>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</form>

Try the live example: radio button processing

Radio buttons

Radio buttons are used to allow only one selection from a group of choices

A group is formed by assigning the same “name” to all elements in the group
Use the attribute “checked” to indicate which one is selected initially

Radio button processing

If any one of a radio button group elements is selected

The name of the parameter passed is the same as the name of that radio button group
The value of the parameter is the value of the selected radio button (defined in the “value” attribute)

If none of the elements is selected

The parameter will not be passed (ie. not defined)
- “request.getParameter(...)” retunes “null”

<form name="profile" method="get" action="../servlet/zheng.examples.form.CheckProcessing">
<table width="500" border="0">
<tr>
<td bgcolor="#99CCFF"><strong>Check if true</strong></td>
<td>

<input type="checkbox" name="havePC" value="Yes">
Yes, I have a computer</td>
</tr>
<tr>
<td valign="top" bgcolor="#99CCFF"><strong>Skills </strong></td>
<td><p>
<input name="skill" type="checkbox" value="html"> HTML
<input name="skill" type="checkbox" value="java">Java
<input name="skill" type="checkbox" value="linux"> Linux
<input name="skill" type="checkbox" value="asp">ASP
<input name="skill" type="checkbox" value="xml">XML<br>

<input name="skill" type="checkbox" value="javascript">JavaScript
<input name="skill" type="checkbox" value="jsp">JSP
<input name="skill" type="checkbox" value="php">PHP
<input name="skill" type="checkbox" value="dotnet">
.Net
<input name="skill" type="checkbox" value="sql">SQL

</p>
</td>
</tr>
</table>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</form>

Try the live example: checkbox processing

Checkboxes

Checkbox indicates a binary state (selected or not) of a single input control

Using the attribute “checked” to indicate the initial selection state

<input name="skill" type="checkbox" value="html" checked>

Checkbox group

A group of checkboxes with the same name
Multiple selection is allowed in a checkbox group

Checkbox processing

Individual checkbox

If checked, the parameter with the same name will be passed; the value of the parameter is defined in the “value” attribute
If not checked, the parameter will not be passed (undefined)
- “request.getParameter(...)” retunes “null”

Checkbox group

Use request.getParameterValues(“parameter name”) method to retrieves a set of values into a “String” array
- a potential null pointer exception should be handled
If none is selected, the parameter will not be passed (undefined)
- “request.getParameter(...)” retunes “null”

<form name="profile" method="get" action="../servlet/zheng.examples.form.ComboProcessing">
<table width="500" border="0">
<tr>
<td bgcolor="#99CCFF"><strong>Home Location</strong></td>
<td>

<select name="location">
<option value="CA">California</option>
<option value="GA">Georgia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="TX">Texas</option>
</select>

</td>
</tr>
<tr>
<td valign="top" bgcolor="#99CCFF"><strong>Major(s) </strong></td>
<td>

<select name="major" size="5" id="major" multiple="multiple">
<option value="Accounting">Accounting</option>
<option value="Finance">Finance</option>
<option value="CIS">Information Systems</option>
<option value="IB">International Business</option>
<option value="Management">Management</option>
<option value="Real Estate">Real Estate</option>
<option value="Economics">Economics</option>
</select>

</td>
</tr>
</table>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
<input type="HIDDEN" name="sid" value="1234">
</form>

Try the live example: combo/list box processing

Combobox

Combo box presents options in a drop down list. The usage of combo box is similar to the usage of radio button group, except that in a combo box, there is always a value (option) selected.

The parameter of a combobox is always passed

The name of the parameter is the same as the name of that combo box
The value of the parameter is the value of the selected option (defined in the “value” attribute)

List box

List box is an expansion of combo box (visually), where multiple (zero to many) items can be selected

If nothing is selected, the parameter will not be passed

If a list box only allows single selection (like a radio button group)

The name of the parameter passed is the same as the name of that list box
The value of the parameter is the value of the selected option (defined in the “value” attribute)

If a list box allows multiple selections (like a check box group)

Use request.getParameterValues(“parameter name”) method to retrieves a set of values into a “String” array

Try the complete live example: student survey

Form Input Validation

User input can be very messy; need to validate user data

to meet business requirements
to prevent potential application error

Common validation examples

Required input/selection (SSN)
Text length restriction (user id)
Input type/format restriction (date/time, phone #, money)
Equality restriction (password confirmation)
…

Form input validation can be performed

on the server side (using Servlet), or
on the client side (using JavaScript) - what’s the advantage?

Using JavaScript to validate form input on the client side

http://www.w3schools.com/js/js_form_validation.asp

Addtional Topics

Form design: http://www.lukew.com/resources/articles/web_forms.html