いままでも、フォームを、入力や出力のために使用してきましたが、フォーム内のエレメントには、次のものがあります。
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 |
チェック状態を参照/設定 |