第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>

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




2002-2004 Copyright KaZuhiro FuRuhata (古籏一浩)