<textarea>

HTML の <textarea> 要素は、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

上記の例では <textarea> の様々な機能を紹介しています。

• id 属性により、アクセシビリティのために <textarea> を <label> 要素に結びつけることができる
• name 属性により、フォームが送信されたときにデータポイントに関連付けられた名前を設定している
• rows 属性と cols 属性により、 <textarea> が占める実際の大きさを指定することができます。ブラウザーの既定値が様々である可能性があるため、一貫性のためにこれらの値を設定することはよいことでしょう。
• 既定のコンテンツが開始タグと終了タグの間に入っています。 <textarea> は value 属性に対応していません。

<textarea> 要素は他にも、フォームの <input> と共通の属性のいくつか、例えば autocomplete, autofocus, disabled, placeholder, readonly, required などを受け付けます。

この要素はグローバル属性を持ちます。

autocapitalize

これは標準外の属性で、 iOS の WebKit (従って Safari、Firefox、Chrome を含む、iOS で動作するほぼすべてのブラウザー) が対応しており、ユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。非推奨とされていない値は、 iOS 5 以降で使用できます。以下の値を指定できます。

• none: 自動大文字化機能を無効にします。
• sentences: 文の先頭文字を自動的に大文字化します。
• words: 単語の先頭文字を自動的に大文字化します。
• characters: すべての文字を自動的に大文字化します。
• on: iOS 5 から非推奨です。
• off: iOS 5 から非推奨です。

autocomplete

この属性は、コントロールの値をブラウザーが自動的に補完してよいかを示します。以下の値を指定できます。

• off: ユーザーはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、ドキュメントが独自の自動補完を提供します。ブラウザーは入力内容の自動補完を行いません。
• on: ブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。

<textarea> 要素で autocomplete 属性を指定していない場合は、ブラウザーは <textarea> 要素のフォームオーナーの autocomplete 属性の値を使用します。フォームオーナーは当該 <textarea> 要素が子孫になっている <form> 要素か、textarea 要素の form 属性で id を指定されている form 要素です。詳しくは、<form> 要素の autocomplete 属性をご覧ください。

autofocus

この論理属性で、ユーザーが別のコントロールに入力するなどして変更しない限り、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。文書中のフォーム関連要素のうちのひとつだけに、この属性を指定することができます。値は、属性名と同じ autofocus のみ指定可能です。

cols

平均的な文字幅による、テキストコントロールの外見上の幅です。この属性を指定する場合は、正の整数を与えなければなりません。指定しない場合のデフォルト値は 20 です (HTML5)。

disabled

この真偽値属性は、ユーザーがそのコントロールを利用できないことを示します。(もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば fieldset 要素から継承します。もし親要素に disabled 属性を持つものがなければ、そのコントロールは利用可能です。)

form

<textarea> 要素が関連づけられた form 要素 (フォームオーナー) です。属性値は、同じドキュメント内の form 要素の id としなければなりません。この属性を指定しない場合は、<textarea> 要素を form 要素の子要素として配置しなければなりません。この属性により、<textarea> 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。

maxlength

ユーザーが入力可能な文字 (UTF-16 コード単位) の最大数です。この属性を指定しない場合、ユーザーは無制限に文字を入力可能です。

minlength

ユーザーが入力しなければならない最小文字数 (UTF-16 コード単位) です。

name

コントロールの名前です。

placeholder

コントロールに何を入力できるかに関する、ユーザーへの助言です。プレイスホルダーのテキスト内にあるキャリッジリターンやラインフィードは、ヒントを表示する際に改行として扱わなければなりません。

注: プレイスホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた <label> 要素の代わりとして使用しないでください。全体的な説明は、ラベルとプレイスホルダー in <input>: 入力欄 (フォーム入力) 要素を参照してください。

readonly

この論理属性は、ユーザーがコントロールの値を変更できないことを示します。disabled 属性とは異なり、readonly 属性はユーザーがコントロールをクリックしたり選択することを妨げません。読み取り専用のコントロールの値は、フォームとともに送信可能です。

required

この属性は、フォームを送信する前に値を入力しなければならないことを示します。

rows

コントロールで見ることが可能なテキストの行数です。

spellcheck

<textarea> がブラウザーや OS に依存したスペルチェックを行うかどうかを指定します。以下の値が使用できます。

• true: 要素でスペルや文法チェックを行う必要があることを示します。
• default : 要素は既定の動作、おそらく親要素の spellcheck 値によって動作することを示します。
• false : 要素でスペルチェックを行うべきではないことを示します。

wrap

テキストの折り返しの制御法を示します。以下の値を指定可能です。

• hard : 各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行 (CR+LF) を挿入します。cols 属性を指定しなければなりません。
• soft : ブラウザーは値に含まれる改行 (CR+LF のペア) をすべて維持しますが、改行の付加は行いません。
• off : soft に似ていますが外観を white-space: pre に変更しますので、cols を超えた部分は折り返されず、水平方向にスクロール可能になります。

この属性を指定しない場合の既定値は soft です。

<textarea> は置換要素です。 — ラスタ画像のように固有の寸法を持ちます。既定では、 display の値は block です。ボックスモデル、フォント、カラースキーム等のスタイル付けが普通の CSS を使用して操作しやすいので、他のフォーム要素と比較して、スタイル付けは比較的容易です。

HTML フォームへのスタイル設定に、 <textarea> にスタイル付けするためのいくつかの有益なコツがあります。

HTML 仕様書では、 <textarea> のベースラインがどこであるかを定義していません。よって、ブラウザーによりその位置は異なります。 Gecko では <textarea> のベースラインを textarea の最初の行のベースラインに設定しています。他のブラウザーは、<textarea> のボックスの下端に設定していることもあります。動作を予測できないため、textarea で vertical-align: baseline を使用しないようにしてください。

多くのブラウザーでは、 <textarea> は大きさの変更が可能です。 — 右端の隅にドラッグのためのハンドルがあり、ページ内の要素の大きさを変更するための使用できることが分かるでしょう。これは CSS の resize プロパティで制御されます。 — 既定では大きさの変更が有効ですが、 resize の値に none を使用することで明示的に無効にすることができます。

textarea {
  resize: none;
}

:valid 及び :invalid 擬似クラスを使用すると、 <textarea> で有効又は無効な値 (例えば minlength と maxlength の範囲の中に収まっているか外れているか、又は required) を強調表示できます。例えば以下のように、中の値が有効か無効かでテキストエリアの境界を異なる表示にすることができます。

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
   border: 2px solid lime;
}

以下の例は、行数と列数と既定の内容だけを設定した、とても単純なテキストエリアを表示します。

<textarea name="textarea"
   rows="10" cols="50">ここに何か書いてください</textarea>

この例は文字数の最小・最大値を、それぞれ 10 と 20 に設定しています。見てみましょう。

<textarea name="textarea"
   rows="5" cols="30"
   minlength="10" maxlength="20">ここに何か書いてください</textarea>

なお、 minlength は最小値を越えて入力された文字をユーザーが削除することを阻止しませんので、入力された値により <textarea> が無効になることがあります。また、 minlength の値が (例えば 3 に) 設定されていた場合であっても、 <textarea> が空欄である場合は required 属性が設定されていない限り有効として扱われます。

この例はプレイスホルダーを設定します。ボックスに入力を開始した時に消えることを確認して下さい。

<textarea name="textarea"
   rows="5" cols="30"
   placeholder="コメントの文字列"></textarea>

この例は二つの <textarea> を示しています。 — 一つは disabled であり、もう一方は readonly です。両方を試してみて動作の違いを確認してください。 — disabled の要素はどのような方法でも選択できず (値の送信もされません)、 readonly の要素は選択可能で内容をコピーできます (そして値は送信されます)。内容が編集できないだけです。

<textarea name="textarea"
   rows="5" cols="30"
   disabled>I am a disabled textarea</textarea>
<textarea name="textarea"
   rows="5" cols="30"
   readonly>I am a readonly textarea</textarea>

他のフォーム関連要素:

• <form>
• <button>
• <datalist>
• <legend>
• <label>
• <select>
• <optgroup>
• <option>
• <input>
• <keygen>
• <fieldset>
• <output>
• <progress>
• <meter>