<textarea>: テキストエリア要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<textarea>
は HTML の要素で、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。
試してみましょう
上記の例では <textarea>
の様々な機能を紹介しています。
id
属性により、アクセシビリティのために<textarea>
を<label>
要素に結びつけることができるname
属性により、フォームが送信されたときにデータポイントに関連付けられた名前を設定しているrows
属性とcols
属性により、<textarea>
が占める実際の大きさを指定することができます。ブラウザーの既定値が様々である可能性があるため、一貫性のためにこれらの値を設定することはよいことでしょう。- 既定のコンテンツが開始タグと終了タグの間に入っています。
<textarea>
はvalue
属性に対応していません。
<textarea>
要素は他にも、フォームの <input>
と共通の属性のいくつか、例えば autocapitalize
, autocomplete
, autofocus
, disabled
, placeholder
, readonly
, required
などを受け付けます。
属性
この要素にはグローバル属性があります。
autocapitalize
-
入力されたテキストを自動的に大文字にするかどうか、大文字にする場合はその方法を制御します。詳しい情報はグローバル属性
autocapitalize
のページを参照してください。 autocomplete
-
この属性は、コントロールの値をブラウザーが自動的に補完してよいかを示します。以下の値を指定できます。
off
: ユーザーはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、ドキュメントが独自の自動補完を提供します。ブラウザーは入力内容の自動補完を行いません。on
: ブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。
autocomplete
属性を<textarea>
要素に指定していない場合、ブラウザーは<textarea>
要素のフォームオーナーのautocomplete
属性の値を使用します。フォームオーナーは当該<textarea>
要素が子孫になっている<form>
要素か、textarea 要素のform
属性でid
を指定されている form 要素です。詳しくは、<form>
要素のautocomplete
属性をご覧ください。 autocorrect
Non-standard-
文字列で、ユーザーがこの
textarea
を編集しているときに、自動スペルチェックとテキスト置換(設定されている場合)の処理を有効にするかどうかを指定します。許可されている値は以下の通りです。 autofocus
-
この論理属性で、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。文書内でこの属性を指定することができる要素は、フォーム関連要素のうちのひとつだけです。
cols
-
平均的な文字幅による、テキストコントロールの外見上の幅です。この属性を指定する場合は、正の整数を与えなければなりません。指定されなかった場合の既定値は
20
です。 dirname
-
この属性は
<input>
要素のdirname
属性と同様に、要素の内容のテキストの書字方向を示すために使用します。 詳しくは、dirname
属性を参照してください。 disabled
-
この真偽値属性は、ユーザーがそのコントロールを利用できないことを示します。(もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば
<fieldset>
要素から継承します。もし親要素にdisabled
属性を持つものがなければ、そのコントロールは利用可能です。) form
-
<textarea>
要素が関連づけられた form 要素 (フォームオーナー) です。属性値は、同じドキュメント内の form 要素の id としなければなりません。この属性を指定しない場合は、<textarea>
要素を form 要素の子要素として配置しなければなりません。この属性により、<textarea>
要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。 maxlength
-
ユーザーが入力可能な文字 (UTF-16 コード単位) の最大数です。この属性を指定しない場合、ユーザーは無制限に文字を入力可能です。
minlength
-
ユーザーが入力しなければならない最小文字数 (UTF-16 コード単位) です。
name
-
コントロールの名前です。
placeholder
-
コントロールに何を入力できるかに関する、ユーザーへの助言です。プレースホルダーのテキスト内にあるキャリッジリターンやラインフィードは、ヒントを表示する際に改行として扱わなければなりません。
メモ: プレースホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた
<label>
要素の代わりとして使用しないでください。全体的な説明は、<input>
ラベルを参照してください。 readonly
-
これは論理属性で、ユーザーがコントロールの値を変更できないことを示します。
disabled
属性とは異なり、readonly
属性はユーザーがコントロールをクリックしたり選択することを妨げません。読み取り専用のコントロールの値は、フォームとともに送信可能です。 required
-
この属性は、フォームを送信する前に値を入力しなければならないことを示します。
rows
-
コントロールで見ることが可能なテキストの行数です。指定する場合は、正の整数でなければなりません。指定されなかった場合、既定値は 2 になります。
spellcheck
-
<textarea>
がブラウザーや OS に依存したスペルチェックを行うかどうかを指定します。以下の値が使用できます。true
: 要素でスペルや文法チェックを行う必要があることを示します。default
: 要素は既定の動作、おそらく親要素のspellcheck
値によって動作することを示します。false
: 要素でスペルチェックを行うべきではないことを示します。
wrap
-
フォームの送信において、どのように値を折り返すかを制御するかを示します。以下の値を指定可能です。
hard
: ブラウザーは自動的に改行 (CR+LF) を挿入し、各行がコントロールの幅より長くならないようにします。有効にするには、cols
属性を指定する必要があります。soft
: ブラウザーは、入力された値の改行がすべてCR+LF
のペアであることを保証しますが、値にそれ以外の改行が追加されることはありません。off
Non-standard :soft
に似ていますが外観をwhite-space: pre
に変更しますので、cols
を超えた部分は折り返されず、水平方向にスクロール可能になります。
この属性を指定しない場合の既定値は
soft
です。
CSS でのスタイル付け
<textarea>
は置換要素です。ラスター画像のように内在サイズを持っています。既定では、 display
の値は inline-block
です。ボックスモデル、フォント、カラースキームが、普通の CSS を使用して簡単に操作できるので、他のフォーム要素と比較して、スタイル付けは比較的容易です。
ウェブフォームへのスタイル設定に、 <textarea>
をスタイル付けするためのいくつかの有益なコツがあります。
ベースラインの不整合
HTML 仕様書では、 <textarea>
のベースラインがどこであるかを定義していません。よって、ブラウザーによりその位置は異なります。 Gecko では <textarea>
のベースラインを textarea の最初の行のベースラインに設定しています。他のブラウザーは、<textarea>
のボックスの下端に設定していることもあります。動作を予測できないため、 vertical-align
: baseline
を使用しないようにしてください。
テキストエリアの大きさの変更が可能かどうかの制御
多くのブラウザーでは、 <textarea>
は大きさの変更が可能です。右側の隅にドラッグのためのハンドルがあり、ページ内の要素の大きさを変更するための使用できることが分かるでしょう。これは CSS の resize
プロパティで制御されます。既定では大きさの変更が有効ですが、 resize
の値に none
を使用することで明示的に無効にすることができます。
textarea {
resize: none;
}
有効・無効な値のスタイル付け
例
基本的な例
次の例ではテキストエリアを表示させ、行と列の数を設定し、既定のコンテンツを表示させ、ユーザーが要素のサイズを幅 500px、高さ 130px 以上に変更できないように CSS スタイルを設定しています。
<textarea name="textarea" rows="5" cols="15">ここに何か書いてください</textarea>
textarea {
max-height: 130px;
max-width: 500px;
}
結果
"minlength" と "maxlength" を使用した例
この例は文字数の最小値と最大値を、それぞれ 10 と 20 に設定しています。見てみましょう。
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
ここに何か書いてください…
</textarea>
textarea {
max-height: 130px;
max-width: 500px;
}
結果
なお、minlength
は最小値を超えて入力された文字をユーザーが削除することを阻止しませんので、入力された値により <textarea>
が無効になることがあります。また、minlength
の値が (例えば 3 に) 設定されていた場合であっても、<textarea>
が空欄である場合は required
属性が設定されていない限り有効として扱われます。
"placeholder" の使用
この例はプレースホルダーを設定します。ボックスに入力を開始した時に消えることを確認して下さい。
<textarea
name="textarea"
rows="5"
cols="30"
placeholder="コメントのテキスト"></textarea>
textarea {
max-height: 130px;
max-width: 500px;
}
結果
メモ: プレースホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた <label>
要素の代わりとして使用しないでください。全体的な説明は、ラベルとプレースホルダーを参照してください。
無効と読み取り専用
この例では 2 つの <textarea>
を示しています。一方は readonly
であり、もう一方は disabled
です。
どちらも編集できませんが、 readonly
の要素はフォーカスを設定することができ、値がフォームで送信されます。
disabled
の要素は送信されず、フォーカスも設定できません。
<textarea name="textarea" rows="5" cols="30" readonly>
readonly のテキストエリアです。
</textarea>
<textarea name="textarea" rows="5" cols="30" disabled>
disabled のテキストエリアです。
</textarea>
textarea {
display: block;
resize: horizontal;
max-width: 500px;
}
結果
技術的概要
仕様書
Specification |
---|
HTML Standard # the-textarea-element |
ブラウザーの互換性
BCD tables only load in the browser