textareaタグの使い方｜複数行の入力フォームを作る方法を初心者向けに解説

フォームで「お問い合わせ内容」や「自由記述」を入力してもらう場合に使うのが、textareaタグです。

inputタグとの違いは「複数行の入力ができる」点です。

この記事では、textareaタグの基本から実践的な使い方まで解説します。

textareaタグとは？

textareaタグは、複数行のテキストを入力するためのフォーム部品です。

<textarea></textarea>

入力例：

<label>お問い合わせ内容</label>
<textarea></textarea>

表示サイズを指定できます。

<textarea rows="5" cols="30"></textarea>

textareaでもplaceholderが使えます。

<textarea placeholder="お問い合わせ内容を入力してください"></textarea>

必須入力にすることも可能です。

<textarea required></textarea>

タグの中に書くと、初期表示されます。

<textarea>初期テキスト</textarea>

<form>
  <label>お問い合わせ内容</label>
  <textarea rows="5" placeholder="内容を入力してください" required></textarea>

  <input type="submit" value="送信">
</form>

実務ではcolsよりCSSを使うことが多いです。

<textarea class="form-textarea"></textarea>

.form-textarea {
  width: 100%;
  height: 150px;
}

textareaタグは、複数行の入力フォームを作るために欠かせない要素です。

重要ポイント：

textareaは「お問い合わせフォーム」でほぼ確実に使います。
inputとの違いをしっかり理解しておくと、実務レベルのフォームがすぐに作れるようになります。