Creating HTML Forms with JavaServer Pages
What You'll Learn in This Hour:
How to use a JSP to receive form data
How to work with form parameters
How servlets interact with forms
How to use a single JSP to present a form and handle its submission
By now you are probably comfortable with the fundamentals of JavaServer Pages and servlets. In the examples presented so far, you have learned how to send output back to the browser. One of the advantages of the Web is that you can create forms to send data from the browser to the server. You are finally ready to begin creating forms with JSP and servlets, and that's where the fun really begins!
A Simple HTML Form
To start off the exploration of HTML forms, it's best to start with a small form and expand from there. Also, it's better to start with a JSP rather than a servlet, because it is easier to write out the HTML. Most of the form handling for JSPs and servlets is identical, so after you know how to retrieve form information from a JSP, you know how to do it from a servlet. Listing 3.1 shows an HTML file containing a simple input form that calls a JSP to handle the form.
Listing 3.1 Source Code for SimpleForm.html
<html> <body> <h1>Please tell me about yourself</h1> <form action="SimpleFormHandler.jsp" method="get"> Name: <input type="text" name="firstName"> <input type="text" name="lastName"><br> Sex: <input type="radio" checked name="sex" value="male">Male <input type="radio" name="sex" value="female">Female <p> What Java primitive type best describes your personality: <select name="javaType"> <option value="boolean">boolean</option> <option value="byte">byte</option> <option value="char" selected>char</option> <option value="double">double</option> <option value="float">float</option> <option value="int">int</option> <option value="long">long</option> </select> <br> <input type="submit"> </form> </body> </html>
The <form> tag in Listing 3.1 sends the input from the form to a JSP called SimpleFormHandler.jsp. Figure 3.1 shows this form running in a browser.
Figure 3.1 HTML forms frequently serve as the front end for a JSP.
The SimpleFormHandler JSP does little more than retrieve the form variables and print out their values. Listing 3.2 shows the contents of SimpleFormHandler.jsp, which you can see is pretty short.
Listing 3.2 Source Code for SimpleFormHandler.jsp
<html> <body> <% // Grab the variables from the form. String firstName = request.getParameter("firstName"); String lastName = request.getParameter("lastName"); String sex = request.getParameter("sex"); String javaType = request.getParameter("javaType"); %> <%-- Print out the variables. --%> <h1>Hello, <%=firstName%> <%=lastName%>!</h1> I see that you are <%=sex%>. You know, you remind me of a <%=javaType%> variable I once knew. </body> </html>
In Case of Trouble
If you are having trouble displaying the form, or some of the form results, see the "Q&A" at the end of this hour.
Most of SimpleFormHandler.jsp should seem pretty familiar to you. It is very similar to an example in Hour 1, "Getting Started with JavaServer Pages," that used the <%= %> tags to assign some variables and print out their values. The only new thing introduced in Listing 3.2 is the built-in request object. Every JSP has a few built-in objects. The most common ones are out and request.
The out object was introduced in Hour 1 and is the output stream used to send data back to the browser. The request object contains information about the request from the browser, and although it contains quite a bit of information, the request object is most commonly used for retrieving the values of form variables.
The True Identity of request
The request object is really just an instance of HttpServletRequest. After you know how to use the request object in a JSP, you are ready to use the HttpServletRequest object in a servlet.
As you look at the SimpleFormHandler JSP, it should be pretty obvious what the output would look like. Just to make sure you've got it, Figure 3.2 shows how SimpleFormHandler looks when displayed in a browser.
Figure 3.2 A JSP can read form input and embed the form data in its output.