textarea 要素

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

属性

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

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 です。

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>

仕様

ブラウザー実装状況

[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 より、現在のテキスト入力カーソルの位置の直後にある文字のオフセットを正しく返します。

	Desktop Browsers					Mobile Browsers
	Chrome for Desktop	Firefox for Desktop	Internet Explorer for Desktop	Opera for Desktop	Safari for Desktop	Android Browser	Firefox for Android	Internet Explorer Mobile	Opera Mobile	Safari for iOS
基本サポート	有り完全サポート	6.0完全サポート 補足 実装ノート 完全サポート6.0 補足 補足 A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none. 完全サポート1.0 補足 補足 Before Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when a <textarea> is focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.	有り完全サポート	有り完全サポート	有り完全サポート	有り完全サポート	6.0完全サポート 補足 実装ノート 完全サポート6.0 補足 補足 A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none. 完全サポート1.0 補足 補足 Before Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when a <textarea> is focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.	有り完全サポート	有り完全サポート	有り完全サポート 補足 実装ノート 完全サポート有り 補足 補足 Unlike other major browsers, a default style of {{cssxref("opacity")}}: 0.4 is applied to <textarea> elements.
autofocus attribute	有り完全サポート	4.0完全サポート	10.0完全サポート	有り完全サポート	有り完全サポート	?	4.0完全サポート	無しサポートなし	?	?
maxlength attribute	有り完全サポート	4.0完全サポート	10.0完全サポート	有り完全サポート	有り完全サポート	?	4.0完全サポート	無しサポートなし	?	?
placeholder attribute	有り完全サポート	4.0完全サポート	10.0完全サポート	11.50完全サポート	5.0完全サポート	?	4.0完全サポート	?	11.50完全サポート	4.0完全サポート

凡例

完全サポート 

完全サポート

サポートなし 

サポートなし

補足

実装ノートを見てください

関連情報

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