HTML5 Textarea Attributes: Here's What You Should Know »

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn moreWhat does HTML5 Textarea Attributes: Here's What You Should Know do?The <textarea> element is used to create a text input area of unlimited length. By default, text in a <textarea> is rendered in a monospace or fixed-width font, and text areas are most often used within a parent <form> element.Displayinline

Contents

• 1 Code Example
• 2 What is <textarea> Used For?
• 3 HTML5 Textarea Attributes
• 4 Attributes in Action
• 5 Attributes of HTML5 Textarea Attributes: Here's What You Should Know

Code Example

<textarea placeholder="You can type into this textarea all day long if you'd like to, but without a submit button to click all of your hard work will just be wasted."></textarea>

What is <textarea> Used For?

Most HTML forms are composed of a parent form element, a handful of input elements (at least one of which will be of the submit type), and one or more textareas. If you need form fields to accept email addresses, phone numbers, and other content that is easy to define, use the appropriate input type. However, when you need a field that can accept any combination and length of plain text letters, numbers, and symbols, <textarea> is the element you are looking for.

HTML5 Textarea Attributes

HTML5 introduced a few new attributes which can be used with textarea elements. Here are some of the most important:

• form: Associates the textarea with a form. Use the ID attribute of the form as the value for the textarea form attributes. This allows you to place a textarea anywhere on a webpage, even outside of the form element, and still have the contents of the textarea included when the form is submitted.
• maxlength and minlength: Used to specify a minimum or maximum number of characters that may be entered into a textarea.
• placeholder: Adds placeholder text to the textarea that disappears as soon as a user places the cursor inside of the element.
• required: Requires that the textarea contain content prior to allowing form submission.
• wrap: Specifies whether or not hard-returns should be added to the content submitted in a textarea.

Attributes in Action

Here’s an example of how some of these new attributes can be used to control the behavior of a textarea.

<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea>

If we pair those textarea elements with a simple script and button element, we get the following form:

Adam WoodAdam is a technical writer who specializes in developer documentation and tutorials.

Attributes of HTML5 Textarea Attributes: Here's What You Should Know

Attribute name	Values	Notes
<textarea name="">	Adds a name attribute to a <textarea> element and associates the name with the text added to the text area.
<textarea wrap="">	Determines whether or not submitted text wraps when a <textarea> is included in a form submission.
<textarea cols="">	Specifies the visible width of a <textarea> element in average character widths. Defaults to 20 if not specified.
<textarea disabled>	Disables the entry of text into a <textarea> element.
<textarea tabindex=""">	Sets the position of a <textarea> element in the tab order.
Textarea Onchange: Get The HTML Code To Trigger A JavaScript Event Now	Adds an event listener to a <textarea> which executes JavaScript scripting when an onchange event occurs.
<textarea onKeyPress="">	Adds an event listener to a <textarea> element which executes JavaScript scripting when an onKeyPress event occurs.