MB-Support

パソコン初心者のサポートページ

3.複数行のテキスト入力フィールドの作成 textarea

 掲示板などで使われる複数行のテキスト入力フィールドを作成するには、textarea (テキストエリア) を記入します。


複数行のテキスト入力フィールドの作成 textarea を指定します( 1 行のテキスト入力フィールドは input でした)。掲示板ではコメント入力欄として使いますね。



・ソース

<p>コメント入力欄:</p>
<textarea name="A" cols="B" rows="C"></textarea>

・実際の表示


実際には <form></form> で囲む必要があるのでソースは以下の様になります。

<form method="" action="">
<p>コメント入力欄:</p>
<textarea name="A" cols="B" rows="C"></textarea>
</form>


name

name="A"
例 name="comment" name="entry"

フィールドの名前を半角英数字で指定します。この名前がデータを転送する時に重要で、form method でGETを指定した場合、アドレスのファイル名の後ろに付加されます。

<form method="GET" action="test.php" enctype="multipart/form-data">
 コメント入力欄: <input type="submit" value="投稿"><br />
<textarea name="comment" cols="40" rows="10"></textarea>
</form>

例えば上のソースでは、comment(コメント) と名前の付いた textarea フィールドを作成しています。 このフォームを使って入力した文字を転送した場合、右のスクリーンショットの様にファイル名の後ろに「?」 と、ここで name で指定した comment 、さらに = が付け足され、その後ろに textarea フィールドに入力した文字が表示されます。


さらに同じ form 内に複数の textarea フィールド がある場合は、ソースの上から順番に & で付け足されます。

<form method="GET" action="test.php" enctype="multipart/form-data">
 コメント入力欄: <input type="submit" value="投稿"><br />
<textarea name="comment_1" cols="40" rows="10"></textarea><br />
<textarea name="comment_2" cols="40" rows="10"></textarea>
</form>

上のソースを記述したファイルを、ブラウザからアクセスして、name comment_1 の textarea フィールドに「MB-Support」、name comment_2 に「homepage」と入力して転送した結果は以下になります。

http://localhost/test.php?comment_1=MB-Support&comment_2=homepage

method に POST を指定した場合はアドレスに表示されませんが、結局は POST にせよ GET にせよ、転送した先でデータを取り出す必要があります。 その時に フィールド に指定した name を使って、どのフィールドにどのデータが入力されたかを判断します。

PHPでGETで転送」されたデータを抽出した結果

$_GET[comment_1] は  MB-Support
$_GET[comment_2] は homepage

PHPでPOSTで転送」されたデータを抽出した結果

$_POST[comment_1] は  MB-Support
$_POST[comment_2] は homepage


cols ( 横幅 )

cols="B"
例 cols="40"

cols に指定するのは、フィールドの幅です。数字は半角文字数を表します。


・ソース

<form method="" action="">
コメント入力欄:
<textarea name="A" cols="40" rows="C"></textarea>
</form>

例えば cols に 40 を指定した場合。

・実際の表示

半角英数字が1行に40文字入力できるフィールドが表示されます。


追加

この解釈で良いのと思っていたのですが、後からブラウザにより幅が大きく異なるトラブルに遭遇しました。対処方法は次のページに掲載しています。

10.textarea の cols と rows がブラウザにより異なる表示する問題



rows ( 縦幅 )

rows="C"
例 rows="3"

rows には、フィールドに入力できる行数を指定します。

・ソース

<form method="" action="">
コメント入力欄:
<textarea name="A" cols="40" rows="3"></textarea>
</form>

例えば rows に 3 を指定した場合。

・実際の表示

cols で指定した文字数を 3行 入力できるフィールドが表示されます。 ただし、これはフィールドの高さを示す物で、転送可能な行数ではありません。 rows で指定した行数以上、入力する事も可能で、その場合はスクロールバーが作動します。


追加

縦幅に関しても、ブラウザにより幅が大きく異なるトラブルに遭遇しました。対処方法は次のページに掲載しています。

10.textarea の cols と rows がブラウザにより異なる表示する問題



あらがじめ文字を入力させておく方法

<textarea></textarea> の間に文字を入力しておくと、ページにアクセスした時に最初からテキストフィールドに文字が入力されます。

・ソース

<form method="" action="">
コメント入力欄:
<textarea name="A" cols="B" rows="C">
コメントを入力します_(._.)_
</textarea>
</form>

・実際の表示


もちろん、あらかじめ入力された文字をクライアントが削除して入力し直す事ができます。 掲示板ではスレッドに対してのレスを投稿する時に、スレッドの文章の先頭に「>」を付加して表示させると便利です。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項