4.4 テキストエリア

【ここで学ぶ内容】

  • テキストエリア
    <textarea name=”名前”></textarea>

4.4 テキストエリア

<textarea>タグは、複数行のテキスト入力を受け付けるフォームです。入力時に改行することもでき、長い文章を書いてもらうことも可能です。

図 4.4.1 テキストエリア

早速、テキストエリアを作っていきます。

1. ソースコードの記述

先ほど作成した[form.html]のソースコードを、以下のように修正してください。

①ソース・フォルダー :webpage/ch04
②ファイル名     :form.html

➢ form.html

<p>メッセージ:</p>
<textarea name="message" rows="5" cols="40"></textarea>

textareaタグはinputタグとは異なり、開始タグと終了タグのペアを使います。タグの間に記述された内容が初期値として使われます。データの名前を指定するname属性のほかに、入力エリアの行数、列数を示すrows属性とcols属性を指定することができます。

➢ form.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>フォームの作成</title>
    </head>
    <body>
        <form action="" method="POST">
            <p>名前:<input type="text" name="name"></p>
            <p>メッセージ:</p>
            <textarea name="message" rows="5" cols="40"></textarea>
        </form>
    </body>
</html>

2. ブラウザで確認

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。

図 4.4.2

複数行のテキストエリアが表示されます。