- What does
HTML5 Textarea Attributes: Here's What You Should Knowdo?
- 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.
<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>
<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.
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: