textarea 要素

4.10.11 textarea 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
リスト対象で、ラベル付け可能で、サブミット可能で、リセット可能で、再関連付け可能フォーム関連要素
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
テキスト
コンテント属性:
グローバル属性
autocomplete - - フォームのオートフィル機能のためのヒント
autofocus - ページがロードされた時に自動的にフォームコントロールにフォーカスを当てる
cols - 行ごとの最大文字数
dirname - フォームのサブミットでの要素の方向性を送信するために使うフォームのフィールド名
disabled - フォームコントロールを無効にするかどうか
form - form 要素にコントロールを関連付ける
inputmode - 入力モダリティを選択するためのヒント
maxlength - 値の最大長
minlength - 値の最短長
name - フォームのサブミットform.elements API で使うフォームコントロールの名前
placeholder - フォームコントロールの中に配置されるユーザーに見えるラベル
readonly - ユーザーが値を編集できるかどうか
required - フォームのサブミットでコントロールが必須かどうか
rows - 表示する行数
wrap - フォームコントロールの値がフォームのサブミットでどのように折り返されるか
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
textbox (デフォルト - 指定不要)
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLTextAreaElement : HTMLElement {
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute unsigned long cols;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute long maxLength;
           attribute long minLength;
           attribute DOMString name;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long rows;
           attribute DOMString wrap;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
  [TreatNullAs=EmptyString] attribute DOMString value;
  readonly attribute unsigned long textLength;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;
  void setRangeText(DOMString replacement);
  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

textarea 要素は、この要素の生データ値に対する複数行のプレーンテキスト編集コントロールを表します。 このコントロールのコンテンツは、そのコントロールのデフォルト値を表します。

textarea コントロールの生データ値は、 初期においては 空文字列でなければいけません。

この要素は双方向性アルゴリズムに関わるレンダリング要件を持ちます

readonly 属性は、論理属性です。ユーザーがそのテキストを編集できるかどうかを制御するために使います。

この例では、テキストフィールドが読み取り専用とマークされています。なぜなら、それは読み取り専用ファイルを表しているからです:

ファイル名: <code>/etc/bash.bashrc</code>
<textarea name="buffer" readonly>
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don't do anything
[ -z "$PS1" ] &amp;&amp; return

...</textarea>

制約バリデーション: readonly 属性が textarea 要素に指定されているなら、その要素は制約バリデーションから除外されます。

textarea 要素が無効でもなく readonly 属性も指定されていないなら、それはミュータブルであるといいます。

textareaミュータブルのとき、その生データ値は、ユーザーによって編集できるようにするべきです。ユーザーエージェントは、ユーザーがテキストを編集、挿入、削除できるようにし、"LF" (U+000A) 文字の形式で改行を挿入したり削除したりできるようにするべきです。ユーザーがこの要素の生データ値を変更したときは常に、ユーザーエージェントは、その textarea 要素で input という名前のバブリングするシンプルなイベントを発出するためのタスクをキューイングしなければいけません。ユーザーエージェントは、ユーザーが操作している間は適切な間隔をおいてから、そのタスクをキューイングすることができます。例えば、ユーザーエージェントは、キーが押されるたびではなく、ユーザーがキーを押してから 100ms だけ待ち、その間にユーザーが何もしなければイベントを発出するのです。

textarea 要素は汚染値フラグを持ちます。これは、初期においては false にセットされなければいけません。そして、ユーザーがこのコントロールを操作することで生データ値が変更されたら true にセットされなければいけません。

textarea 要素の textContent IDL 属性が値を変更するとき、この要素の汚染値フラグが false なら、この要素の生データ値は、この要素の textContent IDL 属性の値にセットされなければいけません。

textarea 要素に対するリセット・アルゴリズムは、この要素の値を、この要素の textContent IDL 属性の値にセットすることです。

この要素がミュータブルなら、ユーザーエージェントは、ユーザーがこの要素の書式方向を変更できるようにするべきです。左から右向きの書式方向、または、右から左向きの書式方向のいずれかです。ユーザーがそうしたなら、ユーザーエージェントは次の手順を実行しなければいけません:

  1. ユーザーが左から右向きの書式方向を選択したら、この要素の dir 属性を "ltr" にセットし、右から左向きの書式方向を選択したら、"rtl" にセットします。

  2. この textarea 要素で、input という名前のバブリングするシンプルなイベントを発出するタスクをキューイングします。

cols 属性は、行ごとの期待最大文字数を指定します。cols 属性が指定されたら、その値は 0 より大きい妥当な非負整数でなければいけません。この属性値に非負整数をパースする規則を適用した結果が 0 より大きい数字なら、この要素の文字幅はその値となります。そうでなければ 20 となります。

ユーザーエージェントは、textarea 要素の文字幅を、サーバーが求める行ごとの文字数がいくつなのかをユーザーに知らせるヒントとして使うことができます(ビジュアル・ユーザーエージェントでは、このコントロールの幅を、その文字数に合わせることができます)。ビジュアル・レンダリングでは、ユーザーエージェントは、レンダリングにおいては、ユーザーの入力を折り返して、それぞれの行がこの文字数より広くならないようにするべきです。

rows 属性は、表示する行数を指定します。rows 属性が指定されたら、その値は 0 より大きい妥当な非負整数でなければいけません。この属性値に非負整数をパースする規則を適用した結果が 0 より大きい数字なら、この要素の文字高はその値となります。そうでなければ 2 となります。

ビジュアル・ユーザーエージェントは、このコントロールの高さを、文字高によって指定された行数にセットするべきです。

wrap 属性は、2 つのキーワードと状態を持った列挙属性です。soft キーワードは Soft 状態に対応し、hard キーワードは Hard 状態に対応します。指定がなかった場合のデフォルトSoft 状態です。

Soft 状態とは、textarea の中のテキストがサブミット時に折り返されないことを意味します(レンダリングにおいては折り返されているかもしれません)。

Hard 状態とは、textarea の中のテキストがサブミット時にそのテキストが折り返されるようユーザーエージェントによって改行が追加されることを意味します。

この要素の wrap 属性が Hard 状態にあるなら、cols 属性が指定されていなければいけません。

歴史的な理由から、この要素の値は 3 つの異なる目的のために、3 つの異なる方法で正規化されます。生データ値は、当初からセットされていたときの値です。これは正規化されていません。API データ値は、value IDL 属性で使われる値です。これは正規化され、改行に "LF" (U+000A) 文字が使われます。最後に、フォームサブミッションのがあります。これは正規化され、改行に U+000D CARRIAGE RETURN "CRLF" (U+000A) 文字ペアが使われます。さらに、この要素の wrap 属性が指定されていれば、必要に応じて、指定の幅にテキストが折り返されるように、改行が追加で挿入されます。

この要素の API データ値は、この要素の生データ値に次の変換を適用したものと定義されます:

  1. 生データ値のすべての U+000D CARRIAGE RETURN "CRLF" (U+000A) 文字ペアを、ひとつの "LF" (U+000A) に置換します。

  2. 生データ値の残りすべての U+000D CARRIAGE RETURN 文字を、ひとつの "LF" (U+000A) に置換します。

この要素のは、この要素の生データ値に次の変換を適用したものと定義されます:

  1. "LF" (U+000A) 文字が後ろに来ない "CR" (U+000D) 文字、そして、"CR" (U+000D) 文字が前に来ない "LF" (U+000A) が見つかる都度に、それらを U+000D CARRIAGE RETURN "CRLF" (U+000A) 文字ペアからなる 2 文字の文字列で置換します。

  2. この要素の wrap 属性が Hard 状態にあるなら、UA 定義のアルゴリズムを使って、各行が文字幅の文字を超えないよう U+000D CARRIAGE RETURN "CRLF" (U+000A) 文字ペアを文字列に挿入します。この要件の目的においては、文字列の最初、文字列の最後、そして、U+000D CARRIAGE RETURN "CRLF" (U+000A) 文字ペアによって行が区切られます。

maxlength 属性は、textarea 要素の汚染値フラグによってコントロールされるフォームコントロール maxlength 属性です。

textarea 要素が最大許容データ長を持つなら、この要素の子は、この要素の textContent IDL 属性の値のコードユニット長が、この要素の最大許容データ長に等しいか小さい状態でなければいけません。

minlength 属性は、textarea 要素の汚染値フラグによってコントロールされるフォームコントロール minlength 属性です。

required 属性は論理属性です。指定されたら、ユーザーエージェントは、フォームをサブミットする前に、値の入力を求めるでしょう。

制約バリデーション: この要素に required 属性が指定され、この要素がミュータブルで、この要素のが空文字列なら、この要素は未入力に陥っています。

placeholder 属性は、コントロールに何も値がないときに、ユーザーがデータを入力する際の助けとなるような短いヒント(単語または短いフレーズ)を表します。ヒントは、入力例や、どんな形式で入力させたいかを簡単に説明したものとなるでしょう。

placeholder 属性は、label の代替として使うべきではありません。もっと長いヒントや別の助言を表すテキストなら、このコントロールの次にそのテキストを配置するべきです。

placeholder 属性を label の代わりに使うと、ある一定のユーザーに対して、アクセシビリティとユーザービリティを損なうことがあります。高齢のユーザーや、認識機能障害、運動障害、微細運動能力障害、視覚障害を持ったユーザーを含みます。このコントロールの label に与えられたヒントは常に表示されますが、placeholder 属性に与えられた短いヒントは、ユーザーが値を入力する前までしか表示されません。さらに、placeholder のテキストは事前に入力された値として誤解されやすくなります。そして、一般的な実装として、プレースホルダーのテキストのデフォルト色は、コントラストが不十分で、label が目に見える状態で分離されていないと、そのコントロールにフォーカスをセットするために有効なヒット領域のサイズが小さくなってしまいます。

ユーザーエージェントは、この要素のが空文字列で、このコントロールにフォーカスが当たっていないときに、ユーザーにそれを提供するべきです(例えば、空でフォーカスが当たっていないコントロールの中にそれを表示します)。そのヒントの中にある U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 文字ペアは、他のすべての "CR" (U+000D) and "LF" (U+000A) 文字と同様に、そのヒントをレンダリングする際には、改行として扱われなければいけません。

name 属性は要素の名前を表します。dirname 属性は、その要素の方向性がどのようにサブミットされるのかを制御します。disabled 属性は、コントロールを非インタラクティブにして、その値がサブミットされないようにするために使われます。form 属性は、textarea 要素をそのフォームオーナーと明示的に関連付けるために使われます。autofocus 属性はコントロールにフォーカスを当てます。autocomplete 属性は、ユーザーエージェントがオートフィルの挙動をどのように提供するのかを制御します。

textarea . type

文字列 "textarea" を返します。

textarea . value

この要素の現在の値を返します。

セットして値を変更することができます。

cols, placeholder, required, rows, wrap 属性は、それぞれ、同じ名前のコンテント属性を反映しなければいけません。colsrows 属性は、0 より大きい非負数のみに限定されます。cols 属性のデフォルト値は 20 です。rows 属性のデフォルト値は 2 です。dirName IDL 属性は、dirname コンテント属性を反映しなければいけません。maxLength IDL 属性は、maxlength コンテント属性を反映しなければいけません。ただし、非負数のみに限定されます。minLength IDL 属性は、minlength コンテント属性を反映しなければいけません。ただし、非負数のみに限定されます。readOnly IDL 属性は、readonly コンテント属性を反映しなければいけません。

type IDL 属性は "textarea" という値を返さなければいけません。

defaultValue IDL 属性は、この要素の textContent IDL 属性と同様に作用しなければいけません。

value 属性は、取得時には、この要素の API データ値を返さなければいけません。セット時には、この要素の生データ値を新たな値にセットし、この要素の汚染値フラグを true にセットしなければいけません。そして、選択中のテキストを未選択状態にし、選択方向を none にリセットして、テキストの入力カーソルの位置を、テキストフィールドの最後に移動するべきです。

textLength IDL 属性は、この要素の API データ値コードユニット長を返さなければいけません。

willValidate, validity, validationMessage IDL 属性、そして、checkValidity()setCustomValidity() メソッドは、制約バリデーション API の一部です。labels IDL 属性は、この要素の label のリストを提供します。select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), setSelectionRange() メソッドおよび IDL 属性は、この要素のテキストの選択範囲にアクセスすることができます。autofocus, disabled, form, name IDL 属性は、この要素の forms API の一部です。

これは、フォームで textarea を制限なしの自由記入のテキスト入力に使われている例です:

<p>コメントがあれば、ぜひ私達にお知らせください: <textarea cols=80 name=comments></textarea></p>

コメントの最大長を指定するために、maxlength 属性を使うことができます:

<p>短いコメントがあれば、ぜひ私達にお知らせください: <textarea cols=80 name=comments maxlength=200></textarea></p>

デフォルト値を与えるために、この要素の中にテキストを入れておくことができます:

<p>コメントがあれば、ぜひ私達にお知らせください: <textarea cols=80 name=comments>お前らは最高だぜ!</textarea></p>

最短長を指定することもできます。ここでは、ユーザーに文字を入力してもらう必要があります。ひな形(最短長より短い)が与えられていますが、フォームをサブミットするには不十分です:

<textarea required minlength="500">Dear Madam Speaker,

Regarding your letter dated ...

...

Yours Sincerely,

...</textarea>

プレースホルダーも与えることができます。これは、明示的なひな形を提供せずに、ユーザーに基本的な形式を示します:

<textarea placeholder="Dear Francine,

They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?

Love,
Daddy"></textarea>

値とともにこの要素の書式方向をブラウザーにサブミットさせるために、dirname 属性を指定することができます:

<p>コメントがあれば、ぜひ私達にお知らせください (コメントには英語かヘブライ語がご利用になれます):
<textarea cols=80 name=comments dirname=comments.dir></textarea></p>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-textarea-element