HTML <textarea>
Tag
HTML
The <textarea>
tag creates a multi-line plain-text input control.
HTML <textarea>
Tag
The <textarea>
element represents a multi-line text editing control.
This control is useful as it allows users to enter any amount of plain-text, for review or feedback in an html forms.
The width and height of <textarea>
element can be setup using the cols and rows attributes.
Element Attributes
Attribute | Value | Description |
---|---|---|
autofocus |
autofocus | This specifies that a text area should automatically focus when the page is loaded. |
cols |
number | This specifies the width of the text area. |
dirname |
textareaname.dir | This specifies the text direction of the Textarea when submitting the form. |
disabled |
disabled | This specifies that a text area should be disabled. |
form |
form_id | Specifies which form the text area belongs to. |
maxlength |
number | This specifies the maximum number of characters allowed in the text area. |
name |
name | It specifies the name of the text area. |
placeholder |
text | It specifies the hint to the user of what can be entered in the text area. |
readonly |
readonly | Specifies the text area should be read-only. |
required |
required | Specifies that the user must fill in a value in the text area before submitting a form. |
rows |
number | This specifies the height of the text area. |
wrap |
hard soft |
This specifies how the text area wraps text. |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<form action="actionpage.jsp">
<table>
<tr>
<td><label for="fname">Full Name:</label></td>
<td><input type="text" id="fname" name="fname" placeholder="Write your name here."></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" placeholder="Write your email here."></td>
</tr>
<tr>
<td>Details:</td>
<td><textarea rows="10" cols="20" id="details" name="details"
placeholder="Write your feedback here."></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
Click on the "Try it Now" button to see how it works.