HTMLのtextareaタグとは？複数行テキスト入力フィールドの作り方を徹底解説

HTMLの<textarea>タグは、フォーム内に複数行のテキスト入力欄を作成するために使用されるタグです。<textarea>タグで定義され、文字数の制限なくテキストを保持できます。

---

HTMLでフォームを作成する際、長いテキストを受け付けたいケースがあります。例えば、小売店のWebサイト向けにお問い合わせフォームを作る場合、顧客が直面している問題の詳細な説明を受け付けるフォーム要素が必要になるでしょう。

そんなときに役立つのが、HTMLの<textarea>タグです。<textarea>要素は、複数行のテキスト編集機能を備えたフォーム要素を作成するために使われます。ユーザーから長めのテキスト回答を受け取りたい場合に非常に便利な要素です。

このチュートリアルでは、具体的な例を挙げながら、HTMLの<textarea>タグの使い方を解説します。記事を読み終える頃には、プロのように<textarea>タグを使いこなせるようになっているはずです！

HTMLのtextareaタグの基本

<textarea>タグは、フォーム内に複数行のテキスト入力コントロールを定義するために使用されます。このタグは、無制限の文字数を保持できる点が特徴です。

<textarea>タグの基本構文は以下の通りです：

<textarea rows="10" cols="10">
プレースホルダーの内容
</textarea>

コードを分解して見ていきましょう。<textarea>タグは、Webフォーム内のテキストエリアボックスを定義します。<input>タグと異なり、<textarea>タグには開始タグ（<textarea>）と終了タグ（</textarea>）の両方が必須です。これは、テキストエリアにデフォルトで表示されるテキストが、この2つのタグの間に記述されるためです。

また、上記の例では次の2つの属性を指定しています：

• rows：テキストエリアのデフォルトの行数をブラウザに指示します。つまり、rows属性はテキストエリアの高さを指定します。
• cols：テキストエリアのデフォルトの列数を指定します。つまり、cols属性はテキストエリアの幅を指定します。

ここで、地域の衣料品店向けにWebフォームを作成するとしましょう。このフォームでは、顧客が購入に関するフィードバックを送信できるようにします。ユーザーが詳細なフィードバックを書けるよう十分なスペースを確保したいので、<textarea>要素を使用してフィードバックを収集します。

フィードバックフォームは、次のコードで作成できます：

<form>
	<label for="feedback">ご意見・ご感想をお聞かせください</label><br /><br />
	<textarea rows="5" cols="30" id="feedback" name="feedback">
	ここにフィードバックをご記入ください。
	</textarea>
</form>

このコードの表示結果：

コードを分解してみましょう。まず、Webフォームを定義する<form>タグを宣言しました。次に、<label>タグを使用して、「ご意見・ご感想をお聞かせください」というラベルをページに追加しています。

その後、<textarea>タグを使用してフィードバック入力欄を作成しました。指定した4つの属性は以下の通りです：

• rows：5に設定されており、フィールドの行数を指定します。
• cols：30に設定されており、フィールドの列数を指定します。
• id：フォームに割り当てられた一意の識別子で、フォーム送信時に使用されます。
• name：フォームを識別するためにも使用され、フォームをWebサーバーへ送信する場合に必須となります。

<textarea>タグは、すべての主要なブラウザでサポートされています。

上記の例は<textarea>タグの基本的な実装ですが、フォームをさらに高度にカスタマイズすることも可能です。

HTML textareaの実用的な活用例

続いて、より高度な2つの例を通して、<textarea>タグでテキストエリアを作成する方法を見ていきましょう。

最小文字数と最大文字数の設定

先ほどの衣料品店の例に戻りましょう。ユーザーに簡潔にフィードバックを書いてもらうため、送信できる文字数を1000文字に制限したいとします。さらに、何かしらの入力を必ずしてもらうため、最小文字数を10文字に設定します。

そこで登場するのがminlength属性とmaxlength属性です。minlengthはユーザーが入力すべき最小文字数を指定し、maxlengthはフォームに入力できる最大文字数を指定します。

先ほどのWebフォームにminlength属性とmaxlength属性を設定した例がこちらです：

<form>
	<textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000">
	ここにフィードバックをご記入ください。
	</textarea>
</form>

フォームの表示結果：

フォームの見た目に変化はありませんが、フォームを送信しようとした際、ユーザーが1000文字を超えて入力していると、フォームの内容は無効と判断されます。

注意すべき点として、ユーザーが10文字未満しか入力していなくても、テキストエリア自体は有効と判断されます。最小文字数の制限を厳密に強制したい場合は、required属性を併せて指定する必要があります。

プレースホルダーテキストの設定

先ほどのWebフォームでは、フォーム内に「ここにフィードバックをご記入ください。」というデフォルトテキストを指定しました。有用な情報ではありますが、ユーザーがこのテキストを回答に含めたくなければ、手動で削除する必要があり、やや不便です。

そこで便利なのが、placeholder属性です。この属性を指定すると、フォームが空のときだけプレースホルダーが表示され、ユーザーが入力を始めると自動的に消えます。

「ここにフィードバックをご記入ください。」というプレースホルダーテキストを持つ<textarea>の例がこちらです：

<textarea placeholder="ここにフィードバックをご記入ください。" rows="5" cols="30">
</textarea>

このコードの表示結果：

ご覧の通り、「ここにフィードバックをご記入ください。」というテキストがテキストボックスに表示されています。ユーザーが入力を始めると、このテキストは自動的に消えます。このテキストがプレースホルダーであることは、薄い灰色で表示されていることからも分かります。一方、最初の例のようなデフォルトテキストは、特別な指定がない限り黒色で表示されます。

HTML textareaの主な属性一覧

<textarea>タグは、多数のタグ固有の属性を受け入れます。さらに、HTMLのすべてのグローバル属性もサポートしています。

<textarea>タグがサポートする主なタグ固有の属性は以下の通りです：

属性	値	説明
autofocus	autofocus	ドキュメント読み込み時にテキストエリアへフォーカスを当てるかどうかを指定します。
cols	数値	テキストエリアにデフォルトで表示される列数（幅）を指定します。
disabled	boolean	テキストエリアへのユーザー入力を無効化します。
form	form ID	テキストエリアを特定のフォームに関連付けます。
maxlength	数値	テキストエリアが受け付ける最大文字数を指定します。
minlength	数値	テキストエリアが受け付ける最小文字数を指定します。
name	name	テキストエリアに名前を割り当てます。
placeholder	text	ユーザーが入力を始めると消えるプレースホルダーテキストを表示します。
readonly	boolean	ユーザーがテキストエリアの内容を変更できないことを示します。
required	boolean	フォームへの入力を必須とすることを示します。
rows	数値	テキストエリアにデフォルトで表示される行数（高さ）を指定します。

まとめ

HTMLの<textarea>タグは、複数行のテキスト入力要素を作成するために使用されます。ユーザーから長文のデータを収集したい場合に非常に便利なタグです。

このチュートリアルでは、具体例を交えながら、<textarea>タグでテキストエリアを作成する方法を解説しました。あわせて、タグ固有の属性をまとめたリファレンス表もご紹介しました。これであなたも、HTMLのエキスパートのように<textarea>タグを使いこなす準備が整いました！