textarea element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The textarea
element represents a field for multi-line text input. The control associated to this field is a text box that allows users to edit multiple lines of plain text. textarea
controls are useful to collect or edit long runs of text like messages, files' contents, lists, reviews, articles, etc.
Examples
In our first example, we'll create a form
with a textarea
control with all its default values. Additionally, we'll declare the placeholder
attribute with a hint about the expected content for the control, that will be displayed inside the text box when it's empty.
<form action="../../form-result.php" target="_blank">
<p>Message to the author:</p>
<p><textarea name="message" placeholder="Share your opinion with the author!"></textarea></p>
<p><input type="submit" value="Send message"></p>
</form>
In our second example we'll set an initial value as the content of the element. This value will be used to fill the control when the document is loaded and when the form is reset.
<form action="../../form-result.php" target="_blank">
<p>Edit your comment:</p>
<p><textarea name="comment">Hi! I think you're all wrong!</textarea></p>
<p>
<input type="submit" value="Edit">
<input type="reset" value="Reset">
</p>
</form>
Next, we'll use the cols
and rows
attributes to set the number of character the control will be able to display at the same time, horizontally and vertically. Browsers will calculate the width and height of the element, multiplying these numbers by the width and height of a character of the used font.
<form action="../../form-result.php" target="_blank">
<p>Add a new description:</p>
<p><textarea name="description" cols="40" rows="5"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
In the followin example, we'll test two attributes that set rules about the longitude of the text that can be entered in the control. These are minlength
and maxlength
and they speak for themselves.
<form action="../../form-result.php" target="_blank">
<p>Edit your biography:</p>
<p><textarea name="biography" minlength="20" maxlength="50"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
Now, we'll try the required
attribute, which is new in HTML5. When this attribute is present, supporting browsers prevent the submission of the form until the control has been filled.
<form action="../../form-result.php" target="_blank">
<p>Comments:</p>
<p><textarea name="comments" required></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
Attributes
Specific attributes
autofocus
A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog
where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog
has been loaded.
Example
<textarea name="thoughts" autofocus></textarea>
cols
The width of the control expressed in number of characters.
The width of this element is calculated from the width of characters in the current font. As characters not always have the same width, browsers may use different methods to approximate this value (like average or maximum).
The value provided in this attribute should be an integer grater than zero. If the value is absent or malformed, the attribute will take the default value of 20.
Example
<form action="../../form-result.php" target="_blank">
<p>Special thanks:</p>
<p><textarea name="thanks" cols="30" rows="6"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
dirname
A name for a new field specially created to transmit the directionality of the input text. This attribute, new in HTML5, allows authors to handle correctly values submitted with any text directionality, by adding a field that's submitted with the form. The name for that field will be the value of this attribute.
Being relatively new, browser support for the dirname
attribute is incomplete. Authors should check for support when the data is received server-side.
Example
<form action="../../form-result.php" target="_blank">
<p>Contribute with an idea:</p>
<p><textarea name="idea" dirname="idea-dir"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
disabled
A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.
Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form
is submitted.
Example
<form action="../../form-result.php" target="_blank">
<p>A penny for your thoughts:</p>
<p><textarea name="thoughts" disabled></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
form
The value of the id
attribute of the form with which this control is associated to.
This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.
Example
<p>Introduction:</p>
<p><textarea name="introduction" form="form1"></textarea></p>
<form id="form1" action="../../form-result.php" target="_blank">
<p><input type="submit" value="Submit"></p>
</form>
Introduction:
maxlength
An integer indicating the maximum number of characters the value of this control may have.
Authors shouldn't rely on the maxlength
attribute. Users can always submit the form
with browsers (some intentionally) not supporting this feature.
Example
<form action="../../form-result.php" target="_blank">
<p>Resources:</p>
<p><textarea name="resources" maxlength="20"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
minlength
An integer indicating the minimum number of characters the value of this control may have.
Authors shouldn't rely on the minlength
attribute. Users can always submit the form
with browsers (some intentionally) not supporting this feature.
Browser support for the minlength
attribute is extremely low (as of 2014/12/18). Authors shouldn't rely on this attribute until support grows.
Example
<form action="../../form-result.php" target="_blank">
<p>Analisys:</p>
<p><textarea name="analisys" maxlength="20"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
name
A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the element. Both values together will conform a name-value pair that will be used to process the form data.
Currently, the value isindex
, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.
Example
<form action="../../form-result.php" target="_blank">
<p>Review:</p>
<p><textarea name="review"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
placeholder
A run of text that's supposed to provide a hint about how the field should be filled in, like examples or short descriptions. Browsers may display the contents of this attribute in the control while it has no value. As soon as users start to write down their own text, the placeholder
text should dissapear from the control.
Example
<form action="../../form-result.php" target="_blank">
<p>Results:</p>
<p><textarea name="results" placeholder="Write down here the results of your study..."></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
readonly
A boolean value instructing the browser to prevent the user from changing the control's value. If this attribute has the value "readonly" or the empty string (""), or if it's just present, the user won't be allowed to change the value in the control.
Although this attribute prevents the control's value from being edited, not all interaction is blocked: users will still be able to select and copy the text in the control.
Example
<form action="../../form-result.php" target="_blank">
<p>File "config.cfg":</p>
<p>
<textarea name="file" readonly>wait=24
login=db
autostart=yes
</textarea>
</p>
<p><input type="submit" value="Submit"></p>
</form>
required
A boolean value indicating wether this control can be left empty or not. If this attribute has the value "required" or the empty string (""), or if it's just present, the user will have to fill the control in order to be able to submit the form
.
If a control with the required
attribute present is left blank, supporting browsers will throw an error upon submission and cancel the process immediately.
Browser support for the attribute required
is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
Example
<form action="../../form-result.php" target="_blank">
<p>Leave your opinion:</p>
<p><textarea name="opinion" required></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
rows
The number of lines the control should display at the same time. If the text inside this control presents more lines than the specified by this attribute, browsers will, most likely, provide a vertical scrollbar to access the hidden content.
The value provided in this attribute should be an integer grater than zero. If the value is absent or malformed, the attribute will take the default value of 2.
Example
<form action="../../form-result.php" target="_blank">
<p>Special thanks:</p>
<p><textarea name="thanks" cols="30" rows="6"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
wrap
A value indicating browsers if the text in this control should be wrapped for submission. There are two possible case-insensitive values:
- soft: the text won't be wrapped when submitted, although it can be wrapped in the rendering. This is the default value.
- hard: the text will be wrapped for submission, by adding newlines wherever needed, to avoid text exceeding the frame's width.
If the attribute wrap
is defined with the "hard
" value, the presence of the cols
attribute is mandatory.
Being relatively new, browser support for this attribute is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
Example
<form action="../../form-result.php" target="_blank">
<p>Codes list:</p>
<p><textarea name="codeslist" cols="5" rows="6" wrap="hard"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.