formで使うinput要素の種類

formは、オペレータに対して、入力をうながして、それで得た情報をサーバー側へ送ることができます。
代表的な入力などの操作対象として、 button、radio、checkbox、text、textarea、select,option、password、hidden、textarea、reset、submit を使っている例を以下に示します。
submitの送信ボタンをクリックすると、サーバーにあるプログラムのinfo2.phpへ nameが付いている要素のvalueのデータなどがURLエンコードされて、送られます。送信ボタンのクリックで見えるページは、このinfo2.phpの実行によって作られたHTMLです。
　以下のソースは、実際にで表示させることができます。　確認してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="ja">
	<title>formで使うinput要素の種類</title>
	<script language="javascript">
	<!-- 
	function func1(){
		var s = "";
		
		s += "rbtn1[0]の状態："+ document.form1.rbtn1[0].checked + "\n";
		s += "cbtn1[0]の状態："+ document.form1.cbtn1[0].checked + "\n";
		s += "tx1の値："+ document.form1.txt1.value + "\n";
		s += "opt1の選択番号："+ document.form1.opt1.selectedIndex + "\n";
		s += "lst1の値："+ document.form1.lst1.value + "\n";
		s += "passwd1の値："+ document.form1.passwd1.value + "\n";
		s += "hidden1の値："+ document.form1.hidden1.value + "\n";
		s += "txtarea1の値：『"+ document.form1.txtarea1.value + "』\n";
		alert(s);
	}
	  -->
	</script>
</head>
<body>
	<h1>formで使うinput要素の種類</h1>

<form action="../cgi-bin/info2.php" method="get" accept-charset="UTF-8" name="form1">

ボタンオ 
	<input type="button" name="btn1" value="ボタン" onclick="func1()"><br>
	
ラジオボタン 
	<input type="radio" name="rbtn1" value="値1" checked>
	<input type="radio" name="rbtn1" value="値2">
	<input type="radio" name="rbtn1" value="値3"><br>

チェックボタン オブジェクト
	<input type="checkbox" name="cbtn1" value="値A" checked>	
	<input type="checkbox" name="cbtn1" value="値B"><br>	

テキストフィールド オブジェクト
	<input type="text" name="txt1" value="データ" size="20"><br>
	
セレクトメニュー オブジェクト
	<select name="opt1" size="1" tabindex="0">
	<option value="o1">項目1</option>
	<option value="o2" selected>項目2</option>
	</select><br>
	<br>
	
セレクトメニュー 
	<select name="lst1" size="3" tabindex="0">
	<option value="L1">項目A</option>
	<option value="L2" selected>項目B</option>
	<option value="L3">項目C</option>
	</select>
	<br>

パスワード 
	<input type="password" name="passwd1" size="20"><br>

見えないテキスト
	<input type="hidden" name="hidden1" value="ABCXY" ><br>

テキストエリア
	<textarea name="txtarea1" rows="4" cols="20" >abc

	wxyz</textarea><br>
	
リセットボタン
	<input type="reset" value="りせっと" size=20><br>

送信ボタン
	<input type="submit" value="送信" size=20><br>
</form>
</body>
</html>

参考に、上記で使っているサーバープログラム（info2.php）のソースコードを以下に示します。

<html lang="ja"><head> <title>get method の受信内容</title> </head><body>
<?php
reset($_GET);
while(list($key,$val)=each($_GET)){
	echo "{$key}の値は『{$val}』です<br>";
}
?>
</body></html>

なお、上記のHTMLサンプルやinfo2.phpは、UTF-8のキャラクタセットで保存しています。
phpのプログラム実行は、動作を指定する環境設定によって異なりますが、 UTF-8で保存すると文字化けを起こしにくいようです。（インターネットを取り巻く動向がUTF-8を使うようになっています。）
HTMLのformタグの属性でaccept-charset="○○"とするにより、サーバーが扱う文字データが○○であると正しく指定ができればよいのですが、対応しないブラウザが多いようです。よってこの場合、HTMLファイルもUTF-8で保存し、metaタグで、charset=UTF-8" を指定しています。