JSP - Processing HTML Form Data

JSP Tutorial

This article is a series of JSP Tutorial. In this article, we will learn how to make use of HTML forms with JSP. We will build a complete Student Registration HTML Form with input button, checkbox button, radio button, and dropdown list etc. Along with this, we will also learn how to read HTML form elements data using request.getParameter() method.

Before getting started, let's first familiar with HTTP methods which we use in HTML form processing.

The Methods in Form Processing

Let us now discuss the methods in Form Processing.

GET method

The GET method sends the encoded user information appended to the page request. The page and the encoded information are separated by the ? character as follows −

http://www.test.com/hello?key1=value1&key2=value2

The GET method is the default method to pass information from the browser to the web server and it produces a long string that appears in your browser's tab. It is recommended that the GET method is better not used. if you have a password or other sensitive information to pass to the server.

The GET method has size limitation: only 1024 characters can be in a request string.

POST method

A generally more reliable method of passing information to a backend program is the POST method.

This method packages the information in exactly the same way as the GET method, but instead of sending it as a text string after a ? in the URL it sends it as a separate message. This message comes to the backend program in the form of the standard input which you can parse and use for your processing.

JSP handles this type of requests using getParameter() method to read simple parameters and getInputStream() method to read binary data stream coming from the client.

Reading Form Data using JSP

JSP handles form data parsing automatically using the following methods depending on the situation:

getParameter() − You call request.getParameter() method to get the value of a form parameter.
getParameterValues() − Call this method if the parameter appears more than once and returns multiple values, for example - checkbox.
getParameterNames() − Call this method if you want a complete list of all parameters in the current request.
getInputStream() − Call this method to read binary data stream coming from the client.

Reading HTML Form Data with JSP

We'll actually cover the following topics:

Read HTML forms input text field value in JSP
Read HTML forms select tag (drop-down list) value in JSP
Read HTML forms radio-button field value in JSP
Read HTML forms checkbox tag value in JSP

1. Read HTML Form Input Text field Value

In this example, we will build an HTML form to read student information. Let's first create a simple HTML form with input field elements. Later we will read HTML form data using JSP.

student-form.html

<html>

<head>
    <title>Student Registration Form</title>
</head>

<body>

    <form action="student-response.jsp" method="post">

        First name: <input type="text" name="firstName" />

        <br/><br/> Last name: <input type="text" name="lastName" />

        <br/><br/>

        <input type="submit" value="Submit" />

    </form>

</body>

</html>

Run above file in tomcat server, which will display below page on a browser.

Output

Note that we are using a form POST method to pass information to a backend program.

Now, we have created a simple Student registration page, in order to read from data we will create a student-response.jsp page as explained below.

student-response.jsp

Let's create student-response.jsp file and add the following code. The key points in this file:

We use request.getParameter() method to get the value of a form parameter.
We can also use ${param.firstName} expression language to read the input value.
We are using an expression tag <%= %> to display a result.

<html>

<head><title>Student Confirmation Title</title></head>
<body>
       <ul>
         <li><p><b>First Name:</b>
            <%= request.getParameter("firstName") %>
         </p></li>
         <li><p><b>Last  Name:</b>
            <%= request.getParameter("lastName") %>
         </p></li>
      </ul> 
</body>
</html>

Fill above Student registration HTML form and hit submit button will result in below page.

Output

2. Read HTML forms select box (drop-down list) value in JSP

Let's design Student registration HTML page which contains a select box. Here is a complete code.

student-dropdown-form.html

<html>

<head>
    <title>Student Registration Form</title>
</head>

<body>

    <form action="student-dropdown-response.jsp">

        First name: <input type="text" name="firstName" />

        <br/><br/> Last name: <input type="text" name="lastName" />

        <br/><br/>

        <select name="country">
  <option>Brazil</option>
  <option>France</option>
  <option>Germany</option>
  <option>India</option>
  <option>Turkey</option>
  <option>United Kingdom</option>
  <option>United States of America</option> 
 </select>

        <br/><br/>

        <input type="submit" value="Submit" />

    </form>

</body>

</html>

Deploy this page on tomcat server and hit respective URL in the browser will display below form on the browser:

Let's create a student-dropdown-response.jsp which will read above form data and display on a screen. Here is complete code in a page.

The key points in this file:

We use request.getParameter() method to get the value of a form parameter.
We can also use ${param.firstName} expression language to read the input value.
We are using an expression tag <%= %> to display a result.

<html>

<head>
<title>Student Confirmation Title</title>
</head>

<body>
      <ul>
         <li><p><b>First Name:</b>
            <%= request.getParameter("firstName") %>
         </p></li>
         <li><p><b>Last  Name:</b>
            <%= request.getParameter("lastName") %>
         </p></li>
      </ul> 
 <br />
 <br /> The student's country: ${param.country}
</body>
</html>

Fill above Student Registration HTML form and hit submit button will result in below page.

3. Read HTML Form's radio button value data

Let's design Student registration HTML page which contains radio buttons. Here is a complete code.

student-form-radio.html

<html>

<head>
    <title>Student Registration Form</title>
</head>

<body>

    <form action="student-radio-response.jsp">

        First name: <input type="text" name="firstName" />

        <br/><br/> Last name: <input type="text" name="lastName" />

        <br/><br/> Favorite Programming Language: <br/>

        <input type="radio" name="favoriteLanguage" value="Java"> Java

        <input type="radio" name="favoriteLanguage" value="C#"> C#

        <input type="radio" name="favoriteLanguage" value="PHP"> PHP

        <input type="radio" name="favoriteLanguage" value="Ruby"> Ruby

        <br/><br/>

        <input type="submit" value="Submit" />

    </form>

</body>

</html>

Let's create a student-radio-response.jsp which will read above form data and display on a screen. Here is complete code in a page.

The key points in this file:

We use request.getParameter() method to get the value of a form parameter.
We can also use ${param.firstName} expression language to read the input value.
We are using an expression tag <%= %> to display a result.

<html>

<head><title>Student Confirmation Title</title></head>

<body>

    <ul>
         <li><p><b>First Name:</b>
            <%= request.getParameter("firstName") %>
         </p></li>
         <li><p><b>Last  Name:</b>
            <%= request.getParameter("lastName") %>
         </p></li>
      </ul> 

 <br/> <br/>
 
 The student's favorite programming language: 
 <%= request.getParameter("favoriteLanguage") %>
 
</body>
</html>

Read HTML Form checkbox field value

Let's build an HTML student registration form with a checkbox button.

student-checkbox-form.html

<html>

<head>
    <title>Student Registration Form</title>
</head>

<body>

    <form action="student-checkbox-response.jsp" method="post">

        First name: <input type="text" name="firstName" />

        <br/><br/> Last name: <input type="text" name="lastName" />

        <br/><br/>

        <input type="checkbox" name="favoriteLanguage" value="Java"> Java

        <input type="checkbox" name="favoriteLanguage" value="C#"> C#

        <input type="checkbox" name="favoriteLanguage" value="PHP"> PHP

        <input type="checkbox" name="favoriteLanguage" value="Ruby"> Ruby

        <br/><br/>

        <input type="submit" value="Submit" />

    </form>

</body>

</html>

Deploy this page on tomcat server and hit respective URL in the browser will display below form on the browser:

student-checkbox-form.jsp

Let's create a student-checkbox-response.jsp which will read above form data and display on a screen. Here is complete code in a page.

The key points in this file:

We use request.getParameter() method to get the value of a form parameter.
We can also use ${param.firstName} expression language to read the input value.
We are using an expression tag <%= %> to display a result.

<html>

<head><title>Student Confirmation Title</title></head>

<body>

      <ul>
         <li><p><b>First Name:</b>
            <%= request.getParameter("firstName") %>
         </p></li>
         <li><p><b>Last  Name:</b>
            <%= request.getParameter("lastName") %>
         </p></li>
      </ul> 

 Favorite Programming Languages: <br/>
 
 <!-- display list of "favoriteLanguage" --> 
 <ul>
  <%
   String[] langs = request.getParameterValues("favoriteLanguage");
  
   for (String tempLang : langs) {
    out.println("<li>" + tempLang + "</li>");
   }
  %>
 </ul>
</body>
</html>

Fill above Student Registration HTML form and hit submit button will result in below page.

In the next article, we will learn how to page redirect in JSP.

< Previous Next >

Java Guides

Search This Blog