TECHNICAL INFORMATION技術情報

第4回
  フォーム、イベント

フォーム

 いままでも、フォームを、入力や出力のために使用してきましたが、フォーム内のエレメントには、次のものがあります。

button ボタン
checkbox   チェックボックス(複数選択可能)
radio ラジオボタン(ひとつだけ選択可能)
reset リセットボタン
select 選択ボックス(リストボックス または コンボボックス)  
submit 送信ボタン
text 1行のテキスト
textarea 複数行のテキスト

 この中の、button, checkbox, radio, text を使用した例です。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function calc() { var i,data=0; with(document.form01) { for(i=0;i<length;i++) { if(elements[i].type=="checkbox") { if(elements[i].checked) data += eval(elements[i].value); } } if(r01[0].checked) data *= 0.95; e01.value = data; } } </script> </head> <body> <form name="form01"> ■購入する商品を選択してください。<hr> <input type="checkbox" value="10000">本体(\10,000)<br> <input type="checkbox" value="2000">オプションa(\2,000)<br> <input type="checkbox" value="3000">オプションb(\3,000)<p> ■会員は 5%値引きします。<hr> <input type="radio" name="r01" checked>会員です。<br> <input type="radio" name="r01">会員ではありません。<p> 金額:<input type="text" name="e01"> <input type="button" value="計算" onclick="calc()"><p> </form> </body> </html>

 length は、フォーム内のエレメント数を返します。type は、エレメントの種類を返します。
 フォーム内のエレメントを参照するには、<input>内のname属性で指定しているエレメント名または、フォーム内の何番目のエレメントかを、elements[参照番号] という形式で指定します。最初のエレメントは elements[0] です。

length フォーム内のエレメント数 F名.length
type エレメントの種類を参照 F名.E名.type
value エレメントの文字列を参照/設定 F名.E名.value
defaultValue   テキスト、テキストエリアの初期文字列   F名.E名.defaultValue
text セレクトの項目を参照/設定 F名.E名.options[参照番号].text  
F名: document.フォーム名  E名: エレメント名 または elements[参照番号]

 この例では、「計算」という button をクリックすると、calc() という関数を実行しますが、for() を使用して、全エレメントの種類をはじから調べ、種類が「チェックボックス」で、チェックされていたら、value属性で指定されている値を加算しています。
 この後に、ラジオボタンの1番目の項目がチェックされているか調べて、チェックされていたら0.95倍して、テキストボックスに値を代入しています。

 次の例では、radio(ラジオボタン)の代わりに、select(選択ボックス)を使用しています。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function calc() { var i,data=0; with(document.form01) { for(i=0;i<length;i++) { if(elements[i].type=="checkbox") { if(elements[i].checked) data += eval(elements[i].value); } } DatA*=r01.options[r01.selectedIndex].value; e01.value = data; } } </script> </head> <body> <form name="form01"> ■購入する商品を選択してください。<hr> <input type="checkbox" value="10000">本体(\10,000)<br> <input type="checkbox" value="2000">オプションa(\2,000)<br> <input type="checkbox" value="3000">オプションb(\3,000)<p> ■会員は 5%値引きします。<hr> <select name="r01" size="3"> <option value="0.95" selected>会員です。</option> <option value="1">会員ではありません。</option> </select><p> 金額:<input type="text" name="e01"> <input type="button" value="計算" onclick="calc()"><p> </form> </body> </html>

 select の選択項目の番号は selectedIndex で知ることができ、選択されたオプションの value(値)を、商品価格の合計に乗じています。なお、<select>内のsize属性を省略するか、"1"を指定すると、1行しか表示されない、コンボボックスの外観になります。

イベント

 前の項目でも、フォームの button をクリックしたとき、関数を実行するようにしていますが、これをイベントといいます。イベントは、フォーム以外にも、いろいろなところで使用することができます。

● ページの読み込み時/切り替え時のイベント

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body onLoad="alert('こんにちは!')" onUnload="alert('ばいばい!!')"> <a href="document023.htm">一つ前の例に戻る</a> </body> </html>

 ここをクリックしてください。onLoad はページの読み込み時に発生するイベントで、alert で こんにちは! と表示しています。、 onUnload はページ切り替え時に発生するイベントで、一つ前の例に戻る という部分をクリックすると、alert で ばいばい!! と表示しています。

● マウスクリック時のイベント

 マウスボタンを押して離したときに発生するイベント onclick は、いままで、フォームの button を押したときに関数を実行する目的で使用してきましたが、その他のときにも使用できます。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> function msg0(elm) { var data; data = elm.type + "がクリックされました。" + "\n"; document.form01.txt01.value += data; } function msg1() { document.form01.txt01.value += "リンクがクリックされました" + "\n"; } </script> </head> <body> <form name="form01"> どれかを、クリックしてください。 <input type="reset"> <hr><a href="javascript:;" onclick="msg1()">ここをクリック</a><br> <input type="button" value="ボタン" onclick="msg0(this)"><br> <input type="checkbox" onclick="msg0(this)">チェックボックス<br> <input type="radio" name="r01" onclick="msg0(this)">ラジオ1 <input type="radio" name="r01" onclick="msg0(this)">ラジオ2<br> <hr><textarea name="txt01" rows=20 cols=40></textarea> </form> </body> </html>

 <a href="javascript:;" という部分は、一つ前の例のように、ふつうはリンク先URLが書かれます。ここでは、どこにも移動しないように、何もしない命令を書いています。
 各エレメントをクリックしたときのイベント onclick で実行される関数 msg0()カッコ内の引数 this は、カレントオブジェクトへの参照をあらわすことができます。関数 msg0()では、引数として受け取ったオブジェクト(フォームのエレメント)のタイプを、テキストエリアに表示しています。msg1()は、リンクをクリックしたときのメッセージを、同様にテキストエリアに表示しています。

● フォーカス移動時のイベント/フォーカスの移動

 Tab やマウスカーソルで、フォーカスが移動したときに発生するイベントです。onfocus はフォーカスが合ったとき、onblur はフォーカスが離れたときのイベントです。また、フォーカスを移動させることもできます。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> function msg0(elm) { data = new Array("全角で","半角英数で(aaa@bbb.cc.dd)","半角英数で(111-222-3333)"); document.form01.txt01.value = data[elm]; } function msg1(elm) { if(elm.value=="") document.form01.txt02.value = "入力されませんでした。"; else document.form01.txt02.value = elm.value + "さん ですね。"; } function chk0() { var i; with(document.form01) { for(i=0;i<=3;i++) { if(elements[i].type=="text") { if(elements[i].value=="") { elements[i].focus(); chkb.checked=false; alert("全項目入力されていないので登録できません。"); break; } } } } } </script> </head> <body> <form name="form01"> 入力してください。<input type="reset"><p> 名前:<input type="text" onfocus="msg0(0)" onblur="msg1(this)"><br> e-mail:<input type="text" onfocus="msg0(1) "onblur="msg1(this)"><br> TEL:<input type="text" onfocus="msg0(2) "onblur="msg1(this)"><br> 登録する<input type="checkbox" name="chkb" onfocus="chk0()"><br> <hr>メッセージ1<input type="text" name="txt01" size="60"><br> メッセージ2<input type="text" name="txt02" size="60"> </form> </body> </html>

 「メッセージ1」テキストボックスには、 onfocus イベントによって関数 msg0()が実行され、入力の方法と例が表示されます。「メッセージ2」テキストボックスには、onblur イベントによって関数 msg1()が実行され、入力結果が表示されます。全項目入力しないで「登録する」をチェックしようとすると、onfocus イベントで 関数 chk0() が実行され、入力していない項目に focus()でフォーカスを移動させて、alert で警告します。

onfocus   フォーカスが合ったときのイベント  
onblur フォーカスが離れたときのイベント
focus() フォーカスを合わせる
blur() フォーカスを外す
select() 文字列を選択状態にする
click() クリックする
checked チェック状態を参照/設定