<textarea> 複数行に渡るテキスト編集項目を作成する

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
親にできる要素 フレージング・コンテンツを受け入れる要素
子にできる要素 テキストのみ
対応ブラウザ caniuseで確認

<textarea>タグの説明

<textarea>は、送信フォームの中で複数行に渡るテキスト編集項目を配置したい場合に使用します。主に、ユーザーが書き込めるコメント欄や、お問い合わせフォームなどに利用されます。

フォームはウェブページからデータを送信する祭に役立ちます。これを使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する事が近道となります。

似たような使われ方をする要素に<input>があります。こちらは一行に収まるような短いテキストに向いています。

<textarea>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • CSSのdisplayは、既定値でinline-blockが適用されます。
  • 視覚的な効果として枠に囲われた入力項目を表示します。横幅の既定値はcols属性、高さの既定値はrows属性で指定されています。変更する場合は、各属性の値またはスタイルシートで調整します。
  • この要素で作られた項目は、ユーザー側で大きさを変更できます。この機能は、CSS(スタイルシート)で固定することが可能です。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<textarea>に指定できる主な属性

cols
テキストエリアの横幅を指定します。既定値は20です。ブラウザによって幅の基準が異なるため、正確な数値はCSS(スタイルシート)で指定して下さい。
rows
テキストエリアの行数を指定します。既定値は2です。
maxlength
ユーザーが入力可能な文字の最大数を指定できます。この属性を指定しなかった場合、ユーザーは無制限に文字を入力できます。この値はUTF-16の単位を基準とします。
minlength
ユーザーが入力しなければならない最小の文字数を定義します。この値はUTF-16の単位を基準とします。
name
テキストエリアの名前を定義します。
form
同じページに置かれた<form>id属性を参照する場合に指定します。この属性を使えば、フォームの外に置かれたテキストエリアも、データ送信時に連動します。
placeholder
テキストエリアの中に表示する助言や補足事項です。この内容はユーザーが入力を開始すると非表示となります。
disabled
テキストエリアをユーザー側で編集できないように操作不能にします。この属性が親要素の<fieldset>に指定されていた場合は効果が継承します。どのような操作も受け付けず、値は送信されません。これは論理属性です。
readonly
テキストエリアをユーザー側で編集できないように操作不能にします。disabled属性との違いは、ユーザーがコントロールをクリックしたり選択することを妨げません。この属性が与えられている値も、フォームによって送信可能です。これは論理属性です。
required
フォームを送信する前に値を入力しなければならない項目に指定します。
autofocus
ページを読み込んだ時に、あらかじめ入力項目にフォーカスするように指定します。これは論理属性です。
autocapitalize
ユーザーが入力したテキストを自動的に大文字に変換するか否か、またどのように変換するかを制御します。これはWebKitの規格でHTMLの標準ではありません。
  • none:自動大文字化機能を無効にします。
  • sentences:文の先頭文字を自動的に大文字化します。
  • words:単語の先頭文字を自動的に大文字化します。
  • characters:すべての文字を自動的に大文字化します。
  • on:非推奨の値に変更されました。
  • off:非推奨の値に変更されました。
autocomplete
ユーザーエージェント側で自動補完を提供するかどうかを指定します。
  • on:ユーザーが以前入力した値を元に、自動補完を行うことを許可します。
  • off:自動補完を行いません。ユーザーはフォームを使用するたびに内容を入力しなければなりません。
spellcheck
ユーザーエージェント側でスペルチェックを行うかどうかを指定します。
  • true:スペルや文法のチェックを行うように要請します。
  • false:スペルや文法のチェックを行わないように要請します。
  • default:親要素から継承した値、または既定の動作を要請します。
warp
テキストの折り返しに関する制御方法を指定します。
  • hard:行の長さがテキストエリアの幅を超えた場合、ブラウザが自動的に改行を行います。これにはcols属性が必須となります。
  • soft:入力値に含まれる改行を維持しますが、ブラウザ側では改行を追加しません。
  • off:折返しを行いません。入力値が横幅を超えた場合、水平方向にスクロール可能とします。

<textarea>の使い方とサンプル

ユーザーが入力可能なテキストエリアのサンプルです。最も基本的な記述は以下のようなものになります。

HTML
<form action="#####" method="post">
	<textarea
		name="comment"
		rows="4"
		cols="30"
	>書き込み可能な項目です。</textarea><br>
	<input type="submit" value="送信">
	<input type="reset" value="消去">
</form>
表示確認

ユーザーが入力可能な文字数の制限を設定してみましょう。下記のようにmaxlength属性で文字数の上限を指定しておくと、それを超える量のテキストを入力した場合に自動的に削除されます。一方、minlength属性の値を下回る文字数まで削っても、操作が阻害されることはありません。この判定は送信しようとした時に行われます。

HTML
<form action="#####" method="post">
	<textarea
		name="comment"
		rows="4"
		cols="30"
		minlength="10"
		maxlength="30"
	>最大値や最小値を超える文字を入力してみよう。</textarea><br>
	<input type="submit" value="送信">
	<input type="reset" value="消去">
</form>
表示確認

続いて編集を不可にした例を見てみましょう。disabled属性は、どのような操作も受け付けず、データは送信されません。readonly属性は、選択やコピーを受け入れ、データの送信も行われます。その違いを比較してみましょう。

HTML
<form action="#####" method="post">
	<textarea disabled
		name="comment"
		rows="4" cols="30"
		minlength="10" maxlength="30"
	>disabledのテストです。</textarea><br>
	<input type="submit" value="送信">
	<input type="reset" value="消去">
</form>

<br>

<form action="#####" method="post">
	<textarea readonly
		name="comment"
		rows="4" cols="30"
		minlength="10" maxlength="30"
	>readonlyのテストです。</textarea><br>
	<input type="submit" value="送信">
	<input type="reset" value="消去">
</form>
表示確認

上記のままでは、ユーザーが入力を開始する時に、既定のテキストが邪魔になります。これをplaceholder属性で置き換えてみましょう。ただし、意図的に初期値の内容を入れておきたい場合は、既存の手段も有用です。

HTML
<form action="#####" method="post">
	<textarea
		name="comment"
		rows="4" cols="30"
		minlength="10" maxlength="30"
		placeholder="プレースホルダは入力開始で消えます。"
	></textarea><br>
	<input type="submit" value="送信">
	<input type="reset" value="消去">
</form>
表示確認

多くのブラウザは、ユーザー側の操作によるテキストエリアのサイズ変更を受け付けます。これを固定し、サイズの変更を行えないようにするには、CSS(スタイルシート)resizeプロパティを使います。

HTML
<form action="#####" method="post">
	<textarea style="resize: none;"
		name="comment"
		rows="4" cols="30"
		minlength="10" maxlength="30"
		placeholder="サイズ変更を受け付けない項目。"
	>サイズ変更を受け付けない項目。</textarea><br>
	<input type="submit" value="送信">
	<input type="reset" value="消去">
</form>
表示確認

<textarea>に関連するHTMLタグ

入力・送信フォームに関連する要素
<form> フォームを作成する
<fieldset> フォームの入力項目をグループ化する
<legend> 入力項目のグループにキャプションを与える
<input> フォームを構成する部品を作成する
<label> 入力項目にキャプションを与えて関連付ける
<textarea> 複数行に渡るテキスト編集項目を作成する
<button> ボタンを設置する
<select> セレクトボックスを作成する
<option> セレクトボックスの選択肢を作成する
<optgroup> セレクトボックスの選択肢をグループ化する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する