html5/spec/the-textarea-element.html - view

File: [Public] / html5 / spec / the-textarea-element.html
Revision 1.216: download - view: text, annotated - select for diffs
Wed Nov 21 04:44:11 2012 UTC (12 years, 5 months ago) by sruby
Branches: MAIN
CVS tags: HEAD

commit 1077bca89fbac7a99525653cda746ae1c3e87409
Author: Silvia Pfeiffer <silviapfeiffer1@gmail.com>
Date:   Wed Nov 21 15:38:38 2012 +1100

    [Editorial] Update of revision number up to which WHATWG changes have
    been merged.

<!DOCTYPE html><html lang="en-US-x-Hixie"><meta charset="utf-8"><title>4.10.13 The textarea element — HTML5</title><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } i, em { font-style: italic; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } .note em, .warning em, .note i, .warning i { font-style: normal; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } </style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><script> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } </script><link href="the-option-element.html" rel="prev" title="4.10.12 The option element"> <link href="index.html#contents" rel="contents" title="Table of contents"> <link href="the-keygen-element.html" rel="next" title="4.10.14 The keygen element"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> <h1>HTML5</h1> <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> <h2 class="no-num no-toc" id="editor's-draft-date-1-january-1970">Editor's Draft 21 November 2012</h2> </div> <nav class="prev_next"> <a href="the-option-element.html">&slarr; 4.10.12 The option element</a> – <a href="index.html#contents">Table of contents</a> – <a href="the-keygen-element.html">4.10.14 The keygen element &srarr;</a> </nav> <h4 id="the-textarea-element"><span class="secno">4.10.13 </span>The <dfn><code>textarea</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dd><a href="content-models.html#interactive-content-0">Interactive content</a>.</dd> <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd> <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="content-models.html#text-content" title="text content">Text</a>.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code></dd> <dd><code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code></dd> <dd><code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code></dd> <dd><code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-disabled">disabled</a></code></dd> <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd> <dd><code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code></dd> <dd><code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code></dd> <dd><code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code></dd> <dd><code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code></dd> <dd><code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code></dd> <dd><code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code></dd> <dd><code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code></dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt> <dd> <pre class="idl">interface <dfn id="htmltextareaelement">HTMLTextAreaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>; attribute unsigned long <a href="#dom-textarea-cols" title="dom-textarea-cols">cols</a>; attribute DOMString <a href="#dom-textarea-dirname" title="dom-textarea-dirName">dirName</a>; attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-disabled" title="dom-fe-disabled">disabled</a>; readonly attribute <a href="the-form-element.html#htmlformelement">HTMLFormElement</a>? <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>; attribute long <a href="#dom-textarea-maxlength" title="dom-textarea-maxLength">maxLength</a>; attribute DOMString <a href="attributes-common-to-form-controls.html#dom-fe-name" title="dom-fe-name">name</a>; attribute DOMString <a href="#dom-textarea-placeholder" title="dom-textarea-placeholder">placeholder</a>; attribute boolean <a href="#dom-textarea-readonly" title="dom-textarea-readOnly">readOnly</a>; attribute boolean <a href="#dom-textarea-required" title="dom-textarea-required">required</a>; attribute unsigned long <a href="#dom-textarea-rows" title="dom-textarea-rows">rows</a>; attribute DOMString <a href="#dom-textarea-wrap" title="dom-textarea-wrap">wrap</a>; readonly attribute DOMString <a href="#dom-textarea-type" title="dom-textarea-type">type</a>; attribute DOMString <a href="#dom-textarea-defaultvalue" title="dom-textarea-defaultValue">defaultValue</a>; [TreatNullAs=EmptyString] attribute DOMString <a href="#dom-textarea-value" title="dom-textarea-value">value</a>; readonly attribute unsigned long <a href="#dom-textarea-textlength" title="dom-textarea-textLength">textLength</a>; readonly attribute boolean <a href="constraints.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>; readonly attribute <a href="constraints.html#validitystate">ValidityState</a> <a href="constraints.html#dom-cva-validity" title="dom-cva-validity">validity</a>; readonly attribute DOMString <a href="constraints.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>; boolean <a href="constraints.html#dom-cva-checkvalidity" title="dom-cva-checkValidity">checkValidity</a>(); void <a href="constraints.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error); readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>; void <a href="textFieldSelection.html#dom-textarea/input-select" title="dom-textarea/input-select">select</a>(); attribute unsigned long <a href="textFieldSelection.html#dom-textarea/input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>; attribute unsigned long <a href="textFieldSelection.html#dom-textarea/input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>; attribute DOMString <a href="textFieldSelection.html#dom-textarea/input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>; void <a href="textFieldSelection.html#dom-textarea/input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(unsigned long start, unsigned long end, optional DOMString direction); };</pre> </dd> </dl><p>The <code><a href="#the-textarea-element">textarea</a></code> element <a href="rendering.html#represents">represents</a> a multiline plain text edit control<span class="impl"> for the element's <dfn id="concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</dfn></span>. The contents of the control represent the control's default value.</p> <div class="impl"> <p>The <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> of a <code><a href="#the-textarea-element">textarea</a></code> control must be initially the empty string.</p> <p>A newline in a <code><a href="#the-textarea-element">textarea</a></code> element, and in its <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>, should separate paragraphs for the purposes of the Unicode bidirectional algorithm. This requirement may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property. <a href="references.html#refsBIDI">[BIDI]</a> <a href="references.html#refsCSS">[CSS]</a></p> </div> <p>The <dfn id="attr-textarea-readonly" title="attr-textarea-readonly"><code>readonly</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> used to control whether the text can be edited by the user or not.</p> <div class="example"> <p>In this example, a text field is marked read-only because it represents a read-only file:</p> <pre>Filename: <code>/etc/bash.bashrc</code> <textarea name="buffer" readonly> # System-wide .bashrc file for interactive bash(1) shells. # To enable the settings / commands in this file for login shells as well, # this file has to be sourced in /etc/profile. # If not running interactively, don't do anything [ -z "$PS1" ] &amp;&amp; return ...</textarea></pre> </div> <div class="impl"> <p><strong>Constraint validation</strong>: If the <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> attribute is specified on a <code><a href="#the-textarea-element">textarea</a></code> element, the element is <a href="constraints.html#barred-from-constraint-validation">barred from constraint validation</a>.</p> <p>A <code><a href="#the-textarea-element">textarea</a></code> element is <dfn id="concept-textarea-mutable" title="concept-textarea-mutable">mutable</dfn> if it is neither <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> nor has a <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> attribute specified.</p> <p>When a <code><a href="#the-textarea-element">textarea</a></code> is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, its <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> should be editable by the user: the user agent should allow the user to edit, insert, and remove text, and to insert and remove line breaks in the form of "LF" (U+000A) characters. Any time the user causes the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> to change, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> that bubbles named <code title="event-input">input</code> at the <code><a href="#the-textarea-element">textarea</a></code> element. User agents may wait for a suitable break in the user's interaction before queuing the task; for example, a user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously for each keystroke.</p>  <p>A <code><a href="#the-textarea-element">textarea</a></code> element has a <dfn id="concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</dfn>, which must be initially set to false, and must be set to true whenever the user interacts with the control in a way that changes the <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>.</p> <p>When the <code><a href="#the-textarea-element">textarea</a></code> element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute changes value, if the element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a> is false, then the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> must be set to the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p> <p>The <a href="constraints.html#concept-form-reset-control" title="concept-form-reset-control">reset algorithm</a> for <code><a href="#the-textarea-element">textarea</a></code> elements is to set the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">value</a> to the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p>   <p>If the element is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:</p> <ol><li><p>Set the element's <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code> attribute to "<code title="attr-dir-ltr"><a href="global-attributes.html#attr-dir-ltr">ltr</a></code>" if the user selected a left-to-right writing direction, and "<code title="attr-dir-rtl"><a href="global-attributes.html#attr-dir-rtl">rtl</a></code>" if the user selected a right-to-left writing direction.</li> <li><p><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> that bubbles named <code title="event-input">input</code> at the <code><a href="#the-textarea-element">textarea</a></code> element.</li> </ol></div> <p>The <dfn id="attr-textarea-cols" title="attr-textarea-cols"><code>cols</code></dfn> attribute specifies the expected maximum number of characters per line. If the <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code> attribute is specified, its value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a> greater than zero. <span class="impl">If applying the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to the attribute's value results in a number greater than zero, then the element's <dfn id="attr-textarea-cols-value" title="attr-textarea-cols-value">character width</dfn> is that value; otherwise, it is 20.</span></p> <div class="impl"> <p>The user agent may use the <code><a href="#the-textarea-element">textarea</a></code> element's <a href="#attr-textarea-cols-value" title="attr-textarea-cols-value">character width</a> as a hint to the user as to how many characters the server prefers per line (e.g. for visual user agents by making the width of the control be that many characters). In visual renderings, the user agent should wrap the user's input in the rendering so that each line is no wider than this number of characters.</p> </div> <p>The <dfn id="attr-textarea-rows" title="attr-textarea-rows"><code>rows</code></dfn> attribute specifies the number of lines to show. If the <code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code> attribute is specified, its value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a> greater than zero. <span class="impl">If applying the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to the attribute's value results in a number greater than zero, then the element's <dfn id="attr-textarea-rows-value" title="attr-textarea-rows-value">character height</dfn> is that value; otherwise, it is 2.</span></p> <div class="impl"> <p>Visual user agents should set the height of the control to the number of lines given by <a href="#attr-textarea-rows-value" title="attr-textarea-rows-value">character height</a>.</p> </div> <p>The <dfn id="attr-textarea-wrap" title="attr-textarea-wrap"><code>wrap</code></dfn> attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> with two keywords and states: the <dfn id="attr-textarea-wrap-soft" title="attr-textarea-wrap-soft"><code>soft</code></dfn> keyword which maps to the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state, and the <dfn id="attr-textarea-wrap-hard" title="attr-textarea-wrap-hard"><code>hard</code></dfn> keyword which maps to the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state. The <i>missing value default</i> is the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state.</p> <p>The <dfn id="attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</dfn> state indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is not to be wrapped when it is submitted (though it can still be wrapped in the rendering).</p> <p>The <dfn id="attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</dfn> state indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is to have newlines added by the user agent so that the text is wrapped when it is submitted.</p> <p>If the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code> attribute is in the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state, the <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code> attribute must be specified.</p>  <div class="impl"> <p>For historical reasons, the element's value is normalised in three different ways for three different purposes. The <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> is the value as it was originally set. It is not normalized. The <a href="#concept-textarea-api-value" title="concept-textarea-api-value">API value</a> is the value used in the <code title="dom-textarea-value"><a href="#dom-textarea-value">value</a></code> IDL attribute. It is normalized so that line breaks use "LF" (U+000A) characters. Finally, there is the form submission <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>. It is normalized so that line breaks use U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs, and in addition, if necessary given the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code> attribute, additional line breaks are inserted to wrap the text at the given width.</p> <p>The element's <dfn id="concept-textarea-api-value" title="concept-textarea-api-value">API value</dfn> is defined to be the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with the following transformation applied:</p> <ol><li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair from the <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with a single "LF" (U+000A) character.</li> <li><p>Replace every remaining U+000D CARRIAGE RETURN character from the <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with a single "LF" (U+000A) character.</li> </ol><p>The element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is defined to be the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with the following transformation applied:</p> <ol><li><p>Replace every occurrence of a "CR" (U+000D) character not followed by a "LF" (U+000A) character, and every occurrence of a "LF" (U+000A) character not preceded by a "CR" (U+000D) character, by a two-character string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.</li> <li><p>If the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code> attribute is in the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state, insert U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs into the string using a UA-defined algorithm so that each line has no more than <a href="#attr-textarea-cols-value" title="attr-textarea-cols-value">character width</a> characters. For the purposes of this requirement, lines are delimited by the start of the string, the end of the string, and U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs.</li> </ol></div> <p>The <dfn id="attr-textarea-maxlength" title="attr-textarea-maxlength"><code>maxlength</code></dfn> attribute is a <a href="attributes-common-to-form-controls.html#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a> controlled by the <code><a href="#the-textarea-element">textarea</a></code> element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a>.</p> <p>If the <code><a href="#the-textarea-element">textarea</a></code> element has a <a href="attributes-common-to-form-controls.html#maximum-allowed-value-length">maximum allowed value length</a>, then the element's children must be such that the <a href="infrastructure.html#code-unit-length">code-unit length</a> of the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute is equal to or less than the element's <a href="attributes-common-to-form-controls.html#maximum-allowed-value-length">maximum allowed value length</a>.</p> <p>The <dfn id="attr-textarea-required" title="attr-textarea-required"><code>required</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the user will be required to enter a value before submitting the form.</p> <div class="impl"> <p><strong>Constraint validation</strong>: If the element has its <code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code> attribute specified, and the element is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, and the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is the empty string, then the element is <a href="constraints.html#suffering-from-being-missing">suffering from being missing</a>.</p> </div>  <p>The <dfn id="attr-textarea-placeholder" title="attr-textarea-placeholder"><code>placeholder</code></dfn> attribute represents a <em>short</em> hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no "LF" (U+000A) or "CR" (U+000D) characters.</p> <p>The <code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code> attribute should not be used as an alternative to a <code><a href="the-label-element.html#the-label-element">label</a></code>. For a longer hint or other advisory text, the <code title="attr-title"><a href="global-attributes.html#attr-title">title</a></code> attribute is more appropriate.</p> <p class="note">These mechanisms are very similar but subtly different: the hint given by the control's <code><a href="the-label-element.html#the-label-element">label</a></code> is shown at all times; the short hint given in the <code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code> attribute is shown before the user enters a value; and the hint in the <code title="attr-title"><a href="global-attributes.html#attr-title">title</a></code> attribute is shown when the user requests further help.</p> <div class="impl"> <p>User agents should present this hint to the user, after having <a href="common-microsyntaxes.html#strip-line-breaks" title="strip line breaks">stripped line breaks</a> from it, when the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control).</p> </div> <p>The <dfn id="attr-textarea-dirname" title="attr-textarea-dirname"><code>dirname</code></dfn> attribute is a <a href="form-submission.html#form-control-dirname-attribute">form control <code title="">dirname</code> attribute</a>.</p> <p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to explicitly associate the <code><a href="#the-textarea-element">textarea</a></code> element with its <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> attribute represents the element's name. The <code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-disabled">disabled</a></code> attribute is used to make the control non-interactive and to prevent its value from being submitted. The <code title="attr-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code> attribute controls focus.</p>  <dl class="domintro"><dt><var title="">textarea</var> . <code title="attr-textarea-type">type</code></dt> <dd> <p>Returns the string "<code title="">textarea</code>".</p> </dd> <dt><var title="">textarea</var> . <code title="attr-textarea-value">value</code></dt> <dd> <p>Returns the current value of the element.</p> <p>Can be set, to change the value.</p> </dd> </dl><div class="impl"> <p>The <dfn id="dom-textarea-cols" title="dom-textarea-cols"><code>cols</code></dfn>, <dfn id="dom-textarea-placeholder" title="dom-textarea-placeholder"><code>placeholder</code></dfn>, <dfn id="dom-textarea-required" title="dom-textarea-required"><code>required</code></dfn>, <dfn id="dom-textarea-rows" title="dom-textarea-rows"><code>rows</code></dfn>, and <dfn id="dom-textarea-wrap" title="dom-textarea-wrap"><code>wrap</code></dfn> attributes must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name. The <code title="dom-textarea-cols"><a href="#dom-textarea-cols">cols</a></code> and <code title="dom-textarea-rows"><a href="#dom-textarea-rows">rows</a></code> attributes are <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative numbers greater than zero</a>. The <code title="dom-textarea-cols"><a href="#dom-textarea-cols">cols</a></code> attribute's default value is 20. The <code title="dom-textarea-rows"><a href="#dom-textarea-rows">rows</a></code> attribute's default value is 2. The <dfn id="dom-textarea-dirname" title="dom-textarea-dirName"><code>dirName</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> content attribute. The <dfn id="dom-textarea-maxlength" title="dom-textarea-maxLength"><code>maxLength</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code> content attribute, <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers">limited to only non-negative numbers</a>. The <dfn id="dom-textarea-readonly" title="dom-textarea-readOnly"><code>readOnly</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> content attribute.</p> <p>The <dfn id="dom-textarea-type" title="dom-textarea-type"><code>type</code></dfn> IDL attribute must return the value "<code title="">textarea</code>".</p> <p>The <dfn id="dom-textarea-defaultvalue" title="dom-textarea-defaultValue"><code>defaultValue</code></dfn> IDL attribute must act like the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p> <p>The <dfn id="dom-textarea-value" title="dom-textarea-value"><code>value</code></dfn> attribute must, on getting, return the element's <a href="#concept-textarea-api-value" title="concept-textarea-api-value">API value</a>; on setting, it must set the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> to the new value, set the element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a> to true, and should then move the text entry cursor position to the end of the text field, unselecting any selected text and resetting the selection direction to <i>none</i>.</p> <p>The <dfn id="dom-textarea-textlength" title="dom-textarea-textLength"><code>textLength</code></dfn> IDL attribute must return the <a href="infrastructure.html#code-unit-length">code-unit length</a> of the element's <a href="#concept-textarea-api-value" title="concept-textarea-api-value">API value</a>.</p> <p>The <code title="dom-cva-willValidate"><a href="constraints.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="constraints.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="constraints.html#dom-cva-validationmessage">validationMessage</a></code> IDL attributes, and the <code title="dom-cva-checkValidity"><a href="constraints.html#dom-cva-checkvalidity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="constraints.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code> methods, are part of the <a href="constraints.html#the-constraint-validation-api">constraint validation API</a>. The <code title="dom-lfe-labels"><a href="the-label-element.html#dom-lfe-labels">labels</a></code> IDL attribute provides a list of the element's <code><a href="the-label-element.html#the-label-element">label</a></code>s. The <code title="dom-textarea/input-select"><a href="textFieldSelection.html#dom-textarea/input-select">select()</a></code>, <code title="dom-textarea/input-selectionStart"><a href="textFieldSelection.html#dom-textarea/input-selectionstart">selectionStart</a></code>, <code title="dom-textarea/input-selectionEnd"><a href="textFieldSelection.html#dom-textarea/input-selectionend">selectionEnd</a></code>, <code title="dom-textarea/input-selectionDirection"><a href="textFieldSelection.html#dom-textarea/input-selectiondirection">selectionDirection</a></code>, <code title="dom-textarea/input-setRangeText">setRangeText()</code>, and <code title="dom-textarea/input-setSelectionRange"><a href="textFieldSelection.html#dom-textarea/input-setselectionrange">setSelectionRange()</a></code> methods and IDL attributes expose the element's text selection. The <code title="dom-fe-autofocus"><a href="attributes-common-to-form-controls.html#dom-fe-autofocus">autofocus</a></code>, <code title="dom-fe-disabled"><a href="attributes-common-to-form-controls.html#dom-fe-disabled">disabled</a></code>, <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code>, and <code title="dom-fe-name"><a href="attributes-common-to-form-controls.html#dom-fe-name">name</a></code> IDL attributes are part of the element's forms API.</p> </div>  <div class="example"> <p>Here is an example of a <code><a href="#the-textarea-element">textarea</a></code> being used for unrestricted free-form text input in a form:</p> <pre><p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p></pre> <p>To specify a maximum length for the comments, one can use the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code> attribute:</p> <pre><p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p></pre> <p>To give a default value, text can be included inside the element:</p> <pre><p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p></pre> <p>To have the browser submit <a href="global-attributes.html#the-directionality">the directionality</a> of the element along with the value, the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> attribute can be specified:</p> <pre><p>If you have any comments, please let us know (you may use either English or Hebrew for your comments): <textarea cols=80 name=comments dirname=comments.dir></textarea></p></pre> </div>