HTML <textarea> data-* Attribute

The data-* attribute on a <textarea> tag attaches additional data to the textarea. To create a custom attribute, replace the * with a lowercase string, such as data-id, data-status, or data-location.

Example

#

A custom data-name attribute on a <textarea>.
The attribute value is not visible, but is readable by JavaScript.

<textarea data-name="Rembrandt van Rijn" rows="6" cols="75">
  Rembrandt van Rijn was a Dutch draughtsman, painter, and printmaker. 
  An innovative and prolific master in three media, he is generally 
  considered one of the greatest visual artists in the history of
  art and the most important in Dutch art history.
</textarea>

Using data-*

The data-* attribute adds custom information to a <textarea> element.

The * part is replaced with a lowercase string, such as data-id, data-cost, or data-location.

An <textarea> element can have any number of data-* attributes, each with their own name.

Using data-* attributes reduces the need for requests to the server.

Note: The data-* attribute is not visible and does not change the appearance of the textarea.


Syntax

<textarea data-*="value">

Note: The * can be any string, such as data-iddata-costdata-supplier,  etc.


Values

#

Value Description
value A string value. Can be numeric, alphanumeric, JSON, etc.

More Examples

A custom data-subject attribute on a <textarea>.
Clicking the button will display the subject value.



<textarea id="mytextarea" data-subject="Rembrandt van Rijn" rows="6" cols="75">
  Rembrandt van Rijn was a Dutch draughtsman, painter, and printmaker. 
  An innovative and prolific master in three media, he is generally 
  considered one of the greatest visual artists in the history of
  art and the most important in Dutch art history.
</textarea>

<br/><br/>
<button onclick="show();">Show data</button>

<script>
  let show = () => {
    let element = document.getElementById("mytextarea");
    alert("Subject = " + element.getAttribute('data-subject'));
  }
</script>

Code explanation

The <textarea> tag has a custom data-subject attribute.

The data-subject attribute stores the subject of the <textarea>.

Clicks are handled by the onclick event.

Onclick invokes a JavaScript function that extracts and displays textarea subject.

Note: Notice how the textarea purpose displays immediately without server call.


Browser support

Here is when data-* support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <textarea>
Guides