textarea 要素

HTML <textarea> 要素は、複数行のプレーンテキスト編集コントロールを表します。

コンテンツカテゴリー フローコンテンツフレージングコンテンツインタラクティブコンテンツ、および リスト化ラベル付け可能リセット可能サブミット可能フォーム関連 要素
許可された内容 テキストのみ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フレージングコンテンツ を受け入れるすべての要素
許可された ARIA ロール なし
DOM インターフェイス HTMLTextAreaElement

属性

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

autocapitalize
これは iOS の WebKit (従って Safari、Firefox、Chrome を含む、iOS で動作するほぼすべてのブラウザー) で使用する非標準属性であり、ユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。非推奨とされていない値は、iOS 5 以降で使用できます。以下の値を指定できます。
  • none: 自動大文字化機能を無効にします。
  • sentences: 文の先頭文字を自動的に大文字化します。
  • words: 単語の先頭文字を自動的に大文字化します。
  • characters: すべての文字を自動的に大文字化します。
  • on: iOS 5 から非推奨です。
  • off: iOS 5 から非推奨です。
autocomplete HTML5
この属性は、コントロールの値をブラウザーが自動的に補完してよいかを示します。以下の値を指定できます。
  • off: ユーザーはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、ドキュメントが独自の自動補完を提供します。ブラウザーは入力内容の自動補完を行いません。
  • on: ブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。

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

autofocus HTML5
この論理属性で、ユーザーが別のコントロールに入力するなどして変更しない限り、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。文書中のフォーム関連要素のうちのひとつだけに、この属性を指定することができます。値は、属性名と同じ autofocus のみ指定可能です。
cols
平均的な文字幅による、テキストコントロールの外見上の幅です。この属性を指定する場合は、正の整数を与えなければなりません。指定しない場合のデフォルト値は 20 です (HTML5)。
disabled
この真偽値属性は、ユーザーがそのコントロールを利用できないことを示します。(もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば fieldset 要素から継承します。もし親要素に disabled 属性を持つものがなければ、そのコントロールは利用可能です。)
form HTML5
<textarea> 要素が関連づけられた form 要素 (フォームオーナー) です。属性値は、同じドキュメント内の form 要素の id としなければなりません。この属性を指定しない場合は、<textarea> 要素を form 要素の子要素として配置しなければなりません。この属性により、<textarea> 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。
maxlength HTML5
ユーザーが入力可能な文字 (Unicode コードポイント) の最大数です。この属性を指定しない場合、ユーザーは無制限に文字を入力可能です。
minlength HTML5
ユーザーが入力しなければならない最小文字数 (Unicode コードポイント) です。
name
コントロールの名前です。
placeholder HTML5
コントロールに何を入力できるかに関する、ユーザーへの助言です。プレースホルダーのテキスト内にあるキャリッジリターンやラインフィードは、表示する際に改行として扱わなければなりません。
readonly
この論理属性は、ユーザーがコントロールの値を変更できないことを示します。disabled 属性とは異なり、readonly 属性はユーザーがコントロールをクリックしたり選択することを妨げません。読み取り専用のコントロールの値は、フォームとともに送信可能です。
required HTML5
この属性は、フォームを送信する前に値を入力しなければならないことを示します。
rows
コントロールで見ることが可能なテキストの行数です。
selectionDirection HTML5
選択されるときの方向を示します。LTR ロケールにおいて左から右へ、RTL ロケールにおいて右から左へ選択する場合は "forward"、逆方向に選択する場合は "backward" です。選択方向が不明である場合は "none" を指定できます。
selectionEnd
現在選択している領域の、最後の文字のインデックスです。未選択状態ではこの値は、テキスト入力カーソルの位置の直後にある文字のインデックスを表します。
selectionStart
現在選択している領域の、最初の文字のインデックスです。未選択状態ではこの値は、テキスト入力カーソルの位置の直後にある文字のインデックスを表します。
spellcheck HTML5
この属性の値を true に設定すると、その要素はスペルや文法のチェックが必要であることを示します。値 default は要素がデフォルトの動作に従うことを示し、おそらく親要素の spellcheck の値に基づきます。値 false はチェックが不要であることを示します。
wrap HTML5
テキストの折り返しの制御法を示します。以下の値を指定可能です。
  • hard : 各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行 (CR+LF) を挿入します。cols 属性を指定しなければなりません。
  • soft : ブラウザーは値に含まれる改行 (CR+LF のペア) をすべて維持しますが、改行の付加は行いません。

この属性を指定しない場合のデフォルト値は soft です。

リサイズ可能な textarea

Gecko 2.0 が必要(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

Gecko 2.0 で、リサイズ可能な textarea をサポートしました。これは CSS の resize プロパティで制御できます。textarea のリサイズはデフォルトで有効ですが、以下の CSS を含めることにより明示的に無効化できます:

textarea {
  resize: none;
}

CSS との関係

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

textarea はラスター画像と同様に、固有の寸法を持ちます。

HTML コンテンツ

<textarea name="textarea"
   rows="10" cols="50">Write something here</textarea>

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
<textarea> の定義
現行の標準  
HTML5
<textarea> の定義
勧告  
HTML 4.01 Specification
<textarea> の定義
勧告  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko)[4] Internet Explorer Opera Safari
基本サポート (有) (有) 1.0 (1.7 or earlier)[2]
6.0 (6.0)[3]
(有) (有) (有)
autocomplete 属性 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート
autofocus 属性 (有) (有) 4.0 (2.0) 10 (有) (有)
maxlength 属性 (有) (有) 4.0 (2.0) 10 (有) (有)
placeholder 属性 (有) (有) 4.0 (2.0) 10 11.50 5.0
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.0)[2]
6.0 (6.0)[3]
(有) (有) (有) [1]
autofocus 属性 ? 未サポート 4.0 (2.0) 未サポート ? ?
autocomplete 属性 未サポート (有) 未サポート 未サポート 未サポート 未サポート
maxlength 属性 ? (有) 4.0 (2.0) 未サポート ? ?
placeholder 属性 ? (有) 4.0 (2.0) ? 11.50 4.0

[1] ほかの主要ブラウザーとは異なり、無効化した <textarea> 要素で opacity: 0.4 をデフォルトスタイルに適用しています。

[2] Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) より前のバージョンでは、<textarea> にフォーカスを当てた際のデフォルトの挿入位置がテキストの末尾でした。ほかの主要ブラウザーは、挿入位置がテキストの先頭です。

[3] デフォルトですべての <textarea> 要素に、background-image でグラデーションを適用しています。これは background-image: none を使用して無効化できます。

[4] Firefox 51 より前のバージョンでは、HTMLTextAreaElement.selectionStart および HTMLTextAreaElement.selectionEnd の両方で値 0 を返していました。Firefox 51 より、現在のテキスト入力カーソルの位置の直後にある文字のオフセットを正しく返します。

関連情報

他のフォーム関連要素: <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <input>, <keygen>, <fieldset>, <output>, <progress>, <meter>

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,