Skip to content
Related Articles

Related Articles

HTML <textarea> tag

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 15 Dec, 2021

The <textarea> tag in HTML defines a multi-line plain-text editing control. A text space will hold an infinite range of characters, and therefore the text renders in a set-width font (usually Courier). The size of a text area is often such by the cols and rows attributes, or perhaps better; through CSS’ height and dimension properties. The textarea is generally used in a form, to collect user inputs like comments or reviews. The name attribute is needed for the reference in the form data after the form is submitted. By omitting the name attribute, data from the text area will not be submitted. The id attribute is required to link the text area with a label.

Syntax:

<textarea>....</textarea>

Attribute values:

  • autocomplete: It is used to specify whether the Textarea field has autocompleted on or off.
  • autofocus: It is used to specify that the textarea field should get automatically focus when the page loads.
  • cols: It is used to tell the browser how many average-width characters should fit on a single line i.e the number of columns to display.
  • dirname: It is used to enable the text direction of the Textarea Field after submitting the form.
  • disabled: It is used to specify that the text area element is disabled.
  • form: It is used to specify the one or more forms that the <Textarea> element belongs to.
  • maxlength: It is used to specify the maximum number of characters entered into the Textarea element.
  • minlength: It is used to define the minimum number of characters (as UTF-16 code units) of a Textarea Element.
  • name: It is used to specify the name of the <Textarea> element.
  • placeholder: It is used to specify the expected value to be displayed before user input in textarea element.
  • readonly: It is used to specify 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: It is a boolean attribute that is used to specify that the <textarea> element must be filled out before submitting the Form.
  • rows: It is used to specify the number of visible text lines for the control i.e. the number of rows to display.
  • wrap: It is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted.

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:

HTML <textarea> Tag

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 <textarea> Tag

Supported Browsers:

  • Google Chrome 93.0
  • Internet Explorer 11.0
  • Microsoft Edge 93.0
  • Firefox 92.0
  • Safari 14.1
  • Opera 78.0


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!