textarea は「長文や複数行の文章を入れてもらうための入力欄」
<textarea> は、 「ユーザーに“複数行の文章”や“長めのテキスト”を入力してもらうための専用の入力欄」 です。
input type="text" が「1 行ぶんの短い文字列」向けなのに対して、 textarea は「改行を含む長文」を想定しています。
お問い合わせ内容 自己紹介文 コメント メモ 説明文
こういう「文章として書いてもらう」場面では、 input ではなく textarea が主役になります。
textarea の基本形と「inputとの違い」
いちばんシンプルな書き方
<textarea name="message"></textarea>
フォームに入れるとこうなります。
<form action="/contact" method="post">
<p>お問い合わせ内容：</p>
<textarea name="message"></textarea>
<button type="submit">送信</button>
</form>
ここでのポイントは、
textarea には type 属性がない タグの「開始」と「終了」の間に初期値を書ける 中で改行がそのまま扱われる
という点です。
input は「単体タグ（閉じタグなし）」で、 value 属性に初期値を書くのが基本でした。
textarea は「開始タグと終了タグの間にテキストを書く」スタイルです。
初期値と placeholder 的な使い方
初期値を入れておく
<textarea name="message">ここにお問い合わせ内容を入力してください。</textarea>
この場合、 ユーザーが編集する前から中に文字が入っています。
ただし、 「消してから書き始める必要がある」ので、 本当の意味での“ヒント”には向きません。
placeholder 的なヒントを出したいときの考え方
textarea には placeholder 属性も使えます。
<textarea
name="message"
placeholder="お問い合わせ内容をできるだけ詳しくご記入ください。"
></textarea>
これで、 入力前に薄いヒントテキストが表示され、 入力すると消えます。
input と同じ感覚で使えるので、 「ヒントは placeholder」「中身はユーザーの入力」 という分け方を意識すると分かりやすいです。
よくある textarea の使い方をフォームでイメージする
お問い合わせフォームの「内容」欄
<form action="/contact" method="post">
<p>お名前：</p>
<input type="text" name="username" required>
<p>メールアドレス：</p>
<input type="email" name="email" required>
<p>お問い合わせ内容：</p>
<textarea
name="message"
required
placeholder="お問い合わせ内容をできるだけ詳しくご記入ください。"
></textarea>
<button type="submit">送信</button>
</form>
ここで textarea が担っている役割は、
複数行の文章を入力してもらう 改行を含む長文でもそのまま送信できる
という 2 点です。
「お問い合わせ内容」を input type="text" にしてしまうと、 1 行しか書けず、ユーザーにとっても窮屈です。
「文章を書いてもらう欄」は、迷わず textarea を選ぶ。 これがフォーム設計の基本のひとつです。
rows・cols と CSS：サイズの決め方
rows と cols で「だいたいのサイズ」を指定する
<textarea
name="message"
rows="5"
cols="40"
></textarea>
rows は「何行ぶんの高さか」 cols は「何文字ぶんの幅か（ざっくり）」
を指定する属性です。
ただし、最近は CSS でサイズを決めることが多いです。
CSS で幅と高さを決める
<textarea
name="message"
id="message"
></textarea>
#message {
width: 100%;
height: 160px;
}
このように、 width と height でピクセル単位やパーセンテージで指定する方が レイアウト全体との整合性が取りやすいです。
「ざっくりなら rows/cols、きちんと整えるなら CSS」 という使い分けを覚えておくといいです。
JavaScript と textarea：値を読む・書く・チェックする
値を読む（ユーザーが書いた文章を取り出す）
HTML：
<textarea
id="message"
name="message"
placeholder="メモを入力してください。"
></textarea>
<button type="button" id="show">表示</button>
<p id="result"></p>
JavaScript：
const textarea = document.querySelector("#message");
const button = document.querySelector("#show");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
const value = textarea.value; // ← ここが超重要
result.textContent = `入力された内容：${value}`;
});
textarea.value が「今その textarea に入っている文章」です。 改行も含めて 1 つの文字列として取得できます。
値を書く（初期値や変更を JS から反映する）
textarea.value = "ここにテンプレート文を入れておきます。";
これで、 ユーザーが開いた瞬間にテンプレート文が入っている状態になります。
ユーザーの操作に応じて、 文章を自動生成して入れることもできます。
簡単なバリデーションを JS でやる
button.addEventListener("click", () => {
const value = textarea.value.trim();
if (value === "") {
result.textContent = "内容を入力してください。";
return;
}
if (value.length < 10) {
result.textContent = "内容は 10 文字以上にしてください。";
return;
}
result.textContent = `OK：${value}`;
});
ここでやっているのは、
空かどうか 文字数が足りているか
というチェックです。
textarea は「ユーザーの文章の入口」、 JavaScript は「その文章をどう扱うか」を決めるロジック という関係になります。
HTML側のバリデーション属性と組み合わせる
required で「必須入力」にする
<textarea
name="message"
required
></textarea>
空のまま送信しようとすると、 ブラウザが「このフィールドを入力してください」と止めてくれます。
minlength / maxlength で文字数を制限する
<textarea
name="message"
minlength="10"
maxlength="500"
></textarea>
最低 10 文字 最大 500 文字
というルールを HTML だけで表現できます。
お問い合わせ内容 レビューコメント 自己紹介文
など、「短すぎても困るし、長すぎても困る」文章には この制約が役立ちます。
textarea を使うか迷ったときの判断基準
「ここは“複数行の文章”を書いてもらう場所か？」
自分にこう聞いてみてください。
ここでユーザーに入力してもらいたいのは、 1 行の短い文字列ではなく「文章」か？ 改行を含んでも自然か？
YES → textarea NO → input type="text" など
お問い合わせ内容 コメント 自己紹介 説明文 メモ
こういったものは、 textarea にするのが自然です。
逆に、 名前・タイトル・検索キーワードなどは 1 行で十分なので input type="text" の方が向いています。
初心者として「textarea」で絶対に掴んでほしいこと
<textarea> は、 「フォームの中で、“複数行の文章や長文”を入力してもらうための専用の入力欄」 です。
input と違って type はなく、開始タグと終了タグの間にテキストを書ける name が送信時のキー名になる placeholder でヒントを出せる サイズは rows/cols か CSS で決める JavaScript では textarea.value で文章を読み書きできる required や minlength・maxlength で文字数の制約をかけられる
あなたが textarea を書くときに、 「この欄は“文章を書いてもらう場所”で、改行も含めた長文を扱う前提なんだよな？」 と意識できていたら、 もう textarea を“ただの大きい入力欄”ではなく、 “ユーザーの言葉をしっかり受け止めるためのインターフェース”として扱えている状態です。