目次に戻る

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

概要

カテゴリー

W3C : HTML5.3Reassociateable elementにも属していた。

W3C : HTML5.3Autocapitalize-inheriting element自体が存在してなかった。

配置できる場所
内容モデル
  • テキスト送信値デフォルトとなる。
属性
  • グローバル属性
  • name送信用名前文字列属性値isindexを指定してはならない。
  • autocompleteonoffその他デフォルトは、関連付けられているform要素の設定値、それがない場合は、onオートコンプリート機能の設定。
  • dirname送信値書字方向値をフォーム送信するときにセットとなる送信用名前文字列
  • disabledブーリアン属性。指定された入力コントロールは無効となる(入力できなくなり、送信値フォーム送信されない)。この状態は、スクリプトを用いないと解除できない。
  • form→同一HTML文書内にあるform要素id属性値。当該フォームに関連付ける。
  • maxlength入力値の最大データ容量を、非負整数の文字数で指定。
  • minlength入力値の最小データ容量を、非負整数の文字数で指定。
  • placeholder→当該入力コントロール入力値のヒントとなるテキスト。これはラベルの代わりに用いられるべきものではない。
  • readonlyブーリアン属性。指定されれば、当該入力コントロール入力はできなくなるが、送信値フォーム送信される。この状態は、スクリプトを用いないと解除できない。
  • requiredブーリアン属性。その項目の入力が必須の場合に指定。
  • cols→0を除く非負整数。一行あたりの期待最大文字数(基本的に半角英数換算の文字数)を指定。デフォルトは、20
  • rows→0を除く非負整数。表示する行数を指定。デフォルトは、2
  • wrap→値は下記のとおり。入力値が自動折り返しで表示されてる場合に、送信値に当該折り返しを改行文字として追加するか否かを指定。デフォルトsofthardを指定する場合は、cols属性が必須。
    • soft改行文字追加せず。
    • hard改行文字追加。
  • minlength属性値は、maxlength属性値以下でなければならない。
  • W3C : HTML5.3name属性値isindexを指定してはならないとはされてなかった。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、textboxデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
  • required属性が指定されてる場合は、aria-required属性値trueでなければならない。
  • disabled属性が指定されてる場合は、aria-disabled属性は指定すべきではない。
  • readonly属性が指定されてる場合は、aria-readonly属性は指定すべきではない。
  • 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;
  }

  textarea[dir=auto i] {unicode-bidi: plaintext;}
  
視覚系ブラウザにおいて期待されるレンダリング
  • 複数行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • cols属性値を表示幅のヒントとして用いる。
  • rows属性値を表示高のヒントとして用いる。
  • HTML構文においては、開始タグの直後にある冒頭の改行文字は取り除かれる。
制約検証
  • 原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
  • readonly属性があれば、制約検証の対象から除外。
  • required属性があれば、必須の入力がなされてるかどうかチェック。
  • maxlength属性があれば、入力値のデータ量が指定値をオーバーしてないかどうかチェック。
  • minlength属性があれば、入力値のデータ量が指定値を下回ってないかどうかチェック。
ユーザーエージェントに対する特記事項
  • 当該入力コントロールフォーカスが当たってなくて、かつ、当該入力コントロール送信値の場合は、placeholder属性値を提示すべきである。この扱いにおいては、autofocus属性フォーカスが当たってしまった場合も、フォーカスが当たってないものとみなす。
  • ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。
  • W3C : HTML5.3autocomplete属性に基づいてオートコンプリート機能を動作させる前に、当該入力コントロールが表示領域内に表示されていることを確認すべきであるとされていた。
HTML extension

属性に下記を追加。詳細は、HTML Form HTTP Extensionsを参照。

  • payload→値は下記のとおり。フォーム及び送信ボタンによる指定を無視して、当該要素送信値フォーム送信形式を指定する。
    • _actionURLの一部としてフォーム送信
    • _headerHTTP通信のヘッダデータとしてフォーム送信
    • _bodyHTTP通信の本体データとしてフォーム送信

Polyglot Markup仕様では、当該要素内容改行文字で始まるべきではない。

意味・用法

複数行プレーンテキスト入力コントロールを表す。

私見・補足

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

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

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

表示確認

ソース1

  <label>textarea例1<textarea>textareaだよ</textarea></label>
  
表示結果1
ソース2:disabled属性readonly属性の指定

  <label>textarea例2<textarea disabled="disabled">disabled</textarea></label>
  <label>textarea例3<textarea readonly="readonly">readonly</textarea></label>
  
表示結果2