HTML <textarea> tag

Last Updated : 12 Jul, 2025

The <textarea> tag in HTML is used to create a multi-line text input field, allowing users to enter and edit text in a form. Unlike the <input> tag, which is designed for single-line input, <textarea> can be resized and can accommodate longer entries of text.

Syntax

<textarea>....</textarea>

In the above syntax

<textarea> and </textarea>: These are the opening and closing tags for the textarea element.
rows="4": This specifies the number of visible text lines that the textarea will display.
cols="50": This defines the width of the textarea, measured in characters. The number of columns determines how wide the text area is in terms of characters per line.

Creating a Basic <textarea>

The <textarea> element in HTML is used to create a multi-line text input field. This allows users to enter larger amounts of text, such as comments, feedback, or other data that requires more space than a standard text input field.

HTML

<html>
<head></head>
<body>
    <form>
        <label for="feedback">Your Feedback:</label><br>
        <textarea id="feedback" name="feedback" rows="4" cols="50">
        </textarea><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Output

In this example

The label element is used to create a label for the textarea, improving accessibility.
The rows and cols attributes define the size of the textarea.
The id attribute links the <textarea> with the <label>.

Styling the <textarea>

Although the <textarea> element comes with default styling, you can customize its appearance using CSS.

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        form {
            background-color: #fff;
            padding: 20px;
            width: 100%;
            max-width: 500px;
            border-radius: 8px;
        }

        label {
            font-size: 1.1em;
            margin-bottom: 8px;
            display: block;
        }

        textarea {
            width: 100%;
            padding: 12px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fafafa;
            resize: vertical;
            outline: none;
            transition: border-color 0.3s ease;
        }

        textarea:focus {
            border-color: #4CAF50;
            background-color: #fff;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 12px 20px;
            cursor: pointer;
            border-radius: 4px;
            width: 100%;
            margin-top: 10px;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form>
        <label for="feedback">Feedback:</label>
        <textarea id="feedback" name="feedback" rows="4" cols="50"
            placeholder="Type your feedback here..."></textarea><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Output