Open In App

HTML <textarea> tag

Improve
Improve
Like Article
Like
Save
Share
Report

HTML <textarea> tag is used to define a multi-line plain-text editing control. It’s used in forms to collect user inputs like comments or reviews. Attributes like cols and rows define its size, while the name is needed for form data submission and the ID for label linkage. It renders text in a fixed-width font.

Syntax:

<textarea>....</textarea>

HTML textarea tag Attribute values

Attribute Description
autocomplete Specifies whether the textarea field has autocompleted on or off.
autofocus Specifies that the textarea field should automatically receive focus when the page loads.
cols Tells the browser how many average-width characters should fit on a single line, i.e., the number of columns.
dirname Enables setting the text direction of the textarea field after submitting the form.
disabled Specifies that the textarea element is disabled.
form Specifies one or more forms that the <textarea> element belongs to.
maxlength Specifies the maximum number of characters entered into the textarea element.
minlength Defines the minimum number of characters (as UTF-16 code units) of a textarea element.
name Specifies the name of the <textarea> element.
placeholder Specifies the expected value to be displayed before user input in the textarea element.
readonly Specifies that the textarea element is read-only. If the textarea is read-only, then its content cannot be changed but can be copied and highlighted.
required A boolean attribute that specifies that the <textarea> element must be filled out before submitting the form.
rows Specifies the number of visible text lines for the control, i.e., the number of rows to display.
wrap Specifies in which manner the text is to be wrapped in a textarea when a form is submitted.

HTML textarea tag Examples

Example 1: This simple example illustrates the use of the <textarea> tag in HTML that enables the multi-line text input control.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>textarea tag</title>
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
    <h2>HTML Textarea tag </h2>
    <form action="#">
        <textarea rows="10"
                  cols="20"
                  name="blog">
          Share your knowledge by writing your own blog!
        </textarea>
        <br>
        <input type="submit"
               value="submit">
    </form>
</body>
</html>


Output:

textarea

HTML tag

Explanation:

  • In this example we are using the <textarea> tag within a <form> element.
  • Specifies rows, cols, and name attributes to define its dimensions and identifier.
  • Displays placeholder text for user guidance.
  • Provides a submit button to send the textarea content to the server.

Example 2: In this example, we have used the resize property whose value is set to none that will disable the resize option of the textarea.

HTML




<!DOCTYPE html>
<html>
<head>
     <title>HTML textarea tag</title>
     <style>
        textarea {
            resize: none;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML Textarea tag </h2>
    <form action="#">
        <textarea rows="7"
                  cols="50"
                  name="comment">
        </textarea>
        <br>
        <input type="submit">
    </form>
</body>
</html>


Output: 

HTML Tag

Explanation:

  • In the above example we disables resizing of the textarea using CSS.
  • Contains a <form> element with a <textarea> tag for user input.
  • Specifies rows, cols, and name for defining textarea dimensions and identification.
  • Includes a submit button within the form for form submission.

HTML textarea tag Use Cases

1.How to create a text area in HTML ?

To create a text area in HTML, use the <textarea> element with optional attributes like “rows” and “cols” to specify its size and dimensions, respectively.

2.How to set the size of textarea in HTML ?

To set the size of a textarea in HTML, use the “rows” and “cols” attributes within the <textarea> tag, specifying the desired number of rows and columns respectively.

3.How to create a multiline input control text area in HTML5 ?

To create a multiline input control textarea in HTML5, use the <textarea> element and specify the number of rows and columns using the “rows” and “cols” attributes respectively.

Supported Browsers

The browser supported by HTML textarea tag are listed below:



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads