textarea element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The textarea element represents a field for multi-line text input. The control associated to this field is a text box that allows users to edit multiple lines of plain text. textarea controls are useful to collect or edit long runs of text like messages, files' contents, lists, reviews, articles, etc.

The content of this element represents the initial value of the control. This content is the one to be shown when the document is loaded and when a reset button is pressed in the form.

Examples

In our first example, we'll create a form with a textarea control with all its default values. Additionally, we'll declare the placeholder attribute with a hint about the expected content for the control, that will be displayed inside the text box when it's empty.

<form action="../../form-result.php" target="_blank">
  <p>Message to the author:</p>
  <p><textarea name="message" placeholder="Share your opinion with the author!"></textarea></p>
  <p><input type="submit" value="Send message"></p>
</form>

Message to the author:

In our second example we'll set an initial value as the content of the element. This value will be used to fill the control when the document is loaded and when the form is reset.

In contrast to single-line text inputs, a textarea element carries the initial value as content, instead of using the value attribute.

<form action="../../form-result.php" target="_blank">
  <p>Edit your comment:</p>
  <p><textarea name="comment">Hi! I think you're all wrong!</textarea></p>
  <p>
    <input type="submit" value="Edit">
    <input type="reset" value="Reset">
  </p>
</form>

Edit your comment:

Next, we'll use the cols and rows attributes to set the number of character the control will be able to display at the same time, horizontally and vertically. Browsers will calculate the width and height of the element, multiplying these numbers by the width and height of a character of the used font.

The width of this element is calculated from the width of characters of the used font. As characters not always have the same width, browsers may use different methods to approximate this value (like average or maximum).

<form action="../../form-result.php" target="_blank">
  <p>Add a new description:</p>
  <p><textarea name="description" cols="40" rows="5"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Add a new description:

In the followin example, we'll test two attributes that set rules about the longitude of the text that can be entered in the control. These are minlength and maxlength and they speak for themselves.

While the requirements of minlength are only checked upon form submission, browsers usually prevent users from typing a number of characters greater than the specified by maxlength.

While the maxlength attribute is well supported among browsers, minlength lacks support almost entirely (as of 2015/03/17).

<form action="../../form-result.php" target="_blank">
  <p>Edit your biography:</p>
  <p><textarea name="biography" minlength="20" maxlength="50"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Edit your biography:

Now, we'll try the required attribute, which is new in HTML5. When this attribute is present, supporting browsers prevent the submission of the form until the control has been filled.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

<form action="../../form-result.php" target="_blank">
  <p>Comments:</p>
  <p><textarea name="comments" required></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Comments:

Attributes

Specific attributes

autocomplete

The autocomplete attribute provides information about if and how browsers should automatically suggest options for this control, as an attempt to guess what the user is typing. There are three possible values for this attribute:

  • The value on value, indicating the browser that it should suggest options automatically but not providing any further information about what kind of data is expected in the control.
  • The value off, indicating the browser that it shouldn't suggest options automatically, either because the control's input data is particularly sensitive (like the user to login in a very secure area) or because it's a value that will never be reused (like a one-time-key in a registration process).
  • An autofill detail tokens list, indicating the browser that it should suggest options automatically and specifying what kind of value is expected.

An autofill detail tokens list can be composed by the following tokens in the specified order.

  1. Optionally, a token beginning with the string "section-" (case-insentsitive), indicating the named group to which the field belongs.
  2. Optionally, one of the two following tokens (case-insentsitive):
    • shipping: the field is part of the shipping address.
    • billing: the field is part of the billing address.
  3. Either of the following two options:
    • The following token (case-insentsitive):
      • name: a full name
      • honorific-prefix: a prefix or title, like Sir, Mr., Dr., etc.
      • given-name: a given or first name.
      • additional-name: aditinal or middle names.
      • family-name: a familiy or last name.
      • honorific-suffix: a suffix, like Jr., II or ABIST.
      • nickname: a nickname or short name used instead of the full name.
      • organization-title: a job title, like Account Manager, Architect, Engineer, etc.
      • username: a user name, typically used for login operations, like "adam457" or "dark_matter_01".
      • new-password: a new password, typically requested when creating an account or changing a password.
      • current-password: the current password, typically requested when logging in or changing a password.
      • organization: the company associated with the person or information in other fields associated with this field.
      • street-address: a street address, possibly composed by multiple lines.
      • address-line1: a street address component.
      • address-line2: a street address component.
      • address-line3: a street address component.
      • address-level4: the most fine-grained administrative level, in addresses with four administrative levels.
      • address-level3: the third administrative level, in addresses with three or more administrative levels.
      • address-level2: the second administrative level, in addresses with two or more administrative levels. In countries with two administrative levels, this would typically be the city, town or village.
      • address-level1: the broadest administrative level. This could be the province or state within which the locality is found.
      • country: a country code representing a country, like "US", "UK" or "ES".
      • country-name: the name of a country, like Albania, Liberia or Uruguay.
      • postal-code: a postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the arrondissement, if relevant, to the address-level2 field), etc., like 02139, 1428 or 10025.
      • cc-name: a full name as given on the payment instrument.
      • cc-given-name: a given or first name as given on the payment instrument.
      • cc-additional-name: aditinal or middle names as given on the payment instrument.
      • cc-family-name: a familiy or last name as given on the payment instrument.
      • cc-number: a code identifying the payment instrument, like a credit card number.
      • cc-exp: the expiration date of the payment instrument.
      • cc-month: the expiration month of the payment instrument.
      • cc-year: the expiration year of the payment instrument.
      • cc-csc: the security code for the payment instrument (CSC, CVC, CVV, SPC, CCID, etc.)
      • cc-type: the type of payment instrument used, like credit card.
      • transaction-currency: a currency code representing the currecy to be used in the transaction, like "USD", "ARS" or "GBP".
      • transaction-amount: the amount of the transaction, like when entering a bid or sale price.
      • language: a language tag identifying the preferred language, like "en", "en-GB" or "es-419".
      • bday: a birthday date.
      • bday-day: the day component of a birthday date.
      • bday-month: the month component of a birthday date.
      • bday-year: the year component of a birthday date.
      • sex: a gender identity, like male or female.
      • url: a home page or other web page corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com".
      • photo: a photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com/images/me.jpg".
    • The following, in the given order:
      1. Optionally, a token that is a case-insensitive match for one of the following strings:
        • home: meaning the field is for contacting someone at their residence.
        • work: meaning the field is for contacting someone at their workplace.
        • mobile: meaning the field is for contacting someone at their mobile device.
        • fax: meaning the field describes a fax machine's contact details.
        • pager: meaning the field describes a pager's or beeper's contact details
      2. A token that is a case-insensitive match for one of the following autofill field names:
        • tel: a full telephone number, including country code, like +1 617 253 5702.
        • tel-country-code: the country code component of a telephone number, like +1 or +54.
        • tel-national: a telephone number without the country code, with a country-internal prefix, if applicable, like 617 253 5702.
        • tel-area-code: the area code component of a telephone number, like 617.
        • tel-local: a telephone number without country code and country-internal prefix, like 253 5702.
        • tel-local-prefix: the first part of a telephone number without country code and country-internal prefix, when such number is split into two components.
        • tel-local-suffix: the second part of a telephone number without country code and country-internal prefix, when such number is split into two components.
        • tel-extension: the internal extension code of a telephone number.
        • email: an email address, like jhondoe@unknown.com.
        • impp: an URL representing an instant messaging protocol endpoint like, "aim:goim?screenname=jhondoe" or "xmpp:jhondoe@unknown.com".

Browsers usually perform autofilling operations by retrieving data from a database containing previous inputs or other sources of user information.

Example

<form action="../../form-result.php" target="_blank">
  <p>Shipping Address:</p>
  <p><textarea name="shippingaddress" autocomplete="shipping street-address"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Shipping Address:

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<textarea name="thoughts" autofocus></textarea>

cols

The width of the control expressed in number of characters.

The width of this element is calculated from the width of characters in the current font. As characters not always have the same width, browsers may use different methods to approximate this value (like average or maximum).

The value provided in this attribute should be an integer grater than zero. If the value is absent or malformed, the attribute will take the default value of 20.

Example

<form action="../../form-result.php" target="_blank">
  <p>Special thanks:</p>
  <p><textarea name="thanks" cols="30" rows="6"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Special thanks:

dirname

A name for a new field specially created to transmit the directionality of the input text. This attribute, new in HTML5, allows authors to handle correctly values submitted with any text directionality, by adding a field that's submitted with the form. The name for that field will be the value of this attribute.

Being relatively new, browser support for the dirname attribute is incomplete. Authors should check for support when the data is received server-side.

Example

<form action="../../form-result.php" target="_blank">
  <p>Contribute with an idea:</p>
  <p><textarea name="idea" dirname="idea-dir"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Contribute with an idea:

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<form action="../../form-result.php" target="_blank">
  <p>A penny for your thoughts:</p>
  <p><textarea name="thoughts" disabled></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

A penny for your thoughts:

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<p>Introduction:</p>
<p><textarea name="introduction" form="form1"></textarea></p>
<form id="form1" action="../../form-result.php" target="_blank">
  <p><input type="submit" value="Submit"></p>
</form>

Introduction:

inputmode

A value indicating what type of input mechanism would be most helpful for users entering data in the control. There are twelve possible case-insensitive values:

  • verbatim: alphanumeric Latin-script input of non-prose content, like usernames, passwords, product codes, etc.
  • latin: latin-script input in the user's preferred language, with some typing aids enabled, like text prediction. Intended for user-to-computer inputs like in a search form.
  • latin-name: latin-script input in the user's preferred language, with typing aids for names enabled, like text prediction from a contact list and automatic capitalisations.
  • latin-prose: latin-script input in the user's preferred language, with human-to-human typing aids enabled, like text prediction and automatic capitalisation at the begining of sentences.
  • full-width-latin: latin-script input in the user's secondary language, using full-width characters and human-to-human typing aids enabled, like text prediction and automatic capitalisation at the begining of sentences.
  • kana: kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
  • kana-name: same as "kana", with typing aids intended for entering human names enabled, like text prediction from a contact list.
  • katakana: katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
  • numeric: numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. The number input control is prefererd.
  • tel: telephone number input, including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels. The telephone input control is preferred.
  • email: text input in the user's locale, with keys for aiding in the input of e-mail addresses, such as that for the "@" character and the "." character. The email input control is preferred.
  • url: text input in the user's locale, with keys for aiding in the input of Web addresses, such as that for the "/" and "." characters and for quick input of strings commonly found in domain names such as "www." or ".co.uk". The URL input control is preferred.

Browsers may use the information in this attribute to provide a mechanism to help the user filling the data. For example, virtual on-screen keyboards may provide special keys for the specified input mode.

Example

<form action="../../form-result.php" target="_blank">
  <p>List your friends:</p>
  <p><textarea name="friends" inputmode="latin-name"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

List your friends:

maxlength

An integer indicating the maximum number of characters the value of this control may have.

Authors shouldn't rely on the maxlength attribute. Users can always submit the form with browsers (some intentionally) not supporting this feature.

Example

<form action="../../form-result.php" target="_blank">
  <p>Resources:</p>
  <p><textarea name="resources" maxlength="20"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Resources:

minlength

An integer indicating the minimum number of characters the value of this control may have.

Authors shouldn't rely on the minlength attribute. Users can always submit the form with browsers (some intentionally) not supporting this feature.

Browser support for the minlength attribute is extremely low (as of 2014/12/18). Authors shouldn't rely on this attribute until support grows.

Example

<form action="../../form-result.php" target="_blank">
  <p>Analisys:</p>
  <p><textarea name="analisys" maxlength="20"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Analisys:

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the element. Both values together will conform a name-value pair that will be used to process the form data.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

Example

<form action="../../form-result.php" target="_blank">
  <p>Review:</p>
  <p><textarea name="review"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Review:

placeholder

A run of text that's supposed to provide a hint about how the field should be filled in, like examples or short descriptions. Browsers may display the contents of this attribute in the control while it has no value. As soon as users start to write down their own text, the placeholder text should dissapear from the control.

Example

<form action="../../form-result.php" target="_blank">
  <p>Results:</p>
  <p><textarea name="results" placeholder="Write down here the results of your study..."></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Results:

readonly

A boolean value instructing the browser to prevent the user from changing the control's value. If this attribute has the value "readonly" or the empty string (""), or if it's just present, the user won't be allowed to change the value in the control.

Although this attribute prevents the control's value from being edited, not all interaction is blocked: users will still be able to select and copy the text in the control.

Example

<form action="../../form-result.php" target="_blank">
  <p>File "config.cfg":</p>
  <p>
    <textarea name="file" readonly>wait=24
login=db
autostart=yes
    </textarea>
  </p>
  <p><input type="submit" value="Submit"></p>
</form>

File "config.cfg":

required

A boolean value indicating wether this control can be left empty or not. If this attribute has the value "required" or the empty string (""), or if it's just present, the user will have to fill the control in order to be able to submit the form.

If a control with the required attribute present is left blank, supporting browsers will throw an error upon submission and cancel the process immediately.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

Example

<form action="../../form-result.php" target="_blank">
  <p>Leave your opinion:</p>
  <p><textarea name="opinion" required></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Leave your opinion:

rows

The number of lines the control should display at the same time. If the text inside this control presents more lines than the specified by this attribute, browsers will, most likely, provide a vertical scrollbar to access the hidden content.

The value provided in this attribute should be an integer grater than zero. If the value is absent or malformed, the attribute will take the default value of 2.

Example

<form action="../../form-result.php" target="_blank">
  <p>Special thanks:</p>
  <p><textarea name="thanks" cols="30" rows="6"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Special thanks:

wrap

A value indicating browsers if the text in this control should be wrapped for submission. There are two possible case-insensitive values:

  • soft: the text won't be wrapped when submitted, although it can be wrapped in the rendering. This is the default value.
  • hard: the text will be wrapped for submission, by adding newlines wherever needed, to avoid text exceeding the frame's width.

If the attribute wrap is defined with the "hard" value, the presence of the cols attribute is mandatory.

Being relatively new, browser support for this attribute is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

Example

<form action="../../form-result.php" target="_blank">
  <p>Codes list:</p>
  <p><textarea name="codeslist" cols="5" rows="6" wrap="hard"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Codes list:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.