W3docs
en
Log in

HTML <textarea> Tag

The HTML <textarea> tag defines a form field where users can input a multi-line text. The HTML <textarea> tag is allowed when the form is submitted.

The <textarea> tag defines a form field where users can input a multi-line text. Unlike the <input> tag, text wrapping inside <textarea> is allowed when the form is submitted.

A text area can have an unlimited number of characters. The text within this tag is rendered in a proportional font by default.

The <textarea> is used inside the <form> tag.

Syntax

The <textarea> tag comes in pairs. The content is written between the opening (<textarea>) and closing (</textarea>) tags.

Tip

To define the size of a text field, use rows and cols attributes, or the CSS height and width properties.

Example of the HTML <textarea> tag:

Example of the HTML <textarea> Tag|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post"> 
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br />
      <input type="submit" name="submitInfo" value="Submit" />
    </form>
  </body>
</html>
Try it Yourself »

Result

textarea example

In this example we use the <textarea> to define the text field, the name attribute to assign a name to this field (“comment”), the rows attribute to set its height (12 symbols) and the cols attribute to set its width (35 symbols).

Styling the <textarea> element with CSS

The <textarea> tag is considered to be a replaced element, as it has some intrinsic dimensions. Styling this tag is relatively easy with regular CSS.

Its valid and invalid values can be highlighted with the :valid and :invalid pseudo-classes.

Tip

In most browsers, <textarea> is resizable due to the CSS resize property. Resizing is enabled by default. You can disable it putting the resize value to none.

Example of the HTML <textarea> tag with CSS properties:

Text field example with the HTML <textarea> Tag|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
        width: 60%;
        height: 100px;
        padding: 10px;
        outline: 0;
        border: 3px solid #1c87c9;
        background: #d0e2bc;
        line-height: 20px;
      }
    </style>
  </head>
  <body>
    <form>
      <p>Here we use CSS styles to customize the look of the text field.</p>
      <textarea class="comment"> Send your comments to the author.</textarea>
      <br />
      <input type="submit" name="submitInfo" value="Submit" />
    </form>
  </body>
</html>
Try it Yourself »

In this example we use CSS styles to customize the look of the text field.

Attributes

AttributeValueDescription
autocompleteon, offSpecifies whether or not a text field should have autocomplete enabled.
autofocusautofocusDefines that a text area should automatically get focus when the page loads.
colsnumberDefines the visible width of a text area. Default value is 20 characters.
dirnamedirnameSpecifies the name of a hidden form control that will contain the text direction of the textarea when submitted.
disableddisabledDefines that a text area should be disabled.
formform_idDefines one or more forms the text area belongs to (via id).
maxlengthnumberDefines the maximum number of characters allowed in the text area.
minlengthnumberDefines the minimum number of characters allowed in the text area.
nametextDefines a name for a text area.
placeholdertextDefines a short hint that describes the expected value of a text area. The hint is shown when the field is empty, and disappears when it gets focus.
readonlyreadonlyDefines that a text area is read-only.
requiredrequiredDefines that a text area must be filled out before the form is sent.
rowsnumberDefines a visible number of rows in a text area. Default value is 2.
spellchecktrue, false, defaultSpecifies whether the text in the <textarea> tag should be spell checked by the underlying browser/OS.
wrapsoft, hardDefines how the text in a text area is to be wrapped when the form is submitted. soft (default): text is sent without additional line breaks. hard: browser inserts line breaks based on width (requires cols).

The <textarea> tag also supports the Global Attributes and the Event Attributes.

How to style an HTML <textarea> tag

{
    "tag_name": "textarea"
}

Practice

Practice

What are some of the attributes of the HTML <textarea> tag?