第41回 「ボタン」
今回はボタン処理について説明します。フォーム内でのボタンは以下のように<input>タグで指定できます。
<input type="button" value="押して">
このボタンは単体では役に立たないのですが、JavaScriptと組み合わせることで威力を発揮します。例えばフォームのテキストフィールド内の合計を計算する場合にボタンを押すと計算結果が表示されるといった場合に使えます。またボタンをクリックするとキャラクタが移動したりするといった事もできます。
それではボタンが押されたらアラートダイアログにメッセージを表示するプログラムを作ります。ボタンが押されたら、というのはonClickイベント*1が使えます。今までのテキストフィールドと同じようにinputタグ内に記述します。押されたらcheck関数を呼び出すようにするには以下のようになります。
<input type="button" value="押して" onClick="check()">
check()の代わりにalert('押されました')と書いても、ちゃんとアラートダイアログにメッセージは表示されます。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
alert("押されました");
}
// --></script>
</head>
<body>
<form>
<input type="button" value="押して" onClick="check()">
</form>
</body>
</html>
フォームのボタンは、これ以外にもう１つあります。それは<button>〜</button>タグで指定されるものです。これは、あらかじめ決められた形のボタンではなく制作者が任意の文字や画像に決めることができる便利なものです。例えばmyBtn.gif画像を使ったボタンにする場合には
<button>
<img src="myBtn.gif">
</button>
のようにします。文字も付加したい場合は
<button>
<img src="myBtn.gif">
押してね〜
</button>
のようにします。この<button>タグで指定されるボタンも<input>タグで指定されるボタン同様にイベントを使うことができます。マウスがクリックされたらアラートダイアログにメッセージを表示するには以下のようになります。
<button onClick="check()">押して</button>
<input>タグ同様にonClick〜を書くだけです。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
alert("押されました");
}
// --></script>
</head>
<body>
<form>
<button onClick="check()">押して</button>
</form>
</body>
</html>
次回はリセットボタンと、リセットボタンが押されたら確認のダイアログを表示しフォーム内容を消去するかどうかを決めるプログラムについて説明します。
*1 Internet Explorer 4, Netscape 6以降ではonMousedownイベントも使えます。これはマウスボタンが押されたらすぐに発生するイベントです。