Spring - MVC TextArea

Spring MVC provides the <form:textarea> tag to create multi-line text input fields in web forms. It simplifies binding user-entered text directly to model objects and integrates seamlessly with Spring's form handling mechanism. In this article, we will build a simple Spring MVC application in Spring Tool Suite (STS) to collect and process user input using the TextArea form tag. 

• Supports multi-line text input such as comments, descriptions, and feedback.
• Automatically binds form data to Java bean properties.
• Reduces manual request parameter handling in controller classes.

Syntax

<form:textarea path="description" rows="5" cols="30"/>

• path: Specifies the model attribute property to which the textarea value will be bound.
• rows: Defines the visible number of text lines in the textarea.
• cols: Defines the visible width (number of characters) of the textarea.

To use Spring Form Tags in a JSP page, import the Spring Form Tag Library using the following directive:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

• prefix="form": Specifies the prefix used for Spring Form Tags.
• uri: Identifies the Spring Form Tag Library provided by Spring MVC.

Attributes in 'textarea' tag

The <form:textarea> tag provides various attributes to customize the appearance, behavior, and data binding of a multi-line text input field in a Spring MVC form.

1. HTML Standard Attributes

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

2. HTML Event Attributes

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

3. HTML Required Attributes

These attributes define the essential structure and size of the <form:textarea> element, such as number of rows and columns, and ensure proper binding and display in the form.

4. Other HTML Attributes

These attributes are used to control the styling, behavior, validation, and data binding of the <form:textarea> element in a Spring MVC form

Step by Step Implementation of TextArea in Spring MVC Application

Follow these steps to build a Spring MVC application using the <form:textarea> tag for handling multi-line user input and displaying the processed 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.

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>

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

Step 3: Model Class (Note.java)

This class is used to store user input coming from the textarea field. Spring binds form data directly into this bean using getter and setter methods.

package com.geek.app;

// Class
public class Note {

    public String noteDetail;

    // Method
    public String getNoteDetail() { return noteDetail; }

    // Method
    public void setNoteDetail(String noteDetail)
    {
        this.noteDetail = noteDetail;
    }
}

Step 4: Controller Class (NoteController.java)

Controller handles incoming requests and controls navigation between JSP pages. It binds the model object and processes form submission using @ModelAttribute.

package com.geek.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 NoteController {

    @RequestMapping(value = "/")
    public String viewNote(Model model) {
        Note note = new Note();
        model.addAttribute("note", note);
        return "note";
    }

    @RequestMapping(value = "/submit", method = RequestMethod.POST)
    public String submitNote(@ModelAttribute("note") Note note) {
        return "noteSummary";
    }

}

Step 5: Input Page (note.jsp)

This JSP page collects user input using Spring <form:textarea> tag. The textarea is bound to the model property noteDetail.

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>

<html>
<head>
<title>GeeksforGeeks - Note</title>
</head>

<body>

    <h1>Welcome to GeeksforGeeks!</h1>

    <form:form action="submit" method="post" modelAttribute="note">

        <table>

            <tr>
                <td>
                    <form:label path="noteDetail">Feedback Note: </form:label>
                </td>

                <td>
                    <form:textarea id="feedBack"
                                   path="noteDetail"
                                   rows="5"
                                   cols="40"
                                   title="GFG"
                                   onfocus="color()"
                                   onblur="remove()"
                                   cssStyle="font-style:italic"/>
                </td>
            </tr>

            <tr>
                <td>
                    <form:button>Submit</form:button>
                </td>
            </tr>

        </table>

    </form:form>

    <!-- JavaScript Code -->
    <script type="text/javascript">

        function color() {
            document.getElementById("feedBack").style.backgroundColor = "#CBF7C7";
        }

        function remove() {
            document.getElementById("feedBack").style.backgroundColor = "#FFFFFF";
        }

    </script>

</body>
</html>

Step 6: Output Page (noteSummary.jsp)

This JSP displays the processed data after form submission. Spring MVC automatically retrieves and displays model attribute values.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" %>

<html>
<head>
<title>GeeksforGeeks - Feedback Summary</title>
</head>

<body>

<h2>Feedback submitted successfully!</h2>

<span>Feedback details: </span>
<span>${note.noteDetail}</span>

</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:

As we provided different attributes to the textarea , we can see those functionality.

<form:textarea id="feedBack" path="noteDetail" rows="5" cols="40" title="GFG"
onfocus="color()" onblur="remove()" cssStyle="font-style:italic"/>

We can see the value GFG on the textarea box when the cursor is placed on the text box as we specified the attribute title="GFG". Once you click on the text box, the color will change based on the onfocus attribute like below.

Now Enter the data in the text box and click on submit.

The entered text is displayed in italic format Because we set cssStyle="font-style:italic". After submission, the request is mapped to the controller, which executes the submitNote method and returns the output page.

Explanation: This Spring MVC application demonstrates the use of <form:textarea> to collect multi-line user input and bind it directly to the Note model using the noteDetail property. The controller handles the request mapping, processes the submitted data, and forwards it to the summary JSP page for display. On submission, the entere