<textarea>

  • Revision slug: Web/HTML/Elements/textarea
  • Revision title: <textarea>
  • Revision id: 411379
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment IE10 supports both the maxlength and autofocus attributes of the textarea elementMoved From HTML/HTML_Elements/textarea to Web/HTML/Elements/textarea

Revision Content

Summary

The HTML <textarea> element represents a multi-line plain-text editing control.

Usage context

Attributes

This element includes the global attributes.

{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. 
{{ htmlattrdef("cols") }}
The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20 (HTML5).
{{ htmlattrdef("disabled") }}
This Boolean attribute indicates that the user cannot interact with the control. (If this attribute is not specified, the control inherits its setting from the containing element, for example {{ HTMLElement("fieldset") }}; if there is no containing element with the disabled attribute set, then the control is enabled.)
{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}
The form element that the textarea element is associated with (its "form owner"). The value of the attribute must be an 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 their form elements.
{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}
The maximum number of characters (Unicode code points) that the user can enter. If it is not specified, the user can enter an unlimited number of characters.
{{ htmlattrdef("name") }}
The name of the control.
{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}
A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds.
{{ htmlattrdef("readonly") }}
This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled 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.
{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}
This attribute specifies that the user must fill in a value before submitting a form.
{{ htmlattrdef("rows") }}
The number of visible text lines for the control.
{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
{{ htmlattrdef("selectionEnd") }}
The index to the last character in the current selection.
{{ htmlattrdef("selectionStart") }}
The index to the first character in the current selection.
{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
{{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}
Indicates how the control wraps text. Possible values are:
  • 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 be specified.
  • 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.

If this attribute is not specified, soft is its default value.

DOM interface

This element implements the HTMLTextAreaElement interface.

{{ h1_gecko_minversion("Resizable textareas", "2.0") }}

{{ gecko("2.0") }} introduced support for resizable textareas. This is controlled by the {{ cssxref("resize") }} CSS property. Resizing of textareas is enabled by default, but you can explicitly disable it by including the following CSS:

textarea {
  resize: none;
}

Interaction with CSS

In regards to CSS, an <textarea> is a replaced element. 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's first line, on another browser it may be set on the bottom of the <textarea> box. Don't use {{cssxref("vertical-align")}}: baseline on it, as the behavior will be unpredictable.

A textarea has intrinsic dimensions, like a raster image.

Example

HTML Content

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

{{ EmbedLiveSample('Example','600','200') }}

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'the-button-element.html#the-textarea-element', '<textarea>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}} {{Spec2('HTML4.01')}}  

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
autofocus attribute {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} 10 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
maxlength attribute {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} 10 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
placeholder attribute {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} 10 11.50 5.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
autofocus attribute {{ CompatUnknown() }} {{ CompatGeckoMobile("2.0") }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
maxlength attribute {{ CompatUnknown() }} {{ CompatGeckoMobile("2.0") }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
placeholder attribute {{ CompatUnknown() }} {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }} 11.50 4.0

Gecko notes

Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, when a {{ HTMLElement("textarea") }} is focused, the insertion point is placed at the beginning of the text by default, instead of at the end. This change makes Gecko's behavior consistent with other popular browsers.

See also

Other form-related elements: {{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.

{{ languages( { "fr": "fr/HTML/Element/textarea" } ) }}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;textarea&gt; </code>element</strong> represents a multi-line plain-text editing control.</p>
<h2 id="Usage_context">Usage context</h2>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a>, and <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a>&nbsp;<a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element.</li>
  <li><dfn>Permitted content</dfn> Character data</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLTextareaElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
  <dt>
    {{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.&nbsp;</dd>
  <dt>
    {{ htmlattrdef("cols") }}</dt>
  <dd>
    The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is <span style="font-family: Courier New;">20</span> (HTML5).</dd>
  <dt>
    {{ htmlattrdef("disabled") }}</dt>
  <dd>
    This Boolean attribute indicates that the user cannot interact with the control. (If this attribute is not specified, the control inherits its setting from the containing element, for example {{ HTMLElement("fieldset") }}; if there is no containing element with the <code>disabled</code> attribute set, then the control is enabled.)</dd>
  <dt>
    {{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    The form element that the textarea element is associated with (its "form owner"). The value of the attribute must be an 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 their form elements.</dd>
  <dt>
    {{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    The maximum number of characters (Unicode code points) that the user can enter. If it is not specified, the user can enter an unlimited number of characters.</dd>
  <dt>
    {{ htmlattrdef("name") }}</dt>
  <dd>
    The name of the control.</dd>
  <dt>
    {{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds.</dd>
  <dt>
    {{ htmlattrdef("readonly") }}</dt>
  <dd>
    This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the <code>disabled</code> attribute, the <code>readonly</code> 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.</dd>
  <dt>
    {{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    This attribute specifies that the user must fill in a value before submitting a form.</dd>
  <dt>
    {{ htmlattrdef("rows") }}</dt>
  <dd>
    The number of visible text lines for the control.</dd>
  <dt>
    {{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL&nbsp;locale, or "backward" if the selection was made in the opposite direction. This can be "none"&nbsp;if the selection direction is unknown.</dd>
  <dt>
    {{ htmlattrdef("selectionEnd") }}</dt>
  <dd>
    The index to the last character in the current selection.</dd>
  <dt>
    {{ htmlattrdef("selectionStart") }}</dt>
  <dd>
    The index to the first character in the current selection.</dd>
  <dt>
    {{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt>
  <dd>
    Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
  <dt>
    {{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    Indicates how the control wraps text. Possible values are:
    <ul>
      <li><span style="font-family: Courier New;">hard</span>: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the <code>cols</code> attribute must be specified.</li>
      <li><span style="font-family: Courier New;">soft</span>: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.</li>
    </ul>
    <p>If this attribute is not specified, <span style="font-family: Courier New;">soft</span> is its default value.</p>
  </dd>
</dl>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the <code><a href="/en/DOM/HTMLTextAreaElement" title="en/DOM/textarea">HTMLTextAreaElement</a></code> interface.</p>
<p>{{ h1_gecko_minversion("Resizable textareas", "2.0") }}</p>
<p>{{ gecko("2.0") }} introduced support for resizable textareas. This is controlled by the {{ cssxref("resize") }} CSS property. Resizing of textareas is enabled by default, but you can explicitly disable it by including the following CSS:</p>
<pre>
textarea {
&nbsp; resize: none;
}
</pre>
<h2 id="Interaction_with_CSS">Interaction with CSS</h2>
<p>In regards to CSS, an <code>&lt;textarea&gt;</code> is a <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">replaced element</a>. 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, as the behavior will be unpredictable.</p>
<p>A <em>textarea</em> has intrinsic dimensions, like a raster image.</p>
<h2 id="Example" name="Example">Example</h2>
<h3 id="HTML_Content">HTML Content</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>
<!-- <h4 id="Result">Result</h4>
<p><textarea cols="50" name="textarea" rows="10">Write something here</textarea><img align="absmiddle" alt="" class="ife_marker" id="textarea_ife_marker_0" src="chrome://informenter/skin/marker.png" style="border: 0pt none; width: 14px; height: 19px; cursor: pointer; display: inline;" title="Max field length is unknown" /></p>-->
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-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', 'the-button-element.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibility">Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>autofocus</code> attribute</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>maxlength</code> attribute</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>placeholder</code> attribute</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>11.50</td>
        <td>5.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>autofocus</code> attribute</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>maxlength</code> attribute</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>placeholder</code> attribute</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>11.50</td>
        <td>4.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>Starting in&nbsp;Gecko 6.0 {{ geckoRelease("6.0") }}, when a {{ HTMLElement("textarea") }} is focused, the insertion point is placed at the beginning of the text by default, instead of at the end. This change makes Gecko's behavior consistent with other popular browsers.</p>
<h2 id="See_also">See also</h2>
<p>Other form-related elements:&nbsp;{{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p>
<p>{{ languages( { "fr": "fr/HTML/Element/textarea" } ) }}</p>
Revert to this revision