---

<input>タグ

<input>タグは、<form>の中で簡単な入力エリアを作成する場合に用いられます。このタグは、<img>タグのように開始タグ、終了タグはありません。

	<input>タグは、type属性によって、次の８つのタイプの入力形式が指定でき、いずれかを指定しなければなりません。
"text"： テキスト入力を行うテキストフィールドを作ります。type属性を指定しなければテキストフィールドとなります。 "password"： テキスト入力を行なうテキストフィールドですが、文字を入力するとアスタリスクが表示され、打った内容が隠されます。パスワードの入力フィールドに用いられます。 "checkbox"： トグルボタンで複数の項目の選択を行います。 "radio"： トグルボタンで１つの項目の選択を行います。 "image"： 画像の座標入力を行います。 "hidden"： ブラウザ(閲覧ソフト)側に表示されないフィールドを作ります。このフィールドは表示されませんが、サーバ側にデータが渡されます。このフィールドはあるデータをCGIスクリプトの引数として渡したい場合に用います。そのため、hidden形式のフィールドにはデータ値を含んでいなければなりません。 "submit"： ボタンが作成され、それをクリックすると<form>タグのactionで指定されたCGUスクリプトへデータを渡します。 "reset"： ボタンが作成され、それをクリックすると<form>タグ内の入力フィールドすべてをデフォルト値にリセットします。
	nameは入力フィールドのシンボリック名で、この名前は表示されませんが、データの名前として使用します。これはsubmitとreset以外のすべてのタイプで必要となります。
	valueはtextまたはpasswordフィールド内にあらかじめ文字を挿入しておく場合に用いられます。checkboxやradioボタンの場合、選択された時の値を指定します。submit、resetボタンではボタンの名前になります。
	checkedはcheckboxやradioといった選択フォームで、あらかじめボタンを選択してある状態に指定します。
	size は入力フィールドの物理的な長さを文字(行)数で指定します。これはtextまたはpasswordエントリにのみ用いられ、指定しない場合のデフォルト(初期設定)値は20です。複数行にわたる場合、size=幅,高さのように指定します。(例: size=60,12)
	maxlengthは入力で許される最大文字数を指定します。これはtextまたはpasswordエントリにのみ用いられ、フィールドが１行の場合に用いられます。指定しない場合、制限はなくなります。

基本フォーム(テキストフォームと実行、リセットボタン)

テキストフィールドはデフォルトで20文字が表示可能なサイズで作られます。以前はブラウザによってボタン名へ日本語を表示できない場合もありましたが、最近はほとんど問題ありません。maxlengthの指定がない限り、テキストフィールドには表示できる文字数以上を入力できます。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	テキストフィールド: <input name="entry"<<p>
	実行ボタン: <input type="submit" value=" 実　行 "<<p>
	リセットボタン: <input type="reset" value="リセット">
	
	</form>
	
	

テキストフィールド: 実行ボタン: リセットボタン:

テキストフィールドは<form>タグ内に複数個置くことができます。以下は３つのテキストフィールドを置いた場合の記述例です。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	住所: <input name="address"><p>
	氏名: <input name="name"><p>
	年齢: <input name="age"><p>
	実行ボタン: <input type="submit" value=" 実　行 "><p>
	リセットボタン: <input type="reset" value="リセット">
	
	</form>
	
	

住所: 氏名: 年齢: 実行ボタン: リセットボタン:

テキストフィールドの属性

<input>タグで作成するテキストフィールド長を変更する場合、size属性を使用します。また、入力文字数に制限を加えるにはmaxlength属性を使用します。maxlengthの値を越えて入力しようとするとビープ音が鳴り、入力は拒否されます。また、sizeと maxlength属性の両方を指定した場合、maxlength属性が優先されます。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	このテキストフィールドはデフォルトの２倍の長さがあり、40文字まで表示できます:<br>
	<input size=40 name="Entry1"><p> 
	このテキストフィールドは５文字の制限があり、それ以上入力しようとした場合はビープ音が鳴ります:<br>
	<input size=5 maxlength=5 name="Entry2"><p> 
        
        このボタンを押すと問い合わせを実行します:
        <input type="submit" value=" 実　行 "><p>
        このボタンを押すとフォームがリセットされます:
	<input type="reset" value="リセット">
        
        </form>
        
        

このテキストフィールドはデフォルトの２倍の長さがあり、40文字まで表示できます: このテキストフィールドは５文字の制限があり、それ以上入力しようとした場合はビープ音が鳴ります: このボタンを押すと問い合わせを実行します: このボタンを押すとフォームがリセットされます:

チェックボックス

チェックボックスはトグルボタンで複数の項目から選択する場合に用いられます。１つの<input>タグで１つのトグルボタンが作成されます。そして、選択されたボタンにvalue属性で値が与えられていればその値を、なければname=onがデータとしてサーバに送られます。複数選択される可能性があるので、nameは違う名前を指定するのが普通です。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	住所: <input name="address"><p>
	氏名: <input name="name"><p>
	電話番号: <input name="phone"><p>
	
	<ol>
	<li><input type="checkbox" name="Computer1" value="ibm"> IBM
	<li><input type="checkbox" name="Computer2" value="sony"> Vaio
	<li><input type="checkbox" name="Computer3" value="dell"> Dell
	<li><input type="checkbox" name="Computer4" value="dec"> DEC
	</ol>
	
	コンピュータの機種を選んだらこのボタンを押して下さい: <input type="submit" value="実行"><p>
	やり直す時はこのボタンを押して下さい: <input type="reset" value="リセット">
	
	</form>
	
	

住所: 氏名: 電話番号: IBM Vaio Dell DEC コンピュータの機種を選んだらこのボタンを押して下さい: やり直す時はこのボタンを押して下さい:

デフォルト値を含んだテキストフィールドとチェックボックス

あらかじめテキストフィールドへ値を入れておきたい時はvalue属性で指定します。また、あらかじめチェックボックスを選択した状態にするなら、その項目にchecked属性を指定します。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	説明入りのテキストフィールド:
	<input name="WithText" value="ここへ記入して下さい。"><p> 
	白紙のテキストフィールド:
	<input name="WithoutText"><p> 
	
	<ol>
	<li> <input type="checkbox" name="Selection1" value="first" checked>
	ここは選択状態です。
	<li> <input type="checkbox" name="Selection2" value="second">
	ここは未選択状態です。
	<li> <input type="checkbox" name="Selection3" value="third" checked>
	ここは選択状態です。
	</ol>
	
	このボタンを押すと問い合わせを実行します:
	<input type="submit" value=" 実　行 ">　　
	リセットボタン: <input type="reset" value="リセット">
	
	</form>
	
	

説明入りのテキストフィールド: 白紙のテキストフィールド: ここは選択状態です。 ここは未選択状態です。 ここは選択状態です。 選択の実行: 　　 やり直し:

パスワードフィールド

パスワードフィールドとは入力テキストを見られないようにするための属性で、入力した文字や数字がブラウザへは｢アスタリスク(*)｣で表示されます。type=passwordと指定し、テキストフィールド同様sizeやmaxsize属性なども指定が可能です

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	ユーザ名入力: <input name="username"><p>
	パスワード入力: <input type="password" name="password"><p>
	ログインはこのボタンを押して下さい:
	<input type="submit" value="ログインします">
	
	</form>
	
	

ユーザ名入力: パスワード入力: ログインはこのボタンを押して下さい:

パスワードフィールドの場合も value属性でデフォルト値を指定できます。ただし、表示はアスタリスクです。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	ユーザ名入力: <input name="username" value="お名前"><p>
	パスワード入力: <input type="password" name="password" value="パスワード"><p>
	ログインはこのボタンを押して下さい:
	<input type="submit" value="ログインします">
	
	</form>
	
	

ユーザ名入力: パスワード入力: ログインはこのボタンを押して下さい:

ラジオボタン

ラジオボタンは複数の項目から１つだけ選択させたい時に用います。この場合、選択項目のname属性値が統一されていなくてならないのでご注意ください。違う名前を指定すればチェックボックスと同じく単独指定にはなりません。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	<ol>
	<li><input type="radio" name="PayMethod" value="cash" checked> 現金
	<li><input type="radio" name="PayMethod" value="check"> 小切手
	<li><b>クレジットカード:</b>
	<ul>
	<li><input type="radio" name="PayMethod" value="mastercard">
		マスターカード
	<li><input type="radio" name="PayMethod" value="visa">
		VISA
	<li><input type="radio" name="PayMethod" value="amex">
		アメリカンエクスプレス
	</ul>
	</ol>
	
	お支払方法を選択されましたか？ <input type="submit" value="はい">
	
	</form>
	
	

現金 小切手 クレジットカード: マスターカード VISA アメリカンエクスプレス お支払方法を選択されましたか？

隠蔽フィールド

<form>タグでCGIスクリプトへデフォルトの引数を渡したい場合、ブラウザには表示されない隠蔽フィールドを作ることができます。隠蔽フィールドはtype="hidden"と指定し、必ず value属性を指定しなければなりません。

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	<input name="Shooting" type="hidden" value="射撃大会">
	射撃大会の参加者名：<input name="name"><p>
	
	<input type="submit" value=" 実　行 ">
	<input type="reset" value="リセット">
	</form>
	
	

射撃大会の参加者名：

隠蔽フィールドはブラウザに表示されないだけで、セキュリティが保たれているわけではありません。WWWは文書のソースコードがクライアントへ転送されてしまうので、重要なデータは隠蔽フィールドに書き込まないで下さい。たんなるCGIスクリプトへ渡す引数と考えたほうが無難でしょう。

---