HTML / HTML Tags

HTML <Textarea> Tag

Oct 12, 2022
3 min read
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>

  • 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>

  • 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>

  • 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

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes