HTMLのテキストエリアの使い方を完全ガイド！初心者でもわかるtextareaタグの基本
新人
「HTMLで自由に文章を入力できるような大きな入力欄って作れますか？」
先輩
「もちろん！それにはtextareaタグを使えばいいよ。複数行のテキスト入力ができるフォームパーツだよ。」
新人
「名前やメールアドレスのような短い入力じゃなくて、感想とかコメントを書くような長文を入力させたいときですね？」
先輩
「そうそう。じゃあ、HTMLのテキストエリアの基本と活用方法を説明していくね！」
1. テキストエリアとは
HTMLのtextareaタグは、複数行の文字を入力するための領域を作成するタグです。1行だけのinput type="text"と違い、複数行の自由入力ができるので、コメント欄や自己紹介欄、感想入力などによく使われます。
formタグと組み合わせて使うことで、ユーザーが入力した内容を送信することができます。
2. textareaタグの基本的な書き方
HTMLのtextareaタグは、開始タグと終了タグの間に初期表示したいテキストを記述できます。入力欄のサイズは、rows属性（高さ）とcols属性（幅）で調整できます。
<form action="/submit" method="post">
<label for="message">メッセージを入力してください：</label><br>
<textarea id="message" name="message" rows="5" cols="40"></textarea><br>
<input type="submit" value="送信">
</form>
このように、textareaタグは1つの独立した入力領域として動作します。送信すると、nameで指定したキーに対して、入力されたテキストがサーバーに送られます。
3. 初期値を設定する方法
textareaの中にあらかじめテキストを表示しておきたいときは、開始タグと終了タグの間にテキストを書きます。これはプレースホルダではなく、入力済みの状態になります。
<form>
<label for="intro">自己紹介：</label><br>
<textarea id="intro" name="intro" rows="4" cols="50">はじめまして。よろしくお願いします。</textarea>
</form>
このようにすることで、テキストエリアに初期表示される内容を設定できます。
4. プレースホルダーを使う方法
placeholder属性を使えば、入力欄に薄い文字でヒントを表示できます。実際にユーザーが入力を始めると、プレースホルダーは消えます。
<form>
<label for="comment">コメント：</label><br>
<textarea id="comment" name="comment" rows="4" cols="50" placeholder="ご自由にご記入ください"></textarea>
</form>
プレースホルダーはユーザーへのヒントとしてとても有効です。フォームの使いやすさがアップします。
5. テキストエリアのサイズをCSSで調整する
HTMLのrowsやcols属性でもサイズを調整できますが、より柔軟にデザインしたいときはCSSでスタイルを設定するのが便利です。
<style>
textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 16px;
}
</style>
<form>
<label for="feedback">ご意見・ご感想：</label><br>
<textarea id="feedback" name="feedback" placeholder="ここに入力してください"></textarea>
</form>
CSSでテキストエリアの幅や高さ、フォントサイズなどを細かく調整することで、使いやすくて見た目も美しいフォームを作成できます。
6. テキストエリアを無効化・読み取り専用にする方法
テキストエリアを一時的に無効にしたい場合はdisabled属性を使います。また、編集はできないけれど表示だけしたいときはreadonly属性を使います。
<form>
<label for="readonly">読み取り専用：</label><br>
<textarea id="readonly" name="readonly" readonly>この内容は編集できません。</textarea><br>
<label for="disabled">無効な欄：</label><br>
<textarea id="disabled" name="disabled" disabled>この入力欄は現在使用できません。</textarea>
</form>
状況に応じて編集不可や無効化を使い分けることで、ユーザーにわかりやすいフォームが作れます。
