HTML textarea tag
Example
A multi-line text input control (text area):
<textarea id="feel" name="feel" rows="4" cols="50">
Love makes Life Live. It is Everything.
</textarea>
Definition and Usage
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area is specified by the cols and rows attributes (or with CSS).
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted).
The id attribute is needed to associate the text area with a label.
Tip: Always add the <label> tag for best accessibility practices!
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <textarea> | Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that a text area should automatically get focus when the page loads |
| cols | number | Specifies the visible width of a text area |
| dirname | textareaname.dir | Specifies that the text direction of the textarea will be submitted |
| disabled | disabled | Specifies that a text area should be disabled |
| form | form_id | Specifies which form the text area belongs to |
| maxlength | number | Specifies the maximum number of characters allowed in the text area |
| name | text | Specifies a name for a text area |
| placeholder | text | Specifies a short hint that describes the expected value of a text area |
| readonly | readonly | Specifies that a text area should be read-only |
| required | required | Specifies that a text area is required/must be filled out |
| rows | number | Specifies the visible number of lines in a text area |
| wrap | hard soft |
Specifies how the text in a text area is to be wrapped when submitted in a form |
Global Attributes
The <textarea> tag also supports the Global Attributes in HTML.
Event Attributes
The <textarea> tag also supports the Event Attributes in HTML.
More Examples
Example
Disable default resize option:
<head>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<label for="feel">Feelings :</label>
<textarea id="feel" name="feel" rows="4" cols="50">
Love makes Life Live. It is Everything.
</textarea>
</body>
</html>
Default CSS Settings
None.
Comments
Post a Comment