HTML5 Textarea Attributes: Here's What You Should Know

What 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.

Display

inline

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 Wood

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