textarea 要素

概要

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

使用可能な場所

属性

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

autocapitalize

これは iOS 版 Safari Mobile (および iOS 版 Firefox を含む、iOS の WebKit を使用するブラウザ) で使用する非標準属性であり、ユーザが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。非推奨とされていない値は、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 です。

DOM インターフェイス

この要素は HTMLTextAreaElement インターフェイスを提供します。

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>

仕様

ブラウザ実装状況

iOS の Safari Mobile は無効化した <textarea> 要素に、opacity: 0.4 をデフォルトスタイルに適用しています。他の主要ブラウザは現在、このデフォルトスタイルを共有していません。

Gecko に関する注記

Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) より、<textarea> にフォーカスを当てた際のデフォルトの挿入位置がテキストの末尾から先頭になりました。この変更は、Gecko の動作を他のブラウザに合わせるものです。

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

関連情報

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