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

One of two values indicating the browser if it should automatically suggest options for this control, as an attempt to guess what the user is typing. Browsers usually perform this action by retrieving data from a database containing previous inputs. There are two possible values, both case-insensitive:

  • on: the browser should suggest options automatically. This is the default value.
  • off: the browser musn't suggest options automatically.

Example

<form action="../../form-result.php" target="_blank">
  <p>Justify your answer:</p>
  <p><textarea name="justification" autocomplete="off"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Justify your answer:

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="20" 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.

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="20" 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.

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.