<textarea>
<textarea> は HTML の要素で、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3 | |
| HTML 属性 | ||||||
| HTML の autocomplete 属性により、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、user agentがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。 | 66 | 79 | 59 | 9.1 | 66 | 9.3 |
cols | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| form は HTML の属性で、フォーム関連要素を、同じ文書内の form 要素に関連付けます。この属性は、button、fieldset、input、object、output、select、textarea の各要素に適用されます。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| maxlength 属性は、ユーザーが input または textarea に入力できる最大文字列長を（UTF-16 コード単位で）定義します。 0 以上の整数値である必要があります。 | 4 | 12 | 4 | 5 | 18 | 4.2 |
| minlength 属性は、ユーザーが input または textarea に入力できる最小文字列長を（UTF-16 コード単位で）定義します。この属性は 0 以上の整数値である必要があります。 | 40 | 17 | 51 | 10.1 | 40 | 10.3 |
name | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| placeholder 属性は、フォームコントロールに値が無いときにコントロールに表示するテキストを定義します。プレースホルダーテキストは、ユーザーにコントロールに入力するべきデータの種類に関する短いヒントを提供するべきです。 | 4 | 12 | 4 | 5 | 18 | 5 |
| readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| 論理属性の required 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
rows | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
wrap | 16 | 12 | 4 | 6 | 18 | 6 |
| DOM API | ||||||
| HTMLTextAreaElement インターフェイスは、 textarea 要素のレイアウトや表示を操作するためのプロパティやメソッドを提供します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| autocomplete は HTMLInputElement インターフェイスのプロパティで、ブラウザーによってコントロールの値が自動的に補完できるかどうかを示します。これは、 要素の autocomplete 属性を反映します。 | 66 | 79 | 59 | 9.1 | 66 | 9.3 |
| cols は HTMLTextAreaElement インターフェイスのプロパティで、複数行テキストコントロールの見える幅を、平均的な文字幅における文字数で表す正の整数です。これは 要素の cols 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| defaultValue は HTMLTextAreaElement インターフェイスのプロパティで、このテキストエリアの既定のテキストコンテンツを示します。この値を取得または設定することは、 textarea の Node.textContent を取得または設定するのと同じです。 | 1 | 12 | 1 | 1 | 18 | 1 |
| disabled は HTMLTextAreaElement インターフェイスのプロパティで、この複数行テキストコントロールが無効で操作できないかどうかを示します。これは textarea 要素の disabled 属性を反映します。 false の場合でも、それを格納する要素（例えば fieldset）が無効になっている場合に、このテキストエリアが、無効になる場合があります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| form は HTMLTextAreaElement インターフェイスの読み取り専用プロパティで、この textarea を所有する HTMLFormElement オブジェクトを返します。このテキストエリアがどのフォームにも所有されていない場合は null を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLTextAreaElement.labels は読み取り専用のプロパティで、この textArea 要素に関連付けられた label 要素の NodeList を返します。 | 6 | 18 | 56 | 5.1 | 18 | 5 |
| maxLength は HTMLTextAreaElement インターフェイスのプロパティで、この textarea 要素の値として入力が許可される最大文字数（UTF-16 コード単位）と、有効な値として許可される最大文字数を示します。これは、この要素の maxlength 属性を反映します。-1 は、値の長さに制限がないことを意味します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| minLength は HTMLTextAreaElement インターフェイスのプロパティで、この textarea 要素の値として必要な最小文字数（UTF-16 コード単位）を示します。これは、この要素の minlength 属性を反映します。-1 は、必要な最小文字数がないことを意味します。 | 40 | 17 | 51 | 10.1 | 40 | 10.3 |
| HTMLTextAreaElement インターフェイスの name プロパティは、textarea 要素の名前を表します。要素の name 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| placeholder は HTMLTextAreaElement インターフェイスのプロパティで、このコントロールに入力できる内容についてのヒントをユーザーに表示します。これは、textarea 要素の placeholder 属性を反映します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| readOnly は HTMLTextAreaElement インターフェイスのプロパティで、このコントロールの値をユーザーが変更できないことを示します。HTMLTextAreaElement.disabled 属性とは異なり、readonly 属性ではクリックやコントロール内の選択ができなくはなりません。これは、この textarea 要素の readonly 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| required は HTMLTextAreaElement インターフェイスのプロパティで、フォームを送信する前にユーザーが値を入力しなければならないことを指定します。これは、textarea 要素の required 属性を反映します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| rows は HTMLTextAreaElement インターフェイスのプロパティで、このテキストコントロールのテキストが見える行数を表す正の整数です。これは 要素の rows 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| select() は HTMLTextAreaElement インターフェイスのメソッドで、 textarea 要素の内容全体を選択します。さらに、 HTMLTextAreaElement.select_event イベントが発生します。 select() メソッドは引数を取らず、値を返しません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| select イベントは、テキストが選択されたときに発生します。 | 1 | 12 | 6 | 1 | 18 | 1 |
| selectionDirection は HTMLTextAreaElement インターフェイスのプロパティで、現在の選択の方向を示します。利用可能な値は "forward"、"backward"、"none" です。 forward の値は、現在のロケールの書字方向で選択が先頭から末尾の方向に行われたことを示し、 backward は逆方向を示します。 none の値は、方向が不明である場合に発生します。これは、 でテキストを選択した方向を取得および変更する際に使用することができます。 | 15 | 79 | 8 | 6 | 18 | 6 |
| selectionEnd は HTMLTextAreaElement インターフェイスのプロパティで、 textarea 要素内における現在のテキスト選択範囲の末尾の位置を指定します。これは、選択されたテキストの最後のインデックスを表す数値です。 の選択されたテキストの末尾のインデックスを取得したり、設定したりする際に使用することができます。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| selectionStart は HTMLTextAreaElement インターフェイスのプロパティで、 textarea 要素内における現在のテキスト選択範囲の先頭の位置を指定します。これは、選択されたテキストの最初のインデックスを表す数値です。 の選択されたテキストの最初のインデックスを取得したり、設定したりする際に使用することができます。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| setRangeText() は HTMLTextAreaElement インターフェイスのメソッドで、 textarea 要素内のテキストの範囲を、引数として渡した新しいテキストで置き換えます。 | 24 | 79 | 27 | 7 | 25 | 7 |
| setSelectionRange() は HTMLTextAreaElement インターフェイスのメソッドで、 textarea 要素における現在のテキスト選択の開始と終了の位置、およびオプションで方向を設定します。方向は、選択がどの方向に行われたかを示します。例えば、選択されたテキストの末尾から先頭に向かってユーザーがクリックしてドラッグしたことで選択が設定されたことを示します。さらに、 HTMLTextAreaElement.selectevent および HTMLTextAreaElement.selectionchangeevent イベントが発生します。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| textLength は HTMLTextAreaElement インターフェイスの読み取り専用プロパティで、 textarea 要素の値の文字数を UTF-16 コード単位で表す非負の整数です。これは、 HTMLTextAreaElement/value プロパティの値の String/length にアクセスするショートカットです。 | 4 | 17 | 1 | 5 | 18 | 4 |
| type は HTMLTextAreaElement の読み取り専用プロパティで、常に "textarea" を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| value は HTMLTextAreaElement インターフェイスのプロパティで、この textarea 要素の値を文字列で表します。ウィジェットに中身が含まれていない場合は、空文字列が返されます。このプロパティは、このコントロールに含まれる生の値を返したり設定したりします。 | 1 | 12 | 1 | 1 | 18 | 1 |
| wrap は HTMLTextAreaElement インターフェイスのプロパティで、コントロールがフォーム送信用の値をどのように折り返し表示するかを示します。これは 要素の wrap 属性を反映しています。 "hard" 値は、 HTMLTextAreaElement.cols 属性も設定されている場合にのみ効果があることに注意してください。 | 16 | 12 | 4 | 6 | 18 | 6 |
| その他 | ||||||
html.elements.textarea.placeholder.line_breaks プレースホルダ`の改行 | 36 | 12 | 59 | 16 | 36 | 16 |
html.elements.textarea.wrap.hard ハード値 | 16 | 12 | | | 18 | |
- Firefox 6以前では、`<textarea>`がフォーカスされると、デフォルトで挿入点はテキストの末尾に置かれました。他の主要なブラウザでは、挿入点はテキストの先頭に置かれます。
- すべての `<textarea>` 要素にはデフォルトの背景画像グラデーションが適用され、`background-image: none` で無効にすることができます。
- Firefox 89 より前のバージョンでは、`Document.execCommand()` コマンドを使って `<textarea>` 要素の内容を操作するには回避策が必要でした (バグ 1220696 を参照)。
- 他の主要なブラウザとは異なり、無効にされた `<textarea>` 要素には `opacity: 0.4` というデフォルトのスタイルが適用されます。
- Safari 17以前では、改行文字は1文字ではなく2文字としてカウントされていました。バグ 249916 を参照してください。
- iOS 17 の Safari 以前では、改行文字は 1 文字ではなく 2 文字としてカウントされていました。バグ 249916 を参照してください。
基本構文
<label for="comment">Comments:</label>
<textarea id="comment" name="comment"
rows="4" cols="50"
placeholder="コメントを入力...">
</textarea>ライブデモ
実務での使いどころ
-
<textarea> の活用
<textarea> は HTML の要素で、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。