フォームを使った入出力

フォームに入力されたデータを使って処理するためにgetElementByIdというメソッドを利用します。
ただし、このメソッドは対応するブラウザが IE5以上、Firefox1以上、Opera6以上、Safari1以上となっています。
フォームを利用したサンプルプログラム

実行例1

pushというボタンをクリックするとselectによって選択されたアイテムが何番目のアイテムであるかを表示するプログラムです。
ボタンがクリックされたかどうかを検出するonClickというイベントハンドラによって、クリックされるとform_data()という関数を呼び出します。関数内では、erabuというIDのselectボックス内のoptionを0番から

<html>
<head>
</head>
<script type="text/javascript">
function form_data(){
  var select=document.getElementById('erabu').selectedIndex;
  alert(select+"を選択しましたね。");
}
</script>
<body>
<form>
<select id="erabu">
<option value="1">1番目</option>
<option value="2">2番目</option>
<option value="3">3番目</option>
</select>
<input type="button" value="push" onclick="form_data()">
</form>
</body>
</html>
document.getElementById('erabu').selectedIndex;
erabuというIDが設定されたselectタグのoptionの何番目が選択されているかを求めます。
1番目の項目から順番に0,1,2・・・という値になります。
document.getElementById('erabu').value;
optionに設定されたvalueプロパティの値を取り出すことができます。
つぎは、２つの入力フィールドに入力された値の合計を表示するサンプルプログラムです。

実行例2

数字を入れてください。 
<html>
<head>
</head>
<script type="text/javascript">
<!--
function sum(){
  var result=parseInt(document.getElementById('suji1').value)
             + parseInt(document.getElementById('suji2').value);
  alert("合計は"+result+"です。");
}
//-->
</script>
<body>
<form>
数字を入れてください。<input type="text" id="suji1" size=5>
<input type="text" id="suji2" size=5>
<input type="button" value="plus" onclick="sum()">
<input type="reset" value="reset">
</form>
</body>
</html>

<html>
<head>
</head>
<script type="text/javascript">
<!--
function sum(){
  var result=parseInt(document.getElementById('suji1').value)
             + parseInt(document.getElementById('suji2').value);
  document.getElementById("result").innerHTML = result;

}
//-->
</script>
<body>
<form>
数字を入れてください。<input type="text" id="suji1" size=5>
<input type="text" id="suji2" size=5>
<input type="button" value="plus" onclick="sum()">
<input type="reset" value="reset">
</form>
<div id="result"></div>
</body>
</html>

イベントハンドラ

クリックしたときにイベントが起こります。

onMouseOut Event!!マウスを領域から外すときにイベントが起こります。
onMouseDown Event!!領域をマウスでクリック(押し下げたとき)にイベントが起こります。
onMouseUp Event!!領域をマウスでクリック(押し放したときとき)にイベントが起こります。
onMouseOver Event!!領域にマウスがのったときにイベントが起こります。
<form NAME="event">
<INPUT TYPE="button" NAME="event1" VALUE="onClick Event!!" 
             onClick="alert('クリックされました')">クリックしたときにイベントが起こります。
</form>
<br>
<a HREF="#" onMouseOut="alert('Mouse Out')"> onMouseOut Event!!</a>
マウスを領域から外すときにイベントが起こります。<br>
<a HREF="#" onMouseDown="alert('Mouse Down')"> onMouseDown Event!!</a>
領域をマウスでクリック(押し下げたとき)にイベントが起こります。<br>
<a HREF="#" onMouseUp="alert('Mouse Up')"> onMouseUp Event!!</a>
領域をマウスでクリック(押し放したときとき)にイベントが起こります。<br>
<a HREF="#" onMouseOver="alert('Mouse Over')"> onMouseOver Event!!</a>
領域にマウスがのったときにイベントが起こります。<br>
そのほかのイベントハンドラ
ハンドラ名 内容 利用可能な場所
onBlurフォームがフォーカスを失う際に起動select、text、textarea
onChangeフォームの内容が変更され、フォーカスを失った際に起動select、text、textarea
onClickフォームがクリックされた際に起動button、checkbox、radio、link、reset、submit
onFocusフォームがフォーカスされた際に起動select、text、textarea
onLoadページがロードされた際に起動 body要素内で定義する 使い方：<body onLoad=′関数など′>
onSelectフォーム内でテキストが選択された際に起動text、textarea
onSubmitsubmit（提出）された際に起動form
onRestreset（取り消し）された際に起動form
onUnloadページがアンロードされた際に起動body要素内で定義する