diff options
Diffstat (limited to 'devdocs/html/element%2Ftextarea.html')
| -rw-r--r-- | devdocs/html/element%2Ftextarea.html | 379 |
1 files changed, 379 insertions, 0 deletions
diff --git a/devdocs/html/element%2Ftextarea.html b/devdocs/html/element%2Ftextarea.html new file mode 100644 index 00000000..9c0e0bf2 --- /dev/null +++ b/devdocs/html/element%2Ftextarea.html @@ -0,0 +1,379 @@ +<header><h1><textarea>: The Textarea element</h1></header><div class="section-content"><p>The <code><textarea></code> <a href="../index">HTML</a> 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.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/textarea.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The above example demonstrates a number of features of <code><textarea></code>:</p> <ul> <li>An <code>id</code> attribute to allow the <code><textarea></code> to be associated with a <a href="label"><code><label></code></a> element for accessibility purposes</li> <li>A <code>name</code> attribute to set the name of the associated data point submitted to the server when the form is submitted.</li> <li> +<code>rows</code> and <code>cols</code> attributes to allow you to specify an exact size for the <code><textarea></code> to take. Setting these is a good idea for consistency, as browser defaults can differ.</li> <li>Default content entered between the opening and closing tags. <code><textarea></code> does not support the <code>value</code> attribute.</li> </ul> <p>The <code><textarea></code> element also accepts several attributes common to form <code><input></code>s, such as <code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, and <code>required</code>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autocomplete"><a href="#autocomplete"><code>autocomplete</code></a></dt> <dd> <p>This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:</p> <ul> <li> +<code>off</code>: 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.</li> <li> +<code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li> </ul> <p>If the <code>autocomplete</code> attribute is not specified on a <code><textarea></code> element, then the browser uses the <code>autocomplete</code> attribute value of the <code><textarea></code> element's form owner. The form owner is either the <a href="form"><code><form></code></a> element that this <code><textarea></code> element is a descendant of or the form element whose <code>id</code> is specified by the <code>form</code> attribute of the input element. For more information, see the <a href="form#autocomplete"><code>autocomplete</code></a> attribute in <a href="form"><code><form></code></a>.</p> </dd> <dt id="autocorrect"> +<a href="#autocorrect"><code>autocorrect</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>A string which indicates whether to activate automatic spelling correction and processing of text substitutions (if any are configured) while the user is editing this <code>textarea</code>. Permitted values are:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Enable automatic spelling correction and text substitutions.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Disable automatic spelling correction and text substitutions.</p> </dd> </dl> </dd> <dt id="autofocus"><a href="#autofocus"><code>autofocus</code></a></dt> <dd> <p>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.</p> </dd> <dt id="cols"><a href="#cols"><code>cols</code></a></dt> <dd> <p>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 <code>20</code>.</p> </dd> <dt id="dirname"><a href="#dirname"><code>dirname</code></a></dt> <dd> <p> This attribute is used to indicate the text directionality of the element contents similar to the <a href="input#dirname"><code>dirname</code></a> attribute of the <code><input></code> element. For more information, see the <a href="../attributes/dirname"><code>dirname</code> attribute</a>. </p> </dd> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>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 <a href="fieldset"><code><fieldset></code></a>; if there is no containing element when the <code>disabled</code> attribute is set, the control is enabled.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The form element that the <code><textarea></code> element is associated with (its "form owner"). The value of the attribute must be the <code>id</code> of a form element in the same document. If this attribute is not specified, the <code><textarea></code> element must be a descendant of a form element. This attribute enables you to place <code><textarea></code> elements anywhere within a document, not just as descendants of form elements.</p> </dd> <dt id="maxlength"><a href="#maxlength"><code>maxlength</code></a></dt> <dd> <p>The maximum string length (measured in UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.</p> </dd> <dt id="minlength"><a href="#minlength"><code>minlength</code></a></dt> <dd> <p>The minimum string length (measured in UTF-16 code units) required that the user should enter.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name of the control.</p> </dd> <dt id="placeholder"><a href="#placeholder"><code>placeholder</code></a></dt> <dd> <p>A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.</p> <div class="notecard note" id="sect1"> <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 <a href="label"><code><label></code></a> element tied to the input. See <a href="input#labels"><code><input></code> labels</a> for a full explanation.</p> </div> </dd> <dt id="readonly"><a href="#readonly"><code>readonly</code></a></dt> <dd> <p>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.</p> </dd> <dt id="required"><a href="#required"><code>required</code></a></dt> <dd> <p>This attribute specifies that the user must fill in a value before submitting a form.</p> </dd> <dt id="rows"><a href="#rows"><code>rows</code></a></dt> <dd> <p>The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.</p> </dd> <dt id="spellcheck"><a href="#spellcheck"><code>spellcheck</code></a></dt> <dd> <p>Specifies whether the <code><textarea></code> is subject to spell checking by the underlying browser/OS. The value can be:</p> <ul> <li> +<code>true</code>: Indicates that the element needs to have its spelling and grammar checked.</li> <li> +<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.</li> <li> +<code>false</code> : Indicates that the element should not be spell checked.</li> </ul> </dd> <dt id="wrap"><a href="#wrap"><code>wrap</code></a></dt> <dd> <p>Indicates how the control should wrap the value for form submission. Possible values are:</p> <ul> <li> +<code>hard</code>: The browser automatically inserts line breaks (CR+LF) so that each line is no longer than the width of the control; the <a href="#cols"><code>cols</code></a> attribute must be specified for this to take effect</li> <li> +<code>soft</code>: The browser ensures that all line breaks in the entered value are a <code>CR+LF</code> pair, but no additional line breaks are added to the value.</li> <li> +<code>off</code> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>: Like <code>soft</code> but changes appearance to <code>white-space: pre</code> so line segments exceeding <code>cols</code> are not wrapped and the <code><textarea></code> becomes horizontally scrollable.</li> </ul> <p>If this attribute is not specified, <code>soft</code> is its default value.</p> </dd> </dl> +</div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"> +<p><code><textarea></code> is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a> — it has intrinsic dimensions, like a raster image. By default, its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> value is <code>inline-block</code>. 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.</p> <p><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a> provides some useful tips on styling <code><textarea></code>s.</p> +</div> +<h3 id="baseline_inconsistency">Baseline inconsistency</h3> +<div class="section-content"><p>The HTML specification doesn't define where the baseline of a <code><textarea></code> is, so different browsers set it to different positions. For Gecko, the <code><textarea></code> 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 <code><textarea></code> box. Don't use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a><code>: baseline</code> on it; the behavior is unpredictable.</p></div> +<h3 id="controlling_whether_a_textarea_is_resizable">Controlling whether a textarea is resizable</h3> +<div class="section-content"> +<p>In most browsers, <code><textarea></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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize"><code>resize</code></a> CSS property — resizing is enabled by default, but you can explicitly disable it using a <code>resize</code> value of <code>none</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Kb/u3bu1nvpT/O7lKtEIo+bzXU7mcTXkT9lOo9LL1Tc=" data-language="css"><span class="token selector">textarea</span> <span class="token punctuation">{</span> + <span class="token property">resize</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h3 id="styling_valid_and_invalid_values">Styling valid and invalid values</h3> +<div class="section-content"> +<p>Valid and invalid values of a <code><textarea></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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="N1OulE5MuoghhOvoxHx6yKJIuwQYHshO3FFMuoHpy2U=" data-language="css"><span class="token selector">textarea:invalid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 2px dashed red<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">textarea:valid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 2px solid lime<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>The following example shows a very simple textarea, with a set numbers of rows and columns and some default content.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3xzEtcGNjkcxT2lYqEWT3Y2E4wDgoJnvVDp2lJx2pgU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Write something here<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="600" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="example_using_minlength_and_maxlength">Example using "minlength" and "maxlength"</h3> +<div class="section-content"> +<p>This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="t8iKj8NgWrolFZ7i29EfhPEnrDyIQ/lcPwDjqcLMjSc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> +Write something here… +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title='Example using "minlength" and "maxlength" sample' id="frame_example_using_minlength_and_maxlength" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=example_using_minlength_and_maxlength" loading="lazy"></iframe> +</div> <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><textarea></code> invalid. Also note that even if you have a <code>minlength</code> value set (3, for example), an empty <code><textarea></code> is still considered valid unless you also have the <code>required</code> attribute set.</p> +</div> +<h3 id="example_using_placeholder">Example using "placeholder"</h3> +<div class="section-content"> +<p>This example has a placeholder set. Notice how it disappears when you start typing into the box.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="c8BLjCrmL4EJU3QGFI05qXHW6ARUF3NZsaGZ/Pk11MI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> + <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> + <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comment text.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title='Example using "placeholder" sample' id="frame_example_using_placeholder" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=example_using_placeholder" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect5"> <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 <a href="label"><code><label></code></a> element tied to the input. See <a href="input#labels"><code><input></code> labels</a> for a full explanation.</p> </div> +</div> +<h3 id="disabled_and_readonly">Disabled and readonly</h3> +<div class="section-content"> +<p>This example shows two <code><textarea></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="notecard note" id="sect6"> <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> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="pPF6CDzabHrLb4EVAO8xnop4FGYhaJHn5zO0Qxsl2Bo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> +I am a disabled textarea. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token punctuation">></span></span> +I am a read-only textarea. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Disabled and readonly sample" id="frame_disabled_and_readonly" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=disabled_and_readonly" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">Interactive content</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_labelable">labelable</a>, <a href="../content_categories#form_resettable">resettable</a>, and <a href="../content_categories#form_submittable">submittable</a> <a href="../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>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element">HTML Standard <br><small># the-textarea-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>textarea</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1</summary>["Before Firefox 6, when a <code><textarea></code> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.", "A default background-image gradient is applied to all <code><textarea></code> elements, which can be disabled using <code>background-image: none</code>.", "Before Firefox 89, manipulating the content of <code><textarea></code> elements using <code>Document.execCommand()</code> commands requires workarounds (see <a href="https://bugzil.la/1220696">bug 1220696</a>)."]</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>["Before Firefox 6, when a <code><textarea></code> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.", "A default background-image gradient is applied to all <code><textarea></code> elements, which can be disabled using <code>background-image: none</code>.", "Before Firefox 89, manipulating the content of <code><textarea></code> elements using <code>Document.execCommand()</code> commands requires workarounds (see <a href="https://bugzil.la/1220696">bug 1220696</a>)."]</details></td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes"><details><summary>≤3</summary>Unlike other major browsers, a default style of <code>opacity: 0.4</code> is applied to disabled <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>autocomplete</code></th> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">9.1</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">9.0</td> +</tr> +<tr> +<th><code>cols</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>dirname</code></th> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>disabled</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>form</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>maxlength</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>minlength</code></th> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>placeholder</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>readonly</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>required</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rows</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>spellcheck</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>wrap</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"> +<p>Other form-related elements:</p> <ul> <li><a href="form"><code><form></code></a></li> <li><a href="button"><code><button></code></a></li> <li><a href="datalist"><code><datalist></code></a></li> <li><a href="legend"><code><legend></code></a></li> <li><a href="label"><code><label></code></a></li> <li><a href="select"><code><select></code></a></li> <li><a href="optgroup"><code><optgroup></code></a></li> <li><a href="option"><code><option></code></a></li> <li><a href="input"><code><input></code></a></li> <li><a href="fieldset"><code><fieldset></code></a></li> <li><a href="output"><code><output></code></a></li> <li><a href="progress"><code><progress></code></a></li> <li><a href="meter"><code><meter></code></a></li> </ul> +</div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea</a> + </p> +</div> |