第27回　「フォーム処理」

　今回から「フォーム処理」について説明していきます。JavaScriptではフォームの部品については、非常に多くの処理が可能です。例えば文字を入力するテキストフィールドの色やサイズを変更したり、マウスが乗ったら処理をする、別のテキストフィールドに入力された内容に応じて日本語のみ、英語のみ入力させる、入力内容を調べて不正な場合はメッセージを表示する、送信前に確認させミスがあったら送信しないなど、いろいろな事が可能です。
　ここではフォームの見た目の部分に関しては別の機会（スタイルの制御）で説明し、内容チェックやイベントなどに関して説明していきます。
　
　まずフォームに関するタグは以下のようになります。<input>タグはtype属性でいくつもの部品を指定できるので、それも載せてあります。
　
<form>～</form>
<input type="button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="password">
<input type="radio">
<input type="submit">
<input type="text">
<textarea>～</textarea>
<select>～</select>
<option>～</option>

　また、これらに反応するイベントとしては以下のようなものがあります。（一部です。さすがに全部載せると非常に多いので）

onClick .... クリックされた
onChange ... 内容が変化した
onBlur ..... フォーカスがはずれた
onFocus .... フォーカスされた
onKeydown .. キーが押された
onKeyup .... キーが離された
onKeypress . キーが押されたまま
onSubmit ... データが送信されようとした
onReset .... データが初期値に戻されようとした
　
　これらのイベントはタグ内に記述します。例えば
　
<input type="button" value="Oh!" onClick="myFunc()">

のように記述します。この場合はボタンがクリックされたら関数myFuncを呼び出します。
　それでは実際にボタンが押されたらアラートダイアログが表示されるスクリプトを作成してみます。上記のようにonClickを使えばクリックされた時の処理に反応させる事ができます。
　
<html>
<head>
<title></title>
</head>
<body>
<form>
<input value="押して" type="button" onClick="alert(1)">
</form>
</body>
</html>

　onClick=の後にはJavaScriptの命令が続きます。;で区切っていくつでも書くことができるのは今まで学習しました。上記のものでアラートダイアログで1と表示し、次に2を連続して表示するのであれば以下のようになります。
　
<html>
<head>
<title></title>
</head>
<body>
<form>
<input value="押して" type="button" onClick="alert(1);alert(2)">
</form>
</body>
</html>

　次回はテキストフィールドにアクセスする方法について説明します。
　

第27回 「フォーム処理」

第27回　「フォーム処理」