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>

ブラウザ表示

状況に応じて編集不可や無効化を使い分けることで、ユーザーにわかりやすいフォームが作れます。

7. maxlength属性で入力できる文字数を制限する

textareaタグでは、入力できる文字数を制限することもできます。その場合はmaxlength属性を使います。コメント欄やお問い合わせフォームなどで、文字数の上限を設定したいときによく利用されます。


<form>
    <label for="review">レビュー：</label><br>
    <textarea id="review" name="review" rows="5" cols="40" maxlength="200"
    placeholder="200文字以内で入力してください"></textarea>
</form>

ブラウザ表示

このようにmaxlengthを設定すると、指定した文字数以上は入力できなくなります。フォームの入力内容を適切な長さに保つことができます。

8. required属性で必須入力にする

ユーザーに必ず入力してもらいたい項目がある場合は、required属性を使います。この属性を付けると、テキストエリアが空の状態ではフォームを送信できなくなります。


<form>
    <label for="message">お問い合わせ内容：</label><br>
    <textarea id="message" name="message" rows="5" cols="40" required
    placeholder="お問い合わせ内容を入力してください"></textarea><br>

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

ブラウザ表示

このように必須入力を設定することで、ユーザーが重要な項目を入力し忘れるのを防ぐことができます。

9. labelタグと組み合わせて使いやすいフォームにする

textareaタグは、labelタグと組み合わせることで、より使いやすいフォームになります。ラベルをクリックしたときに入力欄が選択されるため、ユーザーにとって操作しやすくなります。


<form>
    <label for="opinion">ご意見：</label><br>
    <textarea id="opinion" name="opinion" rows="5" cols="50"
    placeholder="ご意見を入力してください"></textarea>
</form>

ブラウザ表示

このようにlabelと関連付けることで、フォームの操作性が向上し、ユーザーにとって使いやすい入力フォームを作ることができます。