MB-Support

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

2.1行テキストの入力フィールドの作成 input

 気がるに利用できる1行テキストの入力フィールドを表示させるには、inputを記入します。


テキストを入力するフィールドを作成するには input type を指定します。


<input type="A" name="B" size="C">

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

<form method="" action="">
お名前:<input type="A" name="B" size="C">
</form>


type

type="A"
例 type="text" type="password"

type には通常「text」を指定しますが、「password」を指定すると、入力した文字が黒く隠されます。

<form method="" action="">
 パスワード:<input type="password" name="B" size="C">
</form>

入力している画面を覗かれてもパスワードは分かりませんが、実際に転送されるデータは暗号化されず、そのまま取り出す事ができてしまいます。



name

name="B"
例 name="name" name="title"

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

<form method="GET" action="test.php">
 <input type="text" name="word" size="30">
 <input type="submit" value="検索">
</form>


例えば上のソースでは、word と名前の付いた type text フィールドを作成しています。 このフォームを使って入力した文字を転送した場合、下の様にファイル名の後ろに ? と、ここで name で指定した word 、さらに = が付け足され、その後ろに type text フィールドに入力した文字が表示されます。


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

<form method="GET" action="test.php">
 <input type="text" name="word" size="30">
 <input type="text" name="type" size="30">
 <input type="submit" value="検索">
</form> 

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

http://localhost/test.php?word=MB-Support&type=homepage

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

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

$_GET[word] は  MB-Support
$_GET[type] は homepage

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

$_POST[word] は  MB-Support
$_POST[type] は homepage


size

size="C"
例 size="30"

size に指定する物は、フィールドの幅です。数字は文字数で表します。

<form method="GET" action="test.php">
 お名前:<input type="text" name="name" size="30">
</form> 

例えばsize に 30 を指定した場合。


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


追加

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

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



value

value="D"
例 value="ホームズ"

value を指定する事で、あらかじめテキストフィールドに文字を入力させておく事ができます。 これは、クライアントが入力するであろうと推測した言葉を指定したり、掲示板などの名前を入力するフィールドには Cookei を利用して、あらかじめ名前を入力させておく事が可能になります。

<form method="GET" action="test.php">
 お名前:<input type="text" name="name" size="30" value="ホームズ">
</form> 

例えばvalue に ホームズ を指定した場合。


value で指定した文字は、クライアントが書き換える事が可能で、絶対的なものではありません。




maxlength

maxlength="E"
例 maxlength="3"

maxlength を指定する事で、そのフィールドに入力できる文字数を制限する事ができます。

<form method="GET" action="test.php">
 お名前:<input type="text" name="name" size="30" maxlength="3">
</form> 

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



3 を指定すると、半角/全角 関係なく3文字しか入力できなくなります。 ただし、これは転送を制限するのではなく、POST の場合は無理ですが、GET の場合はアドレスに入力する事で転送可能になります。


つまり、セキュリティ的に文字数を制限したい場合は、受け取った側のプログラムで文字数を制限する必要があります。




戻る 一覧表示 次へ


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

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

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