仕様

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

textarea複数行のプレーンテキスト編集コントロール (multi-line Text field)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
  • リストされた要素
  • 送信可能な要素
  • リセット可能な要素
  • ラベル付け可能な要素
  • 自動大文字化継承要素
  • フォーム関連要素
種類エスケープ可能な生テキスト要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		テキストのみ
属性グローバル属性,
form
フォーム要素に関連付け
name
要素の名前
disabled
利用できない
autocomplete
自動補完機能
required
フォーム送信にコントロールが必要かどうか
readonly
変更できない
maxlength
最大文字数
minlength
最小文字数
cols
1行あたりの最大文字数
rows
表示する行数
wrap
折り返しの制御法
placeholder
フォームコントロール内に配置されるユーザーに表示されるラベル
dirname
方向性を送信する為の名前
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		なし[既定値 : textbox]
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. 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. };
レンダリング
フォーム
  1. textarea {
  2. letter-spacing: initial;
  3. word-spacing: initial;
  4. line-height: initial;
  5. text-transform: initial;
  6. text-indent: initial;
  7. text-shadow: initial;
  8. text-align: initial;
  9. white-space: pre-wrap;
  10. box-sizing: border-box;
  11. unicode-bidi: normal;
  12. }
  13. textarea[dir=auto i] {
  14. unicode-bidi: plaintext;
  15. }

initial は、プロパティの初期値 (または既定値) を設定する指定なので、 letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; text-align: start; と置き換えて読んで頂くと判り易いかと思います。

CSS を大雑把に読むと、 テキストの字間のスペースは通常の字間です。 タグや単語の間隔は普通です。 行ボックスの高さはユーザーエージェントに依存します。 テキストを大文字表記に変換しません。 字下げは 0 です。 テキストに影を追加しません。 水平方向の配置をインラインコンテンツは行ボックスの左辺に寄せられます。 連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や br要素のあるときか、行ボックスを埋めるのに必要なときに行います。 width および height プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。 などになります。

参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
textarea要素は、要素の生の値に対する複数行のプレーンテキスト編集コントロールを表します。

コントロールの内容は、コントロールのデフォルト値を表します。

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea">abc
  3. ABC</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

受信用の
ページへ
参照元
  1. HTML Living Standard. 4.10.11 The textarea element
  2. HTML Living Standard. 15 Rendering 15.3.10 Form controls
  3. HTML 5.2 W3C 勧告. 4.10.11 The textarea element
  4. HTML 4.01 Specification W3C 勧告. 17.7 The TEXTAREA element
  5. MDN Web Docs. HTML <textarea>:

使用可能な箇所

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

textarea要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

インタラクティブコンテンツでもあるので、インタラクティブコンテンツを受け付けない要素には配置できません。

ラベル付け可能な要素なので、他にラベル付け可能な要素がある label要素には配置できません。

フォーム関連要素ですが form属性で要素を form要素に関連付ける事ができるので、form要素の子孫に配置する必然はありません。 form要素の子孫でもなく、form属性での関連付けもない記述は、用途としては不適切です。 (このサイトでの例示では、送信等の安全の為に意図的に form要素とフォーム関連要素との関連付けを避けている箇所もあります。)

  1. <pre>
  2. <textarea>テキスト</textarea>
  3. </pre>

フレージングコンテンツを配置できる p要素のコンテンツの一部として、textarea要素を配置できます。

配置できるコンテンツ

テキストのみ
配置できます。

textarea要素は、テキストを配置できます。

  1. <textarea>テキスト
  2. てきすと</textarea>

textarea要素には、テキストのみ配置できます。配置したテキストは編集コントロールのデフォルト値を表します。

属性

form属性

  1. <textarea form="ifmForm" name="ntaTextarea">
  2. </textarea>
  3. <form id="ifmForm" action="./fmreceive.htm">
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

form属性は、form要素の id属性値を設定します。要素を form要素に関連付けます。省略したときは、最も近い祖先の form要素に関連付けられます。


受信用の
ページへ

name属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea">
  3. </textarea>
  4. <textarea>
  5. </textarea>
  6. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>

name属性は、要素の名前を指定します。フォームの送信とform.elements APIで使用する要素の名前です。


受信用の
ページへ

disabled属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" disabled>abc
  3. ABC</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。変更できないだけでなく、送信もできません。


受信用の
ページへ

autocomplete属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" autocomplete="on">
  3. </textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

autocomplete属性は、入力欄が提供する自動補完機能の種類を示します。 関連付けられた form要素の autocomplete属性によって既定値が指定されます。form要素の autocomplete属性それ自体の既定値は on です。 on はブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。


受信用の
ページへ

required属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" required>
  3. </textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

required属性は、ユーザーはフォームを送信する前に値を入力する必要があることを示す論理属性です。


受信用の
ページへ

readonly属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" readonly>abc
  3. ABC</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

readonly属性は、ユーザーがコントロールの値を変更できないことを示す論理属性です。変更できないだけで選択も可能ですし、送信も可能です。


受信用の
ページへ

maxlength属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" maxlength="10">abc
  3. ABC</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

maxlength属性は、ユーザーが入力可能な最大文字数を指定します。正の整数値のみ有効で、無効な値の場合や指定がない場合は無制限として扱われます。有効な minlength属性の値との関係で矛盾が生じない様にしなければなりません。
尚、改行(キャリッジリターン) は１文字分として数えられます。


受信用の
ページへ

minlength属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" minlength="10">abc
  3. ABC</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

minlength属性は、ユーザーが入力しなければいけない必要最小文字数を指定します。正の整数値のみ有効で、無効な値の場合や指定がない場合は無制限として扱われます。有効な maxlength属性の値との関係で矛盾が生じない様にしなければなりません。
尚、改行(キャリッジリターン) は１文字分として数えられます。
編集途中に最小文字数未満になる事を妨げる物ではありません。また、入力必須項目を表す訳でもありません。入力必須とするならば、required属性も指定してください。


受信用の
ページへ

cols属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" cols="6">abcdef
  3. ABCDEF</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

cols属性は、このプレーンテキスト編集コントロールの外見上の幅です。属性値は 0 より大きい整数値のみ有効で、無効な値の場合は既定値が扱われます。既定値は 20 です。


受信用の
ページへ

rows属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" cols="6" rows="3">abcdef
  3. ABCDEF</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

rows属性は、表示する行数を指定します。属性値は 0 より大きい整数値のみ有効で、無効な値の場合は既定値が扱われます。既定値は 2 です。


受信用の
ページへ

wrap属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" wrap="hard" cols="6">abc
  3. ABC</textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

wrap属性は、テキストの折り返しの制御法を指定します。値は hard か soft のいづれかで、既定値 soft です。
hard は各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行 (CR+LF) を挿入します。cols属性を指定しなければなりません。
soft はブラウザーは値に含まれる改行 (CR+LF のペア) をすべて維持しますが、改行の付加は行いません。


受信用の
ページへ

placeholder属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" placeholder="プレースホルダー">
  3. </textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

placeholder属性は、コントロールに値がない場合のユーザーのデータ入力を支援するための短いヒント（単語または短いフレーズ）を表します。


受信用の
ページへ

dirname属性

  1. <form action="./fmreceive.htm">
  2. <textarea name="ntaTextarea" dirname="ntaDir">
  3. </textarea>
  4. <button name="nbtSender" value="./fmtextarea.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

dirname属性は、フォーム送信で要素の方向性を送信するために使用するフォームコントロールの名前を指定します。


受信用の
ページへ

気を付ける点

フォーム関連要素

フォーム関連要素であり送信が関わりますが、それぞれの処理のタイミングには注意が必要です。また複数行のコントロールなので、データ内の改行の制御コードの扱いも留意が必要です。

大きさの変更

  1. <textarea style="resize: none;">テキスト
  2. てきすと</textarea>

textarea要素は、大きさの変更が可能です。CSSの resizeプロパティで制御できます。

要素の大きさが変わる事により、後続の要素の配置や包括要素の大きさに影響がでることがあります。包括要素の幅, 高さを指定して影響を制限する事も検討するべきです。

CSSリセット

  1. textarea {
  2. font-family: inherit;
  3. font-size: 100%;
  4. line-height: 1.15;
  5. margin: 0;
  6. overflow: auto;
  7. }

normalize.css というリセットCSS の一部で、すべてのブラウザでフォントスタイルを変更します。 FirefoxおよびSafariでマージンを削除します。 IE 10以降のデフォルトの垂直スクロールバーを削除します。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、リセットCSSを利用する事をお勧めします。