Spring - MVC Form Text Field

Spring MVC provides built-in support for creating and processing text fields using the Spring Form Tag Library. The <form:input> tag allows developers to bind user input directly to Java objects without manually handling request parameters. This simplifies form handling and reduces boilerplate code in Spring MVC applications.

• Creates HTML text input fields in JSP pages.
• Supports automatic data binding with Java Bean properties.
• Provides various attributes such as maxlength, readonly, disabled, and cssStyle.

spring-form.tld

spring-form.tld is the Spring Form Tag Library used in JSP pages to create and process HTML form elements. It provides tags such as <form:form>, <form:input>, <form:checkbox>, and <form:radiobutton> with built-in support for data binding between form fields and Spring MVC model objects.

• Enables automatic binding of form fields to Java Bean properties.
• Simplifies form creation and processing in Spring MVC applications.

To use the spring library tags, we need to include the below directive on the JSP page.

<%@ taglib prefix="form"

uri="http://www.springframework.org/tags/form" %>

The <form:input> Tag

The <form:input> tag is used to create a text input field in a JSP page and bind it to a property of a model object. It automatically transfers user-entered data between the form and the Spring MVC bean

• Creates an HTML text input field and binds it to a bean property specified by the path attribute.
• Supports various attributes such as maxlength, readonly, disabled, size, and cssStyle to customize the input field.

Syntax

<form:input path="name" id="name"/>

• path="name": Specifies the bean property to which the input field is bound.
• id="name": Specifies a unique identifier for the generated HTML input element.

Attributes in 'input' tag

Below are the various attributes available in the 'input' tag.

1. HTML Standard Attributes

HTML Standard attributes are also called global attributes that are available and can be used with all HTML elements.

2. HTML Event Attributes

HTML Event Attributes are used to trigger a function when the specified event occurred on the element.

3. HTML Optional Attributes

HTML Optional Attributes are used to modify the default functionality of an element.

4. Other Attributes

Other attributes are used to control form behavior and data binding in Spring MVC.

Steps to Create the Application

We will create a simple Spring MVC application to take the input values - First Name and Last Name, from the user and process them to get the output.

Step 1: Create a Maven Project

• Open STS IDE.
• Click File - New - Maven Project.
• Select Create a simple project (Select archetype ) and click Next.

Then Enter the following details:

• Group Id: com.gfg
• Artifact Id: SpringMVCApplication
• Packaging: war

Click Finish.

Below is the final project structure of the Spring MVC project after creating *.java and *.jsp files also.

Step 2: Add Required Dependencies

Add the following maven dependencies and plugin to your pom.xml file.

<dependencies>

    <!-- Spring MVC -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.3.18</version>
    </dependency>

    <!-- Servlet API -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
        <scope>provided</scope>
    </dependency>

</dependencies>

Step 3: Create Bean Class (Home.java)

Create a Java Bean class named Home. This bean stores the form data entered by the user and provides getter and setter methods for each property.

package com.geeksforgeeks.app;

public class Home {
    
    private String fName;
    private String lName;
    private String name;
    private String email;
    
    
    public String getfName() {
        return fName;
    }
    public void setfName(String fName) {
        this.fName = fName;
    }
    public String getlName() {
        return lName;
    }
    public void setlName(String lName) {
        this.lName = lName;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    
}

Step 4: Create JSP Form Page (home.jsp)

Create a JSP page using Spring Form Tags. This page contains multiple <form:input> fields that are bound to the properties of the Home bean.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
    <h2>Welcome to GeeksforGeeks!!</h2>

    <form:form action="submit" method="post" modelAttribute="home">
        <table>
            <tr>
                <td><form:label path="fName">First Name: </form:label></td>
                <td><form:input path="fName" id="fName" maxlength="6" size="8" onblur="updateName()"/></td>
            </tr>
            <tr>
                <td><form:label path="lName">Last Name: </form:label></td>
                <td><form:input path="lName" id="lName" maxlength="10" size="10" onblur="updateName()"/></td>
            </tr>
            <tr>
                <td><form:label path="name">Full Name: </form:label></td>
                <td><form:input path="name" id="name" readonly="true" title="This is Read-only field" 
                                cssStyle="font-family:monospace;color:green"/></td>
            </tr>
            <tr>
                <td><form:label path="email">E-Mail Address: </form:label></td>
                <td><form:input path="email" /></td>
            </tr>
            <tr>
                <td><form:button>Submit</form:button></td>
            </tr>
        </table>
    </form:form>
    
    <script type="text/javascript">
        
        function updateName(){
            var firstName = document.getElementById("fName").value;
            var lastName = document.getElementById("lName").value;
            
            var fullName = firstName+" "+lastName;
            document.getElementById("name").value = fullName;
            
        }
    </script>

</body>
</html>

Step 5: Create Controller Class (HomeController.java)

Create a controller class to load the form page and process the submitted data.

package com.geeksforgeeks.app;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class HomeController {

    @RequestMapping(value = "/")
    public String viewHome(Model model) {

        Home home = new Home();
        model.addAttribute("home", home);
        return "home";
    }

    @RequestMapping(value = "/submit", method = RequestMethod.POST)
    public String submit(@ModelAttribute("home") Home home) {
        return "summary";
    }

}

Step 6: Create Result Page (summary.jsp)

This is the output JSP page to display the user entered values in the browser after the processing of the request.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Summary page</title>
</head>
<body>
    <h3>Details Submitted!!</h3>
    <table>
        <tr>
            <td>Full Name:</td>
            <td>${home.name}</td>
        </tr>
        <tr>
            <td>E-Mail Address:</td>
            <td>${home.email}</td>
        </tr>
    </table>

</body>
</html>

Step 7: Run the Application

• Right-click the project.
• Select Run As - Run on Server.
• Choose Apache Tomcat Server.
• Click Finish.

Open the following URL in the browser:

http://localhost:8080/app/

Output:

Enter the details in the respective fields.

Once we click on submit, the controller class will process the request and generate the output that is displayed on the screen.

Explanation: When the user submits the form, Spring MVC automatically binds the entered values to the Home bean using @ModelAttribute. The controller processes the request and returns the summary.jsp page, where the submitted details are displayed to the user.