目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
  • テキスト送信値デフォルトとなる。
属性
  • グローバル属性
  • name送信用名前文字列属性値isindexを指定してはならない。
  • autocompleteonoffその他デフォルトは、所属フォームの設定値、それがない場合は、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属性値以下でなければならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、textboxデフォルトrolerole属性値に指定することは、推奨されない。
  • デフォルト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;}
  
視覚系ブラウザにおいて期待されるレンダリング
  • 複数行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • cols属性値を表示幅のヒントとして用いる。
  • rows属性値を表示高のヒントとして用いる。
  • HTML構文においては、開始タグの直後にある冒頭の改行文字は取り除かれる。
  • その書字方向が当該要素directionプロパティの状態と合致するような入力ユーザーインターフェースを提示する。
制約検証
  • 原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
  • readonly属性があれば、制約検証の対象から除外。
  • required属性があれば、必須の入力がなされてるかどうかチェック。
  • maxlength属性があれば、入力値のデータ量が指定値をオーバーしてないかどうかチェック。
  • minlength属性があれば、入力値のデータ量が指定値を下回ってないかどうかチェック。
ユーザーエージェントに対する特記事項
  • 当該入力コントロールフォーカスが当たってなくて、かつ、当該入力コントロール送信値の場合は、placeholder属性値を提示すべきである。この扱いにおいては、autofocus属性フォーカスが当たってしまった場合も、フォーカスが当たってないものとみなす。
  • ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。
  • maxlength属性に反する入力を妨げてもよい。
意味・用法

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

アクセシビリティ関連

私見・補足

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

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

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

表示確認

ソース1

  <label>textarea例1<textarea>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