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
複数行のテキストエリアが表示されます。