path: root/files/zh-cn/web/html/element/textarea/index.html

---
title: <textarea>
slug: Web/HTML/Element/textarea
tags:
  - HTML
  - HTML表单
  - textarea
  - 元素
  - 参考
  - 文本区域
  - 表单
translation_of: Web/HTML/Element/textarea
---
<p id="简介"><strong>HTML <code>&lt;textarea&gt;</code> 元素</strong>表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。</p>

<p>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</p>

<p>上述例子展示了 <code>&lt;textarea&gt;</code> 的几个特点：</p>

<ul>
 <li>为了提高可访问性（accessibility），用于将 <code>&lt;textarea&gt;</code>与一个 {{htmlelement("label")}} 关联的 <code>id</code> 属性。</li>
 <li><code>name</code> 属性，用于设置随表单一同提交到服务器的相关数据的名字。</li>
 <li><code>rows</code> 和 <code>cols</code> 属性，用于声明 <code>&lt;textarea&gt;</code> 的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。</li>
 <li>位于开始标签和闭合标签之间的默认内容。<code>&lt;textarea&gt;</code> 不支持 <code>value</code> 属性。</li>
</ul>

<p><code>&lt;textarea&gt;</code> 还可以使用 <code>&lt;input&gt;</code> 中的一些常见属性，如<code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, 和 <code>required</code>。</p>

<h2 id="属性">属性</h2>

<p><span>这个元素包含了</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a><span>。</span></p>

<dl>
 <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
 <dd>iOS的非标准属性（运行在iOS上的Safari、Firefox、Chrome都支持），文本是否自动首字母大写。在iOS5和之后的版本上有效。可能的值为：
 <ul>
  <li><code>none</code>: 禁用首字母大写。</li>
  <li><code>sentences</code>: 句子的首字母大写。</li>
  <li><code>words</code>: 单词或者字母的首字母大写。</li>
  <li><code>characters</code>: 全部字母大写。</li>
  <li><code>on</code>: {{deprecated_inline()}} 自iOS 5废弃。</li>
  <li><code>off</code>: {{deprecated_inline()}} 自iOS 5废弃。</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("autocomplete")}}</dt>
 <dd>是否使用浏览器的记忆功能自动填充文本。可能的值有：
 <ul>
  <li><code>off</code>: 不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。</li>
  <li><code>on</code>: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。</li>
 </ul>

 <p>如果不指明<strong>autocomplete</strong>属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是`textarea`元素的父级{{HTMLElement("form")}}或者`textarea`有跟表单相同的id（参见下面的form属性）。更多请查看{{HTMLElement("form")}}的{{htmlattrxref("autocomplete", "form")}} 属性。</p>
 </dd>
 <dt>{{ htmlattrdef("autofocus") }}</dt>
 <dd>页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。</dd>
 <dt>{{ htmlattrdef("cols") }}</dt>
 <dd>文本域的可视宽度。必须为正数，默认为20 (HTML5)。</dd>
 <dt>{{ htmlattrdef("disabled") }}</dt>
 <dd>禁用文本域。默认为false。如果未指定，也可以从父级上如{{ HTMLElement("fieldset") }}继承而来。</dd>
 <dt>{{ htmlattrdef("form") }}</dt>
 <dd>指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。</dd>
 <dt>{{ htmlattrdef("maxlength") }}</dt>
 <dd>允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。</dd>
 <dt>{{ htmlattrdef("minlength") }}</dt>
 <dd>允许用户输入的最小字符长度(Unicode) </dd>
 <dt>{{ htmlattrdef("name") }}</dt>
 <dd>元素的名称。</dd>
 <dt>{{ htmlattrdef("placeholder") }}</dt>
 <dd>向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作为行断（换行）处理。</dd>
 <dd>
 <div class="note">
 <p><strong>Note:</strong> Placeholders should only be used to show an example of the type of data that should be entered into a form; they are <em>not</em> a substitute for a proper {{HTMLElement("label")}} element tied to the input. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for a full explanation.</p>
 </div>
 </dd>
 <dt>{{ htmlattrdef("readonly") }}</dt>
 <dd>不允许用户修改元素内文本。和 <code>disabled</code> 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。</dd>
 <dt>{{ htmlattrdef("required") }}</dt>
 <dd>提示用户这个元素的内容必填。</dd>
 <dt>{{ htmlattrdef("rows") }}</dt>
 <dd>元素的输入文本的行数（显示的高度）。</dd>
 <dt>{{ htmlattrdef("spellcheck") }}</dt>
 <dd>该属性设为true时，表明该元素会做拼写和语法检查。属性值为default时，表明元素有默认行为，可能会基于父元素的spellcheck值。属性值为false时，表明元素不做拼写和语法检查。</dd>
 <dt>{{ htmlattrdef("wrap") }}</dt>
 <dd>指定文本换行的方式。默认为soft。可能的值为：
 <ul>
  <li><span style="font-family: courier new;">hard</span>: 在文本到达元素最大宽度的时候，浏览器自动插入换行符(CR+LF) 。比如指定 <code>cols</code>值。</li>
  <li><span style="font-family: courier new;">soft</span>: 在到达元素最大宽度的时候，不会自动插入换行符。</li>
 </ul>
 </dd>
 <dd>
 <ul>
 </ul>
 </dd>
</dl>

<h2 id="使用_CSS_样式">使用 CSS 样式</h2>

<p><code>&lt;textarea&gt;</code> 是 <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">可被替换的元素</a>——其有自己的固有尺寸，像。默认情况下，其 {{cssxref("display")}} 值为 <code>block</code>。与其他表单元素相比，这个元素相对比较容易设置样式，使用常规的 CSS 就可以轻松设置它的盒模型、字体、颜色方案等。</p>

<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a> 这个页面提供了一些关于 <code>&lt;textarea&gt;</code> 样式的有用提示。</p>

<h3 id="基线不一致">基线不一致</h3>

<p>The HTML specification doesn't define where the baseline of a <code>&lt;textarea&gt;</code> is, so different browsers set it to different positions. For Gecko, the <code>&lt;textarea&gt;</code> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <code>&lt;textarea&gt;</code> box. Don't use {{cssxref("vertical-align")}}<code>: baseline</code> on it; the behavior is unpredictable.</p>

<h3 id="控制文本区是否可调整大小">控制文本区是否可调整大小</h3>

<p>In most browsers, <code>&lt;textarea&gt;</code>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 {{ cssxref("resize") }} CSS property — resizing is enabled by default, but you can explicitly disable it using a <code>resize</code> value of <code>none</code>:</p>

<pre>textarea {
  resize: none;
}
</pre>

<h3 id="在样式中使用有效值和无效值">在样式中使用有效值和无效值</h3>

<p>Valid and invalid values of a <code>&lt;textarea&gt;</code> element (e.g. those within, and outside the bounds set by <code>minlength</code>, <code>maxlength</code>, or <code>required</code>) can be highlighted using the {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:</p>

<pre>textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
   border: 2px solid lime;
}</pre>

<h2 id="Example" name="Example">示例</h2>

<h3 id="HTML_内容">HTML 内容</h3>

<pre class="brush: html">&lt;textarea name="textarea" rows="10" cols="50"&gt;Write something here&lt;/textarea&gt;</pre>

<p>{{ EmbedLiveSample('Example','600','200') }}</p>

<h3 id="基本示例">基本示例</h3>

<p>The following example show a very simple textarea, with a set numbers of rows and columns and some default content.</p>

<pre>&lt;textarea name="textarea"
   rows="10" cols="50"&gt;Write something here&lt;/textarea&gt;</pre>

<p>{{ EmbedLiveSample('Basic_example','600','150') }}</p>

<h3 id="最小和最大长度">最小和最大长度</h3>

<p>This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.</p>

<pre>&lt;textarea name="textarea"
   rows="5" cols="30"
   minlength="10" maxlength="20"&gt;Write something here&lt;/textarea&gt;</pre>

<p>{{ EmbedLiveSample('Min_and_max_length','600','80') }}</p>

<p>Note that <code>minlength</code> 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 <code>&lt;textarea&gt;</code> invalid. Also note that even if you have a <code>minlength</code> value set (3, for example), an empty <code>&lt;textarea&gt;</code> is still considered valid unless you also have the <code>required</code> attribute set.</p>

<h3 id="占位符">占位符</h3>

<p>This example has a placeholder set. Notice how it disappears when you start typing into the box.</p>

<pre>&lt;textarea name="textarea"
   rows="5" cols="30"
   placeholder="Comment text."&gt;&lt;/textarea&gt;</pre>

<p>{{ EmbedLiveSample('Placeholder','600','80') }}</p>

<div class="blockIndicator note">
<p><strong>Note:</strong> Placeholders should only be used to show an example of the type of data that should be entered into a form; they are <em>not</em> a substitute for a proper {{HTMLElement("label")}} element tied to the input. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for a full explanation.</p>
</div>

<h3 id="禁用和只读">禁用和只读</h3>

<p>This example shows two <code>&lt;textarea&gt;</code>s — one of which is <code>disabled</code>, and one of which is <code>readonly</code>. Have a play with both and you'll see the difference in behavior — the <code>disabled</code> element is not selectable in any way (and its value is not submitted), whereas the <code>readonly</code> element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.</p>

<div class="blockIndicator note">
<p><strong>Note:</strong> In browsers other than firefox, such as chrome, the <code>disabled</code> textarea content may be selectable and copyable.</p>
</div>

<pre>&lt;textarea name="textarea"
   rows="5" cols="30"
   disabled&gt;I am a disabled textarea&lt;/textarea&gt;
&lt;textarea name="textarea"
   rows="5" cols="30"
   readonly&gt;I am a readonly textarea&lt;/textarea&gt;
</pre>

<p>{{ EmbedLiveSample('Disabled_and_readonly','600','80') }}</p>

<h2 id="技术概览">技术概览</h2>

<table>
 <tbody>
  <tr>
   <th scope="row"><a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories">Content categories</a></th>
   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content">Interactive content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed">listed</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable">labelable</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#form_resettable">resettable</a>, and <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable">submittable</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_">form-associated</a> element.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Text</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that accepts <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>No <code>role</code> permitted</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLTextAreaElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="规范">规范</h2>

<table>
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("html.elements.textarea")}}</p>

<h2 id="参见">参见</h2>

<p>其他与表单相关的元素：</p>

<ul>
 <li>{{ HTMLElement("form") }}</li>
 <li>{{ HTMLElement("button") }}</li>
 <li>{{ HTMLElement("datalist") }}</li>
 <li>{{ HTMLElement("legend") }}</li>
 <li>{{ HTMLElement("label") }}</li>
 <li>{{ HTMLElement("select") }}</li>
 <li>{{ HTMLElement("optgroup") }}</li>
 <li>{{ HTMLElement("option") }}</li>
 <li>{{ HTMLElement("input") }}</li>
 <li>{{ HTMLElement("keygen") }}</li>
 <li>{{ HTMLElement("fieldset") }}</li>
 <li>{{ HTMLElement("output") }}</li>
 <li>{{ HTMLElement("progress") }}</li>
 <li>{{ HTMLElement("meter") }}</li>
</ul>