メインコンテンツへスキップ

textarea要素

1.仕様

TEXTAREA要素は、
生の値の複数行の
プレーンテキスト
編集コントロールを
表します。

textarea

複数行のテキストフィールド (multi-line text field)

種類
エスケープ可能な生テキスト要素

テキストおよび文字参照を持つことができる要素です。

カテゴリ

使用できるコンテキスト
フレージングコンテンツを受け入れる要素

フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。

フレージングコンテンツを受け入れる要素は、h1要素, h2要素, h3要素, h4要素, h5要素, h6要素, p要素, pre要素, output要素, progress要素, meter要素, label要素, datalist要素, body要素, section要素, nav要素, aside要素, article要素, header要素, footer要素, main要素, address要素, li要素, dt要素, dd要素, caption要素, th要素, td要素, form要素, fieldset要素, search要素, blockquote要素, figure要素, figcaption要素, div要素, dialog要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素 です。

コンテンツモデル
テキスト

テキストが配置できます。

テキストに分類される要素は、 です。

タグの省略

どちらのタグも省略できません。

コンテンツ属性
グローバル属性 他
autocomplete属性
フォーム自動入力機能のヒント
cols属性
1 行あたりの最大文字数
dirname属性
フォーム送信時に要素の方向性を送信するために使用するフォームコントロールの名前
disabled属性
フォームコントロールが無効かどうか
form属性
要素をフォーム要素に関連付けます
maxlength属性
値の最大長
minlength属性
値の最小長
name属性
フォーム送信および form.elements API で使用する要素の名前
placeholder属性
フォームコントロール内に配置されるユーザーに見えるラベル
readonly属性
ユーザーによる値の編集を許可するかどうか
required属性
フォーム送信にコントロールが必要かどうか
rows属性
表示する行数
wrap属性
フォーム送信のためにフォームコントロールの値をラップする方法
DOM インターフェイス
HTMLTextAreaElement
  1. [Exposed=Window]
  2. interface HTMLTextAreaElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute DOMString autocomplete;
  6. [CEReactions] attribute unsigned long cols;
  7. [CEReactions] attribute DOMString dirName;
  8. [CEReactions] attribute boolean disabled;
  9. readonly attribute HTMLFormElement? form;
  10. [CEReactions] attribute long maxLength;
  11. [CEReactions] attribute long minLength;
  12. [CEReactions] attribute DOMString name;
  13. [CEReactions] attribute DOMString placeholder;
  14. [CEReactions] attribute boolean readOnly;
  15. [CEReactions] attribute boolean required;
  16. [CEReactions] attribute unsigned long rows;
  17. [CEReactions] attribute DOMString wrap;
  18.  
  19. readonly attribute DOMString type;
  20. [CEReactions] attribute DOMString defaultValue;
  21. [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
  22. readonly attribute unsigned long textLength;
  23.  
  24. readonly attribute boolean willValidate;
  25. readonly attribute ValidityState validity;
  26. readonly attribute DOMString validationMessage;
  27. boolean checkValidity();
  28. boolean reportValidity();
  29. undefined setCustomValidity(DOMString error);
  30.  
  31. readonly attribute NodeList labels;
  32.  
  33. undefined select();
  34. attribute unsigned long selectionStart;
  35. attribute unsigned long selectionEnd;
  36. attribute DOMString selectionDirection;
  37. undefined setRangeText(DOMString replacement);
  38. undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  39. undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
  40. };
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML
暗黙的="textbox" ARIAロール="No" aria-* 属性="GlobalAny"

暗黙的な ARIAセマンティクスは、role=textbox です。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

グローバル aria-* 属性と、許可されたロールに適用される任意の aria-* 属性が記述できます。

レンダリング
インラインレベルボックス
フォームコントロール
  1. textarea {
  2. display: inline-block;
  3. letter-spacing: initial;
  4. word-spacing: initial;
  5. line-height: initial;
  6. text-transform: initial;
  7. text-indent: initial;
  8. text-shadow: initial;
  9. appearance: auto;
  10. text-align: initial;
  11. white-space: pre-wrap;
  12. }

CSS を大雑把に読むと、 インラインレベルのブロックコンテナボックス(インラインブロック)を生成します。 などになります。

説明
textarea要素は、要素の生の値の複数行のプレーンテキスト編集コントロールを表します。コントロールの内容は、コントロールのデフォルト値を表します。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>textarea要素の例 - (Example of textarea element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>textarea要素の例</h1>
  9. <form action="../Html/fmreceive.htm">
  10. <textarea name="ntaTextarea">
  11. abc
  12. xyz
  13. </textarea>
  14. <button name="nbtSender" value="../Html/extextarea.htm">ボタン</button>
  15. <br>受信用の<br>ページへ
  16. </form>
  17. </body>
  18. </html>

このサンプルへのリンクです。
(./extextarea.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "textarea": {
  3. "check": "2024-09-01",
  4. "group": "Form",
  5. "element": "- - (#PCDATA) -- multi-line text field. (Escapable raw text elements.) [Flow|Phrasing|Interactive|Listed|Labelable|Submittable|Resettable|Autocapitalize|Form|Palpable] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "autocomplete": "(on|off) on -- Hint for form autofill feature --",
  9. "cols": "NUMBER 20 -- Maximum number of characters per line --",
  10. "dirname": "CDATA #IMPLIED -- Name of form control to use for sending the element's directionality in form submission --",
  11. "disabled": "(disabled) #IMPLIED -- Whether the form control is disabled --",
  12. "form": "IDREF #IMPLIED -- Associates the element with a form element --",
  13. "maxlength": "NUMBER #IMPLIED -- Maximum length of value --",
  14. "minlength": "NUMBER #IMPLIED -- Minimum length of value --",
  15. "name": "CDATA #IMPLIED -- Name of the element to use for form submission and in the form.elements API --",
  16. "placeholder": "CDATA #IMPLIED -- User-visible label to be placed within the form control --",
  17. "readonly": "(readonly) #IMPLIED -- Whether to allow the value to be edited by the user --",
  18. "required": "(required) #IMPLIED -- Whether the control is required for form submission --",
  19. "rows": "NUMBER 2 -- Number of lines to show --",
  20. "wrap": "(soft|hard) soft— -- How the value of the form control is to be wrapped for form submission --",
  21. },
  22. "comment": "複数行のテキストフィールド (multi-line text field)",
  23. "point": "要素の生の値の複数行のプレーンテキスト編集コントロールを表します。コントロールの内容は、コントロールのデフォルト値を表します。",
  24. "kind": "Escapable",
  25. "categories": [
  26. "Flow",
  27. "Phrasing",
  28. "Interactive",
  29. "Listed",
  30. "Labelable",
  31. "Submittable",
  32. "Resettable",
  33. "Autocapitalize",
  34. "Formassociated",
  35. "Palpable",
  36. ],
  37. "used": "parent (%Phrasing)*",
  38. "contentmodel": "textarea (%Text)",
  39. "tag": [
  40. "-",
  41. "-",
  42. ],
  43. "attributes": {
  44. "autocomplete": "フォーム自動入力機能のヒント",
  45. "cols": "1 行あたりの最大文字数",
  46. "dirname": "フォーム送信時に要素の方向性を送信するために使用するフォームコントロールの名前",
  47. "disabled": "フォームコントロールが無効かどうか",
  48. "form": "要素をフォーム要素に関連付けます",
  49. "maxlength": "値の最大長",
  50. "minlength": "値の最小長",
  51. "name": "フォーム送信および form.elements API で使用する要素の名前",
  52. "placeholder": "フォームコントロール内に配置されるユーザーに見えるラベル",
  53. "readonly": "ユーザーによる値の編集を許可するかどうか",
  54. "required": "フォーム送信にコントロールが必要かどうか",
  55. "rows": "表示する行数",
  56. "wrap": "フォーム送信のためにフォームコントロールの値をラップする方法",
  57. },
  58. "dominterface": "HTMLTextAreaElement",
  59. "rendering": [
  60. "Form",
  61. "Bidirectional",
  62. ],
  63. "reference": [
  64. {
  65. "title": "HTML Living Standard. 4.10.11 The textarea element.",
  66. "href": "https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element",
  67. "heading": "HTML Living Standard. 4.10.11 The textarea element",
  68. "sub": "Last Updated 27 August 2024",
  69. },
  70. {
  71. "title": "HTML Living Standard. 15 Rendering 15.3.10 Form controls.",
  72. "href": "https://html.spec.whatwg.org/multipage/rendering.html#form-controls",
  73. "heading": "HTML Living Standard. 15 Rendering 15.3.10 Form controls",
  74. "sub": "Last Updated 27 August 2024",
  75. },
  76. {
  77. "title": "HTML Living Standard. 15 Rendering 15.5.17 The textarea element.",
  78. "href": "https://html.spec.whatwg.org/multipage/rendering.html#the-textarea-element-2",
  79. "heading": "HTML Living Standard. 15 Rendering 15.5.17 The textarea element",
  80. "sub": "Last Updated 24 April 2024",
  81. },
  82. {
  83. "title": "HTML 5.2 W3C Recommendation. 4.10.11 The textarea element. W3C Recommendation, 14 December 2017.",
  84. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#the-textarea-element",
  85. "heading": "HTML 5.2 W3C 勧告. 4.10.11 The textarea element",
  86. "sub": "W3C勧告、2017年12月14日",
  87. },
  88. {
  89. "title": "HTML 5.2 W3C Recommendation. 10.3.11. Form controls.",
  90. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#form-controls",
  91. "heading": "HTML 5.2 W3C 勧告. 10.3.11. Form controls.",
  92. "sub": "W3C勧告、2017年12月14日",
  93. },
  94. {
  95. "title": "HTML 5.1 W3C Recommendation. 4.10.11 The textarea element. W3C Recommendation, 1 November 2016.",
  96. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-textarea-element",
  97. "heading": "HTML 5.1 W3C 勧告. 4.10.11 The textarea element",
  98. "sub": "W3C勧告、2016年11月1日",
  99. },
  100. {
  101. "title": "HTML 5.1 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 1 November 2016.",
  102. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#form-controls",
  103. "heading": "HTML 5.1 W3C 勧告. 10.3.11. Form controls.",
  104. "sub": "W3C勧告、2016年11月1日",
  105. },
  106. {
  107. "title": "HTML 5 W3C Recommendation. 4.10.11 The textarea element. W3C Recommendation, 28 October 2014.",
  108. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-textarea-element",
  109. "heading": "HTML 5 W3C 勧告. 4.10.11 The textarea element",
  110. "sub": "W3C勧告、2014年10月28日",
  111. },
  112. {
  113. "title": "HTML 5 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 28 October 2014.",
  114. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#form-controls",
  115. "heading": "HTML 5 W3C 勧告. 10.3.11. Form controls.",
  116. "sub": "W3C勧告、2014年10月28日",
  117. },
  118. {
  119. "title": "HTML 4.01 Specification W3C Recommendation. 17.7 The TEXTAREA element. W3C Recommendation 24 December 1999.",
  120. "href": "https://www.w3.org/TR/html401/interact/forms.html#h-17.7",
  121. "heading": "HTML 4.01 Specification W3C 勧告. 17.7 The TEXTAREA elements",
  122. "sub": "W3C勧告1999年12月24日",
  123. },
  124. {
  125. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  126. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#textarea",
  127. "heading": "HTML 3.2 Reference Specification",
  128. "sub": "W3C勧告1997年1月14日",
  129. },
  130. {
  131. "title": "Hypertext Markup Language - 2.0. November 1995.",
  132. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  133. "heading": "Hypertext Markup Language - 2.0",
  134. "sub": "November 1995",
  135. },
  136. {
  137. "title": "MDN Web Docs. HTML <textarea>: The Textarea element.",
  138. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea",
  139. "heading": "<textarea>: テキストエリア要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  140. },
  141. ],
  142. "version": {
  143. "first": "HTML2",
  144. "latest": "HTML Living Standard",
  145. },
  146. }
  147. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用可能な箇所

フレージングコンテンツ を
受け入れる要素に
配置できます。

textarea要素を使用できる状態(コンテキスト・Context)は、フレージングコンテンツを受け入れる要素に配置できます。

フレージングコンテンツを受け入れる要素は、h1要素, h2要素, h3要素, h4要素, h5要素, h6要素, p要素, pre要素, output要素, progress要素, meter要素, label要素, datalist要素, body要素, section要素, nav要素, aside要素, article要素, header要素, footer要素, main要素, address要素, li要素, dt要素, dd要素, caption要素, th要素, td要素, form要素, fieldset要素, search要素, blockquote要素, figure要素, figcaption要素, div要素, dialog要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素 です。

尚 厳密に言うと、コンテンツモデルがフレージングコンテンツ, フローコンテンツのいずれかである要素に配置できます。少なくとも現在は、カテゴリがフレージングコンテンツである要素はフローコンテンツでもあります。なので、コンテンツモデルがフローコンテンツである要素にはカテゴリがフレージングコンテンツである要素も配置できるのが現状です。

3.配置できるコンテンツ

テキストを
配置できます。

textareaは、子(内容・コンテンツ・Content)として、テキストを配置できます。エスケープ可能な生テキスト要素です。

4.属性

グローバル属性と、
autocomplete,
cols, dirname,
disabled, form,
maxlength,
minlength,
name,
placeholder,
readonly,
required,
rows, wrap を
設定できます。

textareaは、グローバル属性とautocomplete属性, cols属性, dirname属性, disabled属性, form属性, maxlength属性, minlength属性, name属性, placeholder属性, readonly属性, required属性, rows属性, wrap属性を設定できます。

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea">
  3. abc
  4. xyz
  5. </textarea>
  6. <button name="nbtSender" value="./fotextarea.htm#MAP4NEXT">ボタン</button>
  7. </form>

form要素を改めて提示していない限り、この雛型の 2 行目のtextarea要素の開始タグを置き換えてデモとしています。

button要素のvalueの値は、作成者の決め事によりその都度送信元が分かる様に書き換えています。nameの値は、作成者の決め事によりnbtSenderで固定です。

autocomplete属性

  1. <textarea name="ntaTextarea" autocomplete="on">

autocompleteは、ユーザーエージェントが自動入力動作を提供する方法を制御します。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

cols属性

  1. <textarea name="ntaTextarea" cols="8">

colsは、1 行あたりの想定最大文字数を指定します。colsが指定されている場合、その値は 0 より大きい有効な非負整数である必要があります。非負整数を解析するルールを属性値に適用した結果が 0 より大きい数値になった場合、要素の文字幅はその値になります。それ以外の場合は 20 になります。

dirname属性

  1. <textarea name="ntaTextarea" dirname="ntaDirname">

dirnameは、要素の方向の送信を有効にし、フォーム送信中にこの値を含むコントロールの名前を指定します。このような属性を指定する場合、その値は空の文字列であってはなりません。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

disabled属性

  1. <textarea name="ntaTextarea" disabled>

disabledは、コントロールを非対話型にして、その値が送信されないようにする為に使用されるブール属性です。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

form属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="nipText" form="ifoForm341">
  3. abc
  4. xyz
  5. </textarea>
  6. <button name="nbtSender" value="./fotextarea.htm#MH3FORM">ボタン</button>
  7. </form>
  8. <form id="ifoForm341" action="./fmreceive.htm">
  9. <button name="nbtSender" value="./fotextarea.htm#MH3FORM">ボタン</button>
  10. </form>

formは、入力要素をそのフォーム所有者に明示的に関連付ける為に使用されます。

フォーム関連要素は、デフォルトでは、最も近い祖先form要素に関連付けられます。ただし、リストされている場合は、これを上書きする為にformを指定できます。つまりformを指定してフォーム所有者に関連付けした場合は、その要素の最も近い祖先への関連付けは上書きされるという事で、複数のフォーム所有者に関連付ける事は出来ないという事です。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

maxlength属性

  1. <textarea name="ntaTextarea" maxlength="10">

maxlengthは、要素の値の最大長を示します。

要素に最大許容値の長さがある場合、その要素の子は、改行が正規化された要素の子孫テキストコンテンツの値の長さが、要素の最大許容値長以下になるようにする必要があります。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

minlength属性

  1. <textarea name="ntaTextarea" minlength="6">

minlengthは、要素の値の最小長を示します。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

name属性

  1. <textarea name="ntaTextarea">

nameは、要素の名前を表します。

nameは、フォームの送信時やformの elements オブジェクトで使用されるフォームコントロールの名前を指定します。属性が指定されている場合、その値は空の文字列またはisindexであってはなりません。
isindex以外では、name に空でない任意の値が許可されます。name_charset_の ASCII 大文字と小文字を区別しない一致は特別です。valueのない Hidden コントロールの名前として使用した場合、送信時にvalueに送信文字エンコーディングで構成される値が自動的に与えられます。

nameはフォームコントロールの名前となるので、他の属性名などと重複しないように命名規則を事前に内部規則などで決めておくのが良いです。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

placeholder属性

  1. <textarea name="ntaTextarea" placeholder="placeholder">

placeholderは、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒント (単語または短いフレーズ) を表します。ヒントは、サンプル値または予想される形式の簡単な説明になります。属性を指定する場合、その値には U+000A LINE FEED (LF) または U+000D CARRIAGE RETURN (CR) 文字が含まれていてはなりません。

placeholderは、ラベルの代わりに使用しないでください。より長いヒントやその他のアドバイステキストの場合は、titleの方が適しています。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

readonly属性

  1. <textarea name="ntaTextarea" readonly>

readonlyは、ユーザーがフォームコントロールを編集できるかどうかを制御するブール属性です。指定すると、要素は変更できなくなります。

textareaにreadonlyが指定されている場合、その要素は制約の検証から除外されます。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

required属性

  1. <textarea name="ntaTextarea" required>

requiredは、フォーム送信にコントロールが必要かどうかを表します。requiredはブール属性です。指定されている場合、要素は必須です。

要素が必須であり、その値の IDL 属性が適用され、モード値にあり、要素が変更可能であり、要素の値が空の文字列である場合、要素は欠落している状態になります。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

rows属性

  1. <textarea name="ntaTextarea" rows="3">

rowsは、表示する行数を指定します。rowsが指定されている場合、その値は 0 より大きい有効な非負整数である必要があります。非負整数を解析するルールを属性値に適用した結果が 0 より大きい数値になった場合、要素の文字の高さはその値になります。それ以外の場合は 2 になります。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

wrap属性

  1. <textarea name="ntaTextarea" wrap="hard" rows="3">

wrapは、フォームコントロールの値をフォーム送信時にどのようにラップするかを指定します。これは、次のキーワードと状態を持つ列挙属性です。

soft
Soft 送信時にテキストは折り返されません (ただし、レンダリングでラップすることはできます).
hard
Hard テキストは、送信時に折り返されるように、ユーザーエージェントによって改行が追加されます。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性の欠落値のデフォルトと無効値のデフォルトはどちらもソフト状態です。

要素のwrapがハード状態の場合、colsを指定する必要があります。

例示では見易さの為に、textareaにスタイルシートで装飾(幅)の指定をしています。

5.Web API

name属性を用いて
form要素
(HTMLFormElement
オブジェクト)の
プロパティとして
要素を取得する方法が
お勧めです。

textarea要素単体を表すプロパティはないですが、まずform要素を取得して、nameの属性値を名称とするそれのプロパティとして要素を取得する方法がお勧めです。 理由は、その名称が送信時のデータ名ともなり分かり易いと思うからです。

6.レンダリング

  1. textarea {
  2. display: inline-block;
  3. white-space: pre-wrap;
  4. text-align: initial;
  5. box-sizing: border-box;
  6. }

textarea要素は、インラインレベルのブロックコンテナボックス(インラインブロック)を生成します。

コードを見易くする為に要素毎に改行すると、改行コードがスペースと扱われて意図しない隙間が表れる事があります。 描画を重視するかコードの見易さを重視するか、折衷案でタグの内で改行するか、いろいろ配慮が必要です。

7.気を付ける点

フォームの所有者

textarea要素などのフォーム関連要素は、要素のフォーム所有者と呼ばれるform要素との関係を持つことができます。そしてフォーム関連要素は、デフォルトで、その最も近い祖先のform要素に関連付けられます。formを用いて、form要素に関連付ける事も出来ます。どのform要素がフォームの所有者であるか、分かり易くする事を意識するのが良いと思います。

名前

nameを用いて名前を付ける時に、プロパティの名称と同じだとアクセスに干渉する事が考えられます。故に命名には内部規則として命名規則を事前に決めておくのが良いと思います。
尚nameがなくて名前が付いていないと、送信対象とならないみたいです。

dirnameを用いる時にも、他のフォーム送信に於けるデータの名前と重複しない様に、命名には内部規則として命名規則を事前に決めておくのが良いと思います。

8.付記