formタグ､etc

入力フォーム

入力フォームを作る

フォーム設定のページ	◇フォームの設定、入力項目と項目名の関連付け、フォームのグループ化
	◇テキスト入力、ラジオボタン、チェックボックス、セレクトボックスなど
	◇送信ボタン、リセットボタン、画像の送信ボタン、汎用ボタンなど

<form>

　<form>タグで、入力フォームを作成します。

＊ <form>タグで囲んだ部分に、テキスト入力欄、選択ボタン、送信ボタンなどを記述します。

　★ 使用例とブラウザでの表示


使　用　例		ブラウザの表示

<form method="POST" action="exam_1.cgi"> お名前：<input type="text" name="e_name"><br> メール：<input type="text" name="E-mail"><br> <input type="submit" value="送信する"> <input type="reset" value="ﾘｾｯﾄする"> </form>		お名前：メール：

フォームの設定例		ブラウザの表示

テキストの入力欄
テキストの入力欄（複数行）		テキスト入力 (複数行)
パスワードの入力欄

ラジオボタン（1つだけ選択が可能）		ラジオ1ラジオ2ラジオ3
チェックボックス（複数選択が可能）		ﾁｪｯｸ1 ﾁｪｯｸ2 ﾁｪｯｸ3

セレクトボックス（プルダウン形式）
セレクトボックス（リスト形式）

ファイルの選択欄
隠しデータの設定欄		(画面には表示しません)
送信ボタンとリセットボタン

入力フォーム

データの送信

入力項目と項目名

入力項目のグループ化

(データ送信)

データの送信形式と送信先を指定する

　<form>タグに method属性や action属性を追加すると、送信形式や送信先を指定できます。

method=""	POST：POST形式で送信
method=""	GET：GET形式で送信（初期値）
action=""	データの送信先を指定

　※ <form>タグには、action属性が必須となります。

　【送信形式（POSTとGET）】

　データの送信形式は、method属性に POST か GET を指定します。一般的なフォームでは POST を指定します。 ※ method属性の指定を省いた場合は、GET が適用されます。

※ POST … フォームのデータを本文として送信します。
一度に大量のデータを送信することが可能です｡

※ GET … フォームのデータを URL の末尾に追加して送信します。
送信できるデータ量には制限があります。

　【データの送信先】

　一般的には、CGI（Common Gateway Interface）などのプログラムに送信します。送信先は、そのプログラムのファイル名を指定して下さい。

　★ 使用例とブラウザでの表示


使　用　例		ブラウザの表示

<form method="POST" action="exam_2.cgi"> 名前：<input type="text" name="f_name" size=30><br> メッセージ：<br> <textarea cols=30 rows=4 name="f-send"> </textarea><br> <input type="submit" value="送信する"> <input type="reset" value="ﾘｾｯﾄする"> </form>		名前：メッセージ：

(データ送信)

■送信結果を表示するウィンドウの指定

　<form>タグに target属性を追加すると、送信結果を表示するウィンドウ（フレーム）を指定できます。

target=""	_blank	新たにブラウザを立ち上げて表示
	_top	フレームの分割を廃止して画面全体で表示
	_self	リンク元と同じウィンドウ（フレーム）に表示（初期値）
	_parent	親フレームに表示
	ウィンドウ名（フレーム名）：任意のウィンドウ（フレーム）に表示

※ target に "_blank" を指定した場合は、ユーザーの環境によってはポップアップブロックが機能することがあります。

※ 「DOCTYPE宣言」が "Strict" の場合は、target属性を使用できません（【HTML4.01】の 1) Strict を参照）。

　【フレームを使用した場合の例】

■ メインページに入力欄を置き、下のフレームに結果を表示する場合

チャットなどで使用されるパターンです。上の入力欄でデータをプログラムに信送し､信送結果を下のフレームに表示します。

指定方法： 下のフレームにフレーム名を付けて、target="" にその名前を指定します。

※フレーム名の付け方は、<frame>タグの「フレーム名の設定」をご覧下さい。

■ 下のフレームに入力欄を置き、送信結果をページ全体で表示する場合

メール送信フォームを作成した時などのパターンです｡下のフレームでデータをプログラムに送信し、メール送信の結果をページ全体で表示します。

指定方法： target="_top" を指定します。

　★ 使用例とブラウザでの表示


使　用　例		ブラウザの表示

<form method="POST" action="exam_3.cgi" target="under"> コメント：<input type="text" name="t_name" size=30><br> <input type="submit" value="送信する"> <input type="reset" value="ﾘｾｯﾄする"> </form>		コメント：

		frameName：under↓ サンプル

☆ ［送信］ボタンをクリックすると、フレーム（under）に Dummy File を表示します。

関連するページ

HTML タグページ

：ファイルの送信欄を作る

入力フォーム

データの送信

入力項目と項目名

入力項目のグループ化

入力項目と項目名を関連付ける

<label>

　<label>タグを指定すると、入力項目（フォームの部品）と項目名を関連付けることができます。

　■入力項目と項目名（テキスト）を関連付ける方法

・ <input>タグに id属性を追加し、関連付けしたい「ラベル名」を指定します。
<input type="checkbox" name="name" value="" id="label1">

・ <label>タグに for属性を指定し、「ラベル名」を付けます。
<label for="label1">項目名（テキスト）</label>

＊「項目名（テキスト）」を<input>タグの上の行や左側に表示する場合は、<label>タグを「先に」指定して下さい。

id=""	任意の名前（ラベル名）を指定
for=""	id="" と同じ名前（ラベル名）を指定

※ 名前は、アルファベットで始まる半角英数字（一部の記号も使用可）で自由に指定できます。
使用できる記号は､ハイフォン（ - ）､アンダーバー（ _ ）､コロン（ : ）､ピリオド（ . ）の４つです。

　【使用方法】

　通常のフォームでは、「項目名（テキスト）」の部分をクリックしても、その入力項目を選択できません。
　例えば、ラジオボタンの場合、「丸の部分」をクリックしないとその項目は選択できません。
　<label>タグで関連付けを行うと、「項目名」をクリックしてもその項目を選択できるようになります。

　【記述方法１】 <input>タグと<label>タグを別々に記述する場合

　まず、<input>タグに id="" を追加して名前（ラベル名）を指定します。次に、<label>タグに for="" を追加して id="" と同じ名前（ラベル名）を指定し、「項目名（テキスト）」を終了タグ囲みます。
　<input type="radio" name="name" value="" id="yes"><label for="yes">はい</label>

※ この例では "yes" という名前（ラベル名）によって、ラジオボタンと項目名を関連付けます。

　【記述方法２】 <input>タグを<label>タグで囲む場合

　<label>タグで<input>タグ全体と、「項目名」を囲んで指定します。この記述方法は、for="" や id="" を省略できます。
　<label><input type="radio" name="name" value="">はい</label>

※ この方法は、名前（ラベル名）がないので記述は簡単ですが、対応していないブラウザもあります。

　★ 使用例とブラウザでの表示


使　用　例		ブラウザの表示

☆ <input>タグを単独で使用する場合ご出席：<input type="radio" name="l-name1" value="">はい <input type="radio" name="l-name1" value="">いいえ		ご出席：はいいいえ

☆ <label>タグで「関連付け」する場合ご出席：<input type="radio" name="l-name2" value="" id="yes"> <label for="yes">はい</label> <input type="radio" name="l-name2" value="" id="no"> <label for="no">いいえ</label>		ご出席：はいいいえ

		※ 「はい」や「いいえ」をクリックし、違いを確かめて下さい。