textarea要素：HTML Living Standard各要素別メモ

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

テキスト。送信値のデフォルトとなる。

属性

グローバル属性
name→送信用名前文字列。属性値にisindexを指定してはならない。
autocomplete→on、off、その他。デフォルトは、所属フォームの設定値、それがない場合は、on。自動補完機能の設定。
dirname→送信値の書字方向値をフォーム送信するときにセットとなる送信用名前文字列。
disabled→ブーリアン属性。指定された入力コントロールは無効となる（入力できなくなり、送信値はフォーム送信されない）。この状態は、スクリプトを用いないと解除できない。
form→同一HTML文書内にあるform要素のid属性値。所属フォームを指定する。
maxlength→入力値の最大データ容量を、非負整数の文字数で指定。
minlength→入力値の最小データ容量を、非負整数の文字数で指定。
placeholder→当該入力コントロールの入力値のヒントとなるテキスト。これはラベルの代わりに用いられるべきものではない。
readonly→ブーリアン属性。指定されれば、当該入力コントロールは入力はできなくなるが、送信値はフォーム送信される。この状態は、スクリプトを用いないと解除できない。
required→ブーリアン属性。その項目の入力が必須の場合に指定。
cols→0を除く非負整数。一行あたりの期待最大文字数（基本的に半角英数換算の文字数）を指定。デフォルトは、20
rows→0を除く非負整数。表示する行数を指定。デフォルトは、2
wrap→値は下記のとおり。入力値が自動折り返しで表示されてる場合に、送信値に当該折り返しを改行文字として追加するか否かを指定。デフォルトはsoft。hardを指定する場合は、cols属性が必須。
- soft→改行文字追加せず。
- hard→改行文字追加。
minlength属性値は、maxlength属性値以下でなければならない。

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

デフォルトroleは、textbox。デフォルトroleをrole属性値に指定することは、推奨されない。
デフォルトrole以外のroleは、指定不可。
disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。
readonly属性が指定されている場合は、aria-readonly属性を指定すべきではない。
readonly属性が指定されている場合は、aria-readonly属性値にfalseを指定してはならない。
required属性が指定されている場合は、aria-required属性を指定すべきではない。
required属性が指定されている場合は、aria-required属性値にfalseを指定してはならない。
placeholder属性が指定されている場合は、aria-placeholder属性を指定してはならない。

視覚系ブラウザのデフォルトとして期待されるCSS


  textarea {
    letter-spacing: initial;
    word-spacing: initial;
    line-height: initial;
    text-transform: initial;
    text-indent: initial;
    text-shadow: initial;
    text-align: initial;
    white-space: pre-wrap;
    appearance: auto;
  }

  textarea[dir=auto i] {unicode-bidi: plaintext;}
  textarea:autofill {field-sizing: fixed !important;}

視覚系ブラウザにおいて期待されるレンダリング

複数行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
field-sizingプロパティの適用が期待される。
field-sizingプロパティの計算値がcontentの場合は、内容テキスト又はplaceholder属性値で示されるテキストの文字幅及び行数がデフォルトの推奨表示サイズとなる。
前項以外の場合は、下記による有効サイズが推奨表示サイズとなる。
- cols属性値（又はそのデフォルト値）が表示幅。
- rows属性値（又はそのデフォルト値）が表示高。
HTML構文においては、開始タグの直後にある冒頭の改行文字は取り除かれる。
その書字方向が当該要素のdirectionプロパティの状態と合致するような入力ユーザーインターフェースを提示する。

制約検証

原則として、制約検証の対象。
disabled属性があれば、制約検証の対象から除外。
readonly属性があれば、制約検証の対象から除外。
required属性があれば、必須の入力がなされてるかどうかチェック。
maxlength属性があれば、入力値のデータ量が指定値をオーバーしてないかどうかチェック。
minlength属性があれば、入力値のデータ量が指定値を下回ってないかどうかチェック。

ユーザーエージェントに対する特記事項

当該入力コントロールにフォーカスが当たってなくて、かつ、当該入力コントロールの送信値が空の場合は、placeholder属性値を提示すべきである。この扱いにおいては、autofocus属性でフォーカスが当たってしまった場合も、フォーカスが当たってないものとみなす。
ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。
maxlength属性に反する入力を妨げてもよい。

意味・用法: 複数行プレーンテキスト入力コントロールを表す。

アクセシビリティ関連

autocomplete属性値のその他は、ユーザーエージェントが入力目的を機械的に特定するためにも有用である（Techniques for WCAG 2.1 : H98）。

私見・補足

内容テキストの空白や改行（おおむね、要素間空白文字に該当）もそのまま表示される。

内容テキストの実体参照に該当する文字列は実体参照として解釈される。よって、「&」は、実体参照でエスケープする必要がある。

内容テキストの「<」などは、タグと解釈されずにそのまま表示される（ただし、textarea要素の終了タグに該当する文字列は終了タグと解釈されてしまうので、内容テキストには書けない）。これを利用して、pre要素の代用として、HTMLのソースの例示のマークアップにtextarea要素を使う者もいる（textarea要素の意味には合致してないので、誤用である）。

近年の一般的な視覚系ブラウザでは、複数行プレーンテキスト入力コントロールの右下隅をドラッグすることで大きさを変更できる場合が多い。

disabledやreadonlyの状態のときのレンダリングについては、HTML Living Standardには明記がないようなのだが、HTML4.01仕様のフォーム関連の規定では、ユーザーエージェントによるものとされていたので、それに基づいて実装しているブラウザが多いと思われる。

表示確認

ソース１


  <label>textarea例1<textarea>textareaだよ
    textareaだよ</textarea></label>

表示結果１

textarea例1

ソース２：disabled属性、readonly属性の指定


  <label>textarea例2<textarea disabled="disabled">disabled</textarea></label>
  <label>textarea例3<textarea readonly="readonly">readonly</textarea></label>

表示結果２

textarea例2 textarea例3

readonly