If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.) |
The <textarea> Tag in HTML 5
The <textarea> tag is used to create a multiple-line text input area in an HTML form. For a single line of text input, use the <input> tag instead.
The textarea
tag's content should include only text. It should not have any child elements, such as style tags, for example. As in any HTML code, ampersands should be escaped with &
.
This is an actual working demo of the <textarea> example code below.
<textarea> Tag Syntax
<body> ... ... flow content expected ... <form id="form-id" method="GET|POST|etc." action="target-URL"> ... ... phrasing content expected ...<textarea>... phrasing content ... ... phrasing content ...</textarea>... ... </form> ... ... phrasing content expected ...<textarea form="form-id">... phrasing content ... ... phrasing content ...</textarea>... ... </body>
Rules for coding HTML textarea
elements
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Code the textarea element where phrasing content is expected, usually inside a form element.
- Begin the textarea element with a starting <textarea> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlns
attribute on the <html> tag. - If the field is for a form that can be submitted but is outside that form element, include a
form
attribute referencing the form the textarea is to be associated with. - Include any other attributes on the <textarea> tag as appropriate.
- Inside the textarea element, between the starting
<textarea>
tag and the ending</textarea>
tag, code the inner HTML phrasing content. - End the textarea element with a matching
</textarea>
closing tag.
Content Model
Contents of the textarea element
The content of the textarea element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.
<textarea> Tag Attributes
Attributes of the <textarea> tag
global attributes | In addition to the personal attributes of the <textarea> tag below, any of the common HTML attributes can also be coded. |
cols ,rows |
When wrap="hard" is specified, the cols attribute must also be specified. |
autofocus="autofocus" |
Sets the value of the <textarea autofocus> boolean attribute to true . Omitting it sets to false . |
disabled="disabled" |
Sets the value of the <textarea disabled> boolean attribute to true . Omitting it sets to false . |
form |
|
maxlength |
|
name |
|
placeholder |
|
readonly="readonly" |
Sets the value of the <textarea readonly> boolean attribute to true . Omitting it sets to false . |
required="required" |
Sets the value of the <textarea required> boolean attribute to true . Omitting it sets to false . |
wrap="soft" wrap="hard" |
<textarea> Tag Examples
Examples of the textarea
tag in HTML 5
Text input area with placeholder in HTML form
(see textarea demo above)
<form> <label for="ex1cmnts">Comments:</label> <textarea id="ex1cmnts" placeholder="Your comments" cols="70" rows="3">Initial text & stuff ....</textarea> </form>
Text input area that scrolls horizontally
<form> <label for="ex2cmnts">Comments:</label> <textarea id="ex2cmnts" cols="40" rows="3" placeholder="Your comments" style="white-space: nowrap">This text input area will not be wrapped but will scroll horizontally instead.</textarea> </form>
Changes in HTML 5 - <textarea> Tag
What's new in HTML 5
The autofocus="autofocus", form, placeholder and required="required" attributes have been added.
Differences between HTML 5 and earlier versions of HTML
The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the textarea element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.