webt - フォーム

	Web技術実習
	戻る〔２７．ナビゲーションメニューⅠ〕　次へ〔２９．ナビゲーションメニューⅡ〕　目次

２８．フォーム □□□□□□□□□□□□□□□□□□□□□□□□□□□■■■□□

　掲示板の書込み部分、ユーザ情報やアンケートなどの入力部分で使われているものが「フォーム」である。フォームに入力用の部品（オブジェクト）を配置し、ユーザから入力された情報はWebブラウザの送信機能を使って受け取ることができる。また、Webプログラムと組み合わせて情報収集の仕組みを作ることもできる。

28-1 入力部品

　フォームに配置できる主な入力部品（オブジェクト）の種類は次の通りである。HPBでは、フォームを配置すると表示される入力部品のツールバーから選択することができる。メニューバーからも選択することができる。

オブジェクト機　　能タ　　グ

① フォームフォームの領域を設定する。 <FORM>

② 1行テキスト文字列を1行入力する。 <INPUT> 属性type="text"

③ プッシュボタンクリックを受け付ける。 <INPUT> 属性type="button"
　　　　　　　　　 type="submit"
　　　　　　　　　 type="reset

④ ラジオボタン 1つだけ選択する。 <INPUT> 属性type="radio"

⑤ チェックボックスチェックを入力する。 <INPUT> 属性type="checkbox"

⑥ 複数行テキスト文字列を複数行入力する。 <TEXTAREA>

⑦ リストボックスリストから1つ選択する。 <SELECT> と <OPTION>

⑧ オプションメニューリストから1つ選択する。 <SELECT> と <OPTION>

	オブジェクト	機　　能	タ　　グ
①	フォーム	フォームの領域を設定する。	<FORM>
②	1行テキスト	文字列を1行入力する。	<INPUT> 属性type="text"
③	プッシュボタン	クリックを受け付ける。	<INPUT> 属性type="button" 　　　　　　　　　 type="submit" 　　　　　　　　　 type="reset
④	ラジオボタン	1つだけ選択する。	<INPUT> 属性type="radio"
⑤	チェックボックス	チェックを入力する。	<INPUT> 属性type="checkbox"
⑥	複数行テキスト	文字列を複数行入力する。	<TEXTAREA>
⑦	リストボックス	リストから1つ選択する。	<SELECT> と <OPTION>
⑧	オプションメニュー	リストから1つ選択する。	<SELECT> と <OPTION>

入力部品のツールバー

［挿入(I)］　→　［入力部品(F)］　→　各入力部品

実習２６　データ入力のWebページを作成する。
　HPBは「Web」のサイトを開いておくこと。
　ファイル名は「kaiin.htm」とする。ページのタイトルは「会員登録」とする。

会員登録

※※　サンプルのWebページなので、動作は保証されない。　※※

　操作１　「会員登録」と入力して、見出し<H2>に設定し、中央揃えにする。

・フォームの配置

　操作２　フォームを配置する。メニューバーから次のように選択する。

［挿入(I)］　→　［入力部品(F)］　→　［フォーム(F)］

　→ フォームの領域が、点線の枠線で表示される。
　→ 「入力部品」のツールボックスが表示される。

　操作３　フォームの属性のダイアログで、［名前(N)］に「kaiin」と入力して、[OK]ボタンをクリックする。

　　<FORM name="kaiin">

　操作４　フォームの領域内に、2列×6行の表を配置する。表を中央揃えにし、全体の幅はwidth=500ピクセルに設定する。また、表の1列目に「名前(ID)」、「性別」、… と文字を入力する。

・1行テキストの配置

　操作５　2列目、1行目に「1行テキスト」を配置する。

①　カーソルを第2列、1行に移動する。
②　［入力部品］のツールボックスから、［1行テキスト］のアイコンをクリックする。
③　表示される属性のダイアログで、［名前(N)］に「namae」、［カラム数(C)］に「35」と入力して、[OK]ボタンをクリックする。
　　<INPUT size="35" type="text" name="namae">

　操作６　「名前(ID)」をドラッグして、リンクとイベント（スクリプト）を設定する。

①　リンクの属性のダイアログの［ファイルへ］タグで、［ファイル名(N)］に「#」と設定する。
②　［イベント(E)...］をクリックする。イベントの編集のダイアログが開く。
③　［イベント(V)］から"OnClick"をクリックして選択する。
④　［スクリプト(R)］の入力欄に、次のスクリプトを入力する。
　　　　alert(document.kaiin.namae.value);
⑤　［登録(A)］ボタンをクリックしてから［OK］ボタンをクリックする。
　修正したときは、［置換(R)］ボタンをクリックする。
⑥　属性のダイアログの［OK］ボタンをクリックする。
※実際のWebページでは必要のない操作である。入力データを確認するためである。

　操作７　保存して、Webブラウザでスクリプトの確認をする。
　「名前(ID)」の入力欄に適当な文字を入力して、「名前(ID)」をクリックする。アラートのダイアログに入力した文字が表示される。

・ラジオボタンの配置

　操作８　2列目、2行目に「ラジオボタン」を配置する。

①　カーソルを第2列、2行に移動する。
②　［入力部品］のツールボックスから、［ラジオボタン］のアイコンをクリックする。
③　表示される属性のダイアログで、［グループ名(N)］に「sei」を入力し、［初期状態］の［選択(L)］にチェックを入れて、[OK]ボタンをクリックする。
　　<INPUT type="radio" checked name="sei">

　操作９　「ラジオボタン」の右側に「男性」と入力する。

　操作１０　もう一つ「ラジオボタン」を配置する。［グループ名(N)］には同じ「sei」を入力する。［選択(L)］にはチェックを入れないで、[OK]ボタンをクリックする。

　　<INPUT type="radio" name="sei">

　操作１１　「ラジオボタン」の左側に「女性」と入力する。

　操作１２　「性別」をドラッグして、リンク（ファイル名(N) = #）とイベント（スクリプト）を設定する。

alert(document.kaiin.sei[0].checked+"/"+document.kaiin.sei[1].checked);

　操作１３　上書き保存して、Webブラウザでスクリプトの確認をする。
　「男性」にチェックを入れ、「性別」をクリックすると、アラートのダイアログに"true/false"と表示される。「女性」にチェックを入れると"false/true"と表示される。

・リストボックスの配置

　操作１４　2列目、3行目に「リストボックス」を配置する。

①　カーソルを第2列、3行に移動する。
②　［入力部品］のツールボックスから、［リストボックス］のアイコンをクリックする。
③　表示される属性のダイアログで、［名前(N)］に「nenrei」、［行数(W)］に「5」を入力する。
④　［項目(I)］に「１０代」、［値(V)］に「10」と入力して、［登録(A)］ボタンをクリックする。
⑤　同じように、「２０代」と「20」、「３０代」と「30」、「４０代」と「40」、「５０代以上」と「50」を登録する。
⑥　選択肢のリストから「１０代」をクリックして、[OK]ボタンをクリックする。

<SELECT size="5" name="nenrei">
<OPTION value="10" selected>１０代</OPTION>
………
<OPTION value="50">５０代以上</OPTION>
</SELECT>

　操作１５　「年齢」をドラッグして、リンク（ファイル名(N) = #）とイベント（スクリプト）を設定する。

alert(document.kaiin.nenrei.value);

　操作１６　上書き保存して、Webブラウザでスクリプトの確認をする。
　「年齢」をクリックすると、アラートのダイアログにリストから選択した項目の数値が表示される。

・オプションメニューの配置

　操作１７　2列目、4行目に「オプションメニュー」を配置する。

①　カーソルを第2列、4行に移動する。
②　［入力部品］のツールボックスから、［オプションメニュー］のアイコンをクリックする。
③　表示される属性のダイアログで、［名前(N)］に「addr」と入力する。
④　［項目(I)］に「大阪府」、［値(V)］に「大阪府」と入力して、［登録(A)］ボタンをクリックする。
⑤　同じように、［項目(I)］と［値(V)］に「兵庫県」、「京都府、「奈良県」、「和歌山県」を登録する。
⑥　選択肢のリストから「大阪府」をクリックして、[OK]ボタンをクリックする。

<SELECT name="addr">
<OPTION value="大阪府" selected>大阪府</OPTION>
………
<OPTION value="和歌山県">和歌山県</OPTION>
</SELECT>

　操作１８　「住所」をドラッグして、リンク（ファイル名(N) = #）とイベント（スクリプト）を設定する。

alert(document.kaiin.addr.value);

　操作１９　上書き保存して、Webブラウザでスクリプトの確認をする。
　「住所」をクリックすると、アラートのダイアログにリストから選択した項目の値（都道府県名）が表示される。

・チェックボックスの配置

　操作２０　2列目、5行目に「チェックボックス」を配置する。

①　カーソルを第2列、5行に移動する。
②　［入力部品］のツールボックスから、［チェックボックス］のアイコンをクリックする。
③　表示される属性のダイアログで、［名前(N)］に「kibo」と入力して、[OK]ボタンをクリックする。
④　配置した「チェックボックス」の右側に「ゲーム」と入力する。
⑤　同じように、「チェックボックス」配置して、「チャット」、「テスト」、「ブログ」、「アニメ」、「音楽」を入力する。
　　<INPUT type="checkbox" name="kibo">

　操作２１　「ご希望」をドラッグして、リンク（ファイル名(N) = #）とイベント（スクリプト）を設定する。

fkibo(document.kaiin.kibo);

　操作２２　スクリプトを挿入する。メニューバーから次のように選択する。

［挿入(I)］　→　［その他(A)］　→　［スクリプト(R)...］

　→ スクリプトのダイアログが表示される。

　操作２３　次のように不要（下線）部分を削除して、スクリプトを入力する。

→→

　操作２４　上書き保存して、Webブラウザでスクリプトの確認をする。
　「ご希望」をクリックすると、チェックを入れた部分にはtrue、チェックを入れなかった部分にはfalseがアラートのダイアログに表示される。

・複数行テキストの配置

　操作２５　2列目、6行目に「複数行テキスト」を配置する。

①　カーソルを第2列、6行に移動する。
②　［入力部品］のツールボックスから、［複数行テキスト］のアイコンをクリックする。
③　表示される属性のダイアログで、［名前(N)］に「yobo」、［行数(R)］に「2」、［カラム数(C)］に「35」と入力して、[OK]ボタンをクリックする。
　　<TEXTAREA rows="2" cols="35" name="yobo"></TEXTAREA>

　操作２６　「ご要望」をドラッグして、リンク（ファイル名(N) = #）とイベントを設定する。

alert(document.kaiin.yobo.value);

　操作２７　上書き保存して、Webブラウザでスクリプト（スクリプト）の確認をする。
　「ご要望」の入力欄に適当な文字を入力して、「ご要望」をクリックする。アラートのダイアログに入力した文字が表示される。

　操作２８　サイト「Web」のWebページとして、リンクを設定する

index.htm （トップページ）
①　「JavaScriptのサンプル」の次の行に「会員登録」と文字を入力する。
②　文字「会員登録」をドラッグして選択して「kaiin.htm」にリンクを設定し、上書き保存する。
kaiin.htm
①　見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
②　文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。

　操作２９　Webブラウザの更新ボタンをクリックしてリンクを確認する。

26-2 情報送信とリセット

　入力された情報を受け取れるようにするための一番簡単な方法は、Webブラウザの送信機能を使うことである。［入力部品］のツールバーにある［SUB］アイコン（送信ボタン）を配置して、送信先のメールアドレスを設定する。情報は、メールの添付ファイルとして受け取れる。ただし、この方法では日本語（漢字）が半角英数字の文字コードに変換されるので、そのままでは読むことができない。
　CGIを使ってプログラムを組み、Webサーバの送信機能を使うと漢字もそのまま受け取ることができるが、Webサーバによって使えるプログラミング言語が異なるし、使える機能が制限されている場合もあるので、注意が必要である。
　もう一つの機能ボタンに、リセットがある。このボタンをクリックすると、チェックも含めて入力した情報がすべて消去される。

実習２７　データ入力のWebページに送信機能を追加する。
　HPBは「Web」のサイトを開いておくこと。
　ファイル「kaiin.htm」を開いておくこと。

　操作１　表の6行目にカーソルを移動し、さらに1度だけカーソル移動キー↓を押す。

　操作２　空白を1文字入力して、[Enter]キーを押す。

・情報送信の設定

　操作３　［入力部品］のツールボックスから、［SUB］のアイコンをクリックする。

　操作４　属性のダイアログで、［名前(N)］に「touroku」、［ボタンに表示するラベル(L)］に「会員登録」と入力する。（ボタンの種類は［送信(U)］がチェックされている。）［OK］ボタンをクリックする。

　操作５　FORMの属性のダイアログを開く。［名前(N)］には、“kaiin”と入力されている。

　操作６　［アクション(A)］にメールアドレスを入力し、［メソッド］は"POST"にチェックを入れる。［OK］ボタンをクリックする。

　操作７　上書き保存して、Webブラウザで情報送信の確認をする。

・リセットの設定

　操作８　［会員登録］のボタンの右側にカーソルを移動する。

　操作９　［入力部品］のツールボックスから、［RES］のアイコンをクリックする。

　操作１０　属性のダイアログで、［名前(N)］に「reset」、［ボタンに表示するラベル(L)］に「リセット」と入力する。（ボタンの種類は［リセット(R)］がチェックされている。）［OK］ボタンをクリックする。

　操作１１　上書き保存して、Webブラウザでリセットの確認をする。

26-3 スクリプトとの連携

　フォームとスクリプトの連携については、すでに会員登録のWebページで入力データの確認のために使った。ここでは、そのスクリプト(Javescript)について説明する。

◆alert(document.kaiin.namae.value); … 名前データの表示

alert( ) 関数
警告メッセージを表示するダイアログを開くJavascriptの関数である。
document
このWebページ（ドキュメント）を表す。
kaiin
フォームに付けた名前である。
namae
部品（1行テキスト）に付けた名前である。
value
値を参照するプロパティである。値の設定もできる。

document
このWebページ内 .
の kaiin
フォームkaiin .
の namae
1行テキストnamae .
の value
値

　会員登録のWebページにはフォームがkaiinの一つだけなので、1行テキストに入力された値を参照するとき、document.kaiinを省略することができる。
　　　　alert(document.kaiin.namae.value); ←→　alert(namae.value);

◆alert(document.kaiin.sei[0].checked+"/"+document.kaiin.sei[1].checked); … 性別データの表示

sei[0] と sei[1]
　ラジオボタンに付けた名前である。2つあるので、先頭から番号（0～）を付けて区別する（配列となる）。
checked
　ラジオボタンやチェックボックスの状態を参照するプロパティである。チェックされているときはtrue、チェックされていないときはfalseが返却される。
+
　加算の演算子、文字列連結の演算子である。ここでは文字列連結の演算子として働いている。
"/"
　文字列を表す。文字列リテラルという。'/'でもよいが、統一すること。

◆fkibo(document.kaiin.kibo); … 希望データの表示

fkibo
関数の名前である。別に作成した関数fkiboを呼び出す。

function fkibo(dd){
a="";
for(n=0; n<6; ++n)
a=a+dd[n].checked+"/";
alert(a);
}

function
関数を定義（"{"から"}"まで）する命令である。
a="";
変数aに空文字を記憶させる。
for
繰り返しの命令である。++n はn=n+1のことである。
　　n=0,1,2,3,4,5の6回繰り返す。

　fkibo(document.kaiin.kibo);で関数fkiboを呼び出して実行させる。このとき、( )内のdocument.kaiin.kiboが関数定義fkibo(dd)の変数dd（引数という）に渡される。関数定義fkiboの中では変数ddはdocument.kaiin.kiboのことになる。

戻る〔２７．ナビゲーションメニューⅠ〕　次へ〔２９．ナビゲーションメニューⅡ〕　目次
Web技術実習	Copyright © 2006,2007 Hiroshi Masuda

名前(ID)
性別	男性　女性
年齢
住所(都道府県)
ご希望(複数可)	ゲーム　チャット　テスト　ブログアニメ　音楽
ご要望

２８． フォーム □□□□□□□□□□□□□□□□□□□□□□□□□□□■■■□□

会員登録

２８．フォーム □□□□□□□□□□□□□□□□□□□□□□□□□□□■■■□□