HTML <Textarea> Tag

Definition

The <textarea> element is a multi-line field used in HTML Forms enabling the user input data.

Example

<label for="message">Leave a message</label>

<textarea id="message" 
  name="message" 
  rows="6" 
  placeholder="Feel free to leave a message and we 
  will get back to you as soon as we can."></textarea>

Usage

• Both the opening and closing tags are required.
• The <textarea> tag can be used anywhere that accepts phrasing content.
• Only text may be placed in a <textarea> element.

Attributes

The <textarea> element supports the Global Attributes, along with the following:

• autocomplete

  The autocomplete attribute is a hint for the form’s autofill feature.

• autofocus

  The autofocus attribute is a boolean that determines whether a <textarea> element should automatically get focus when the page loads.

• cols

  The cols attribute specifies the maximum number of characters per line.

• dirname

  The dirname attribute enables the submission of the field text’s direction. It takes the value of the name attribute of the input field followed by “.dir” as the value.

• disabled

  The disabled attribute is a boolean that determines whether the <textarea> element is disabled.

• form

  The form attribute specifies the form the <textarea> control belongs to. This allows you to associate it to <form> elements anywhere in the document, not just to the child elements of the <form>.

• maxlength

  The maxlength attribute specifies the maximum number of characters allowed. If this is not set, then the number of characters is unlimited.

  <label for="message">Leave a message</label>
  
  <textarea
    id="message"
    name="message"
    rows="6"
    cols="60"
    minlength="10"
    maxlength="25"
  ></textarea>

  Try it Yourself

• minlength

  The minlength attribute specifies the minimum number of characters allowed. The minimum length does not prevent a user from removing characters, and technically it is still considered a valid submission unless you also use the required attribute.

  See the example above for maxlength.

• name

  The name attribute specifies the name of the <textarea> element.

• placeholder

  The placeholder attribute specifies an expected value that will display in the <textarea> field. When a user starts typing the placeholder will dissappear.

  <label for="message">Leave a message</label>
  
  <textarea
  id="message"
  name="message"
  rows="6"
  cols="60"
  placeholder="Notice how this text dissappears when you start typing"
  ></textarea>

  Try it Yourself

• readonly

  The readonly attribute is a boolean that specifies that the <textarea> element is read-only.

  <label for="message">Leave a message</label>
  
  <textarea
  id="message"
  name="message"
  rows="6"
  cols="60"
  placeholder="This text area is read only."
  readonly
  ></textarea>

  Try it Yourself

• required

  The required attribute is a boolean that determines whether a value must be entered into the text area before form submission.

• rows

  The rows attribute specifies the number of visible lines in the control.

• wrap

  The wrap attribute specifies how the text is to be wrapped when submitted.

  It takes the values:

  • soft - The browser will automatically insert line breaks so that each line is not wider than the width of the control. This is the default value.
  • hard - The browser will not automatically insert line breaks. Must be used with the cols attribute.

Best Practices

• You can group long lists of items using the <optgroup> tag.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile