JSP - Processing HTML Form Data

Author:
This article is part of a series of JSP Tutorials. In this post, we will learn how to handle HTML forms with JSP. We will create a complete Student Registration HTML Form with input elements like text fields, checkboxes, radio buttons, and dropdown lists. Additionally, we will learn how to read HTML form elements' data using the request.getParameter() method.

HTTP Methods in Form Handling

Before we dive into the code, it's important to understand the HTTP methods used in form handling:

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.

Example:

http://www.example.com/register?firstName=John&lastName=Doe&emailId=john.doe@example.com&password=12345

Characteristics:

  • Parameters are visible in the URL.
  • Limited amount of data can be sent.
  • Should not be used to send sensitive information (e.g., passwords).

POST Method

The POST method packages the information in exactly the same way as the GET method, but instead of sending it as a text string appended to the URL, it sends it as a separate message in the request body.

Characteristics:

  • Parameters are not visible in the URL.
  • It can send a large amount of data.
  • Suitable for sending sensitive information.

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 - checkboxes.
  • 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 cover the following topics:

  1. Read HTML forms input text field value in JSP
  2. Read HTML forms select tag (dropdown list) value in JSP
  3. Read HTML forms radio-button field value in JSP
  4. 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

<!DOCTYPE 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 the above file in a Tomcat server, which will display the following page in a browser.

Output

Student Form HTML

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

Now, we have created a simple Student registration page. To read the form 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:

  1. We use request.getParameter() method to get the value of a form parameter.
  2. We can also use ${param.firstName} expression language to read the input value.
  3. We are using an expression tag <%= %> to display a result.
<!DOCTYPE html>
<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 out the above Student Registration HTML form and hit the submit button, which will result in the following page.

Output

Student Form JSP

2. Read HTML Form's Select Box (Dropdown List) Value in JSP

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

student-dropdown-form.html

<!DOCTYPE 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 the Tomcat server and hit the respective URL in the browser to display the form.

Output

Student Dropdown Form HTML

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

student-dropdown-response.jsp

The key points in this file:

  1. We use request.getParameter() method to get the value of a form parameter.
  2. We can also use ${param.firstName} expression language to read the input value.
  3. We are using an expression tag <%= %> to display a result.
<!DOCTYPE html>
<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 out the above Student Registration HTML form and hit the submit button, which will result in the following page.

Output

Student Dropdown Form JSP

3. Read HTML Form's Radio Button Value Data

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

student-form-radio.html

<!DOCTYPE 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 the above form data and display it on the screen. Here is the complete code for the page.

student-radio-response.jsp

The key points in this file:

  1. We use request.getParameter() method to get the value of a form parameter.
  2. We can also use ${param.firstName} expression language to read the input value.
  3. We are using an expression tag <%= %> to display a result.
<!DOCTYPE html>
<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>

4. Read HTML Form Checkbox Field Value

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

student-checkbox-form.html

<!DOCTYPE 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 the Tomcat server and hit the respective URL in the browser to display the form.

Output

Student Checkbox Form HTML

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

student-checkbox-response.jsp

The key points in this file:

  1. We use request.getParameter() method to get the value of a form parameter.
  2. We can also use ${param.firstName} expression language to read the input value.
  3. We are using an expression tag <%= %> to display a result.
<!DOCTYPE html>
<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>

By following these steps, you can effectively process HTML form data using JSP. Whether it's reading text inputs, dropdown selections, radio button choices, or checkbox values, JSP provides the methods needed to handle form data efficiently.

Comments

Post a Comment

Leave Comment