HTML
<textarea>
element
represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The above example demonstrates a number of features of
<textarea>
:
id
attribute to allow the
<textarea>
to be associated with a
<label>
element for accessibility purposes
名称
attribute to set the name of the associated data point submitted to the server when the form is submitted.
rows
and
cols
attributes to allow you to specify an exact size for the
<textarea>
to take. Setting these is a good idea for consistency, as browser defaults can differ.
<textarea>
does not support the
value
属性。
<textarea>
element also accepts several attributes common to form
<input>
s, such as
autocomplete
,
autofocus
,
被禁用
,
placeholder
,
readonly
，和
required
.
此元素包括 全局属性 .
autocapitalize
none
: Completely disables automatic capitalization.
sentences
: Automatically capitalize the first letter of sentences.
words
: Automatically capitalize the first letter of words.
characters
: Automatically capitalize all characters.
on
:
Deprecated since iOS 5.
off
:
Deprecated since iOS 5.
autocomplete
off
: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
on
: The browser can automatically complete the value based on values that the user has entered during previous uses.
若
autocomplete
attribute is not specified on a
<textarea>
element, then the browser uses the
autocomplete
attribute value of the
<textarea>
element's form owner. The form owner is either the
<form>
element that this
<textarea>
element is a descendant of or the form element whose
id
is specified by the
form
attribute of the input element. For more information, see the
autocomplete
属性在
<form>
.
autofocus
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.
cols
20
.
被禁用
<fieldset>
; if there is no containing element when the
被禁用
attribute is set, the control is enabled.
form
<textarea>
element is associated with (its "form owner"). The value of the attribute must be the
id
of a form element in the same document. If this attribute is not specified, the
<textarea>
element must be a descendant of a form element. This attribute enables you to place
<textarea>
elements anywhere within a document, not just as descendants of form elements.
maxlength
The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.
minlength
The minimum number of characters (UTF-16 code units) required that the user should enter.
名称
The name of the control.
placeholder
<label>
element tied to the input. See
Labels and placeholders
in
<input>: The Input (Form Input) element
for a full explanation.
readonly
被禁用
attribute, the
readonly
attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.
required
This attribute specifies that the user must fill in a value before submitting a form.
rows
The number of visible text lines for the control.
spellcheck
<textarea>
is subject to spell checking by the underlying browser/OS. the value can be:
true
: Indicates that the element needs to have its spelling and grammar checked.
default
: Indicates that the element is to act according to a default behavior, possibly based on the parent element's own
spellcheck
值。
false
: Indicates that the element should not be spell checked.
wrap
hard
: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the
cols
attribute must also be specified for this to take effect.
soft
: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.
off
: Like
soft
but changes appearance to
white-space: pre
so line segments exceeding
cols
are not wrapped and the
<textarea>
becomes horizontally scrollable.
If this attribute is not specified,
soft
is its default value.
<textarea>
是
replaced element
— it has intrinsic dimensions, like a raster image. By default, its
display
value is block. Compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular CSS.
Styling HTML forms
provides some useful tips on styling
<textarea>
。
The HTML specification doesn't define where the baseline of a
<textarea>
is, so different browsers set it to different positions. For Gecko, the
<textarea>
baseline is set on the baseline of the first line of the textarea, on another browser it may be set on the bottom of the
<textarea>
box. Don't use
vertical-align
: baseline
on it; the behavior is unpredictable.
In most browsers,
<textarea>
s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the
resize
CSS property — resizing is enabled by default, but you can explicitly disable it using a
resize
value of
none
:
textarea {
resize: none;
}
Valid and invalid values of a
<textarea>
element (e.g. those within, and outside the bounds set by
minlength
,
maxlength
，或
required
) can be highlighted using the
:valid
and
:invalid
pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
The following example show a very simple textarea, with a set numbers of rows and columns and some default content.
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">Write something here</textarea>
注意，
minlength
doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the
<textarea>
invalid. Also note that even if you have a
minlength
value set (3, for example), an empty
<textarea>
is still considered valid unless you also have the
required
attribute set.
This example has a placeholder set. Notice how it disappears when you start typing into the box.
<textarea name="textarea" rows="5" cols="30" placeholder="Comment text."></textarea>
注意：
Placeholders should only be used to show an example of the type of data that should be entered into a form; they are
not
a substitute for a proper
<label>
element tied to the input. See
Labels and placeholders
in
<input>: The Input (Form Input) element
for a full explanation.
This example shows two
<textarea>
s — one of which is
被禁用
, and one of which is
readonly
. Have a play with both and you'll see the difference in behavior — the
被禁用
element is not selectable in any way (and its value is not submitted), whereas the
readonly
element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.
注意：
In browsers other than firefox, such as chrome, the
被禁用
textarea content may be selectable and copyable.
<textarea name="textarea" rows="5" cols="30" disabled>I am a disabled textarea</textarea> <textarea name="textarea" rows="5" cols="30" readonly>I am a readonly textarea</textarea>
| 内容类别 | 流内容 , 措词内容 , Interactive content , listed , labelable , resettable ，和 submittable form-associated 元素。 |
|---|---|
| 准许内容 | 文本 |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role |
textbox
|
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLTextAreaElement
|
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
textarea
|
Chrome 完整支持 Yes | Edge 完整支持 12 |
Firefox
完整支持
Yes
注意事项
|
IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes |
Firefox Android
完整支持
Yes
注意事项
|
Opera Android 完整支持 Yes |
Safari iOS
完整支持
Yes
注意事项
|
Samsung Internet Android 完整支持 Yes |
autocapitalize
非标
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
autocomplete
|
Chrome 完整支持 66 |
Edge
不支持
No
注意事项
|
Firefox 完整支持 59 | IE 不支持 No | Opera 不支持 No |
Safari
完整支持
Yes
注意事项
|
WebView Android 完整支持 66 | Chrome Android 完整支持 66 | Firefox Android 完整支持 59 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
autofocus
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 10 | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android 完整支持 Yes |
cols
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
被禁用
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
form
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
maxlength
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 10 | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android 完整支持 Yes |
minlength
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
名称
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
placeholder
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 10 | Opera 完整支持 11.5 | Safari 完整支持 5 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 11.5 | Safari iOS 完整支持 4 | Samsung Internet Android 完整支持 Yes |
readonly
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
required
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
rows
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
spellcheck
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
wrap
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
不支持
兼容性未知
非标。预期跨浏览器支持较差。
见实现注意事项。
Other form-related elements:
<form>
<button>
<datalist>
<legend>
<label>
<select>
<optgroup>
<option>
<input>
<keygen>
<fieldset>
<output>
<progress>
<meter>
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>