フォームの制御、ボタン部品各種

JavaScriptの入門とサンプル集

■JavaScript入門－フォーム編（ボタン部品各種）　　　　　■戻る　　　　　■次へ　　　　　■Home

■ボタン・ラジオボタン・チェックボックス・送信ボタン・リセットボタン　

　ここからは、フォームについての説明をします。フォームがどんなものかわかりやすいように、個々のフォーム部品の説明から始めたいと思います。それでは、フォームのボタン各種からJavaScriptの処理を行う方法説明します。

★ボタン

　　 <input type="button" value="ボタンの文字" onClick="処理命令">　　

★送信ボタン

　◇HTML
　　<input type="submit" value="ボタンの文字">　　　

　　　　押されると<from>タグの「onSubmit」イベントが発生します

　◇JavaScript

　　<form onSubmit="処理命令">

　　document.フォームオブジェクト.submit()

　　　フォームをメールで送信します
　　　<form>の「method」属性を"post"に「action」属性は、
　　　"mailto:メールアドレス?cc=カーボンコピー?subject=件名?body=本文"
　　　または"実行するCGIのURL"
　　　<form>の属性は、「document.フォームオブジェクト.属性」を使って読み書きできます

　フォームオブジェクトの部分は<form>タグの「name」属性で指定したフォーム名の他、下記のような方法で指定することができます。
　　　document.forms[参照番号]（ページ先頭からのフォーム数で０からの通し番号）
　　　document.forms["フォーム名"]

★リセットボタン

　◇HTML
　　<input type="reset" value="ボタンの文字">　　　

　　　押されると<form>タグの「onReset」イベントが発生します

　◇JavaScript

　　<form onReset="処理命令">

　　document.フォームオブジェクト.reset()

　　　フォームの内容をデフォルトに戻します

★チェックボックスとラジオボタン

　◇HTML

　　<input type="checkbox" name="チェックボックスの名前" checked="true/false">
　　<input type="radio" name="ラジオボタンのグループ名"
　　　value="参照番号" checked="true/false">

　　　ラジオボタンの「value」属性を省略すると出現順に0からの参照番号が付きます
　　　「checked」属性を省略すると選択されてない状態になります

　◇JavaScript

　　document.フォームオブジェクト.エレメント（部品）オブジェクト.checked

　　　チェックされているかどうか真偽値(true/false)を返します

　エレメントオブジェクトの部分は「name」属性で指定したボタン部品名の他、下記のような方法で指定することができます。
　　　document.フォームオブジェクト.elements[参照番号]
　　　（参照番号はフォームの先頭からのエレメント（部品）数で０からの通し番号）
　ラジオボタンを「name」属性で指定する場合は
　　　ラジオボタンのグループ名[参照番号]　とします
　　　（参照番号はグループの先頭からのラジオボタン数で０からの通し番号）

　それでは、これらのボタン各種を使ったサンプルプログラムを見てみましょう。まずはウインドウを閉じるボタンのサンプルプログラムです。

<html>
<head>
<title>閉じるボタン</title>
</head>

<body>
<br><br><br><br>
<div align="center">
<input type="button" value="閉じる" onClick="window.close()">
</div>
</body>

～sample19.html～のリスト

ボタンが押されたらウインドウを閉じるメソッドを実行します

　　　■sample19.htmlを実行する

　では、次に簡単なメールフォームを作ってみましょう。しかし、この方法ではブラウザやメールなどのアプリケーションによって処理がマチマチで期待通り動作しないことが多いうえ、英数字以外は特別なフォーマットに変換されて読めなくなってしまいます。これらをクリアしてどんな環境でもうまくメールフォームを動作させようと思うとCGIによるプログラムの助けが必要になります。CGIを使ったメールフォームについてはサンプル集の方で編集する予定なのでそちらをご覧ください。
　ちなみに下記のプログラムを色々な環境で実行してみるとこんな結果になりました。メールアドレス欄に「abc」一言メッセージに「def」と入力して実行した場合です。いずれも日本語は文字化けしてしまいます。では、JavaScriptで何ができるのと言われると、「onsubmit()」イベントから関数で未入力のチェックや間違った入力をチェックして間違えていれば「return false」と返すことで「submit」イベントをキャンセルすることができます。CGIを使う場合は<form>の「method」属性にCGIのURLを指定します。

ブラウザ	メール	宛先	本文	動作
ネスケ7.02	ユードラ	abc	def	メールが起動して送信待ちになる
ネスケ7.02	アウトルック	abc	mailAd=abc bodyText=def	メールが起動して送信待ちになる
IE6.0	アウトルック	abc	?	メールを送信してエラーになる

<html>
<head>
<title>簡易メールフォーム</title>
</head>
<body>

<form name="mailForm" method="post" enctype="text/plain" action="" onSubmit="document.mailForm.action
='mailto:'+document.mailForm.mailAd.value
+'?body='+document.mailForm.bodyText.value">
メールアドレス<br>
<input type="text" name="mailAd" value="">
<br>
一言メッセージ<br>
<input type="text" name="bodyText">
<br><br>
<input type="reset" value="リセット" >
<br><br>
<input type="submit" value="送信">
</form>

</body>
</html>

～sample20.html～のリスト

「mailForm」というフォームを作ります
送信ボタンが押されたら「action」属性を書き換えます
「action="mailto:mailAdのテキスト?body=bodyTextのテキスト"」

テキスト部品については次章を参照

リセットボタンの設定

送信ボタンの設定

　　　■sample20.htmlを実行する

sample20.htmlの実行画面

　では、最後にチェックボックスとラジオボタンを使った簡単なオーダーフォームのサンプルプログラムを見てみましょう。

<html>
<head>
<title>簡易オーダーフォーム</title>
<script language="JavaScript"></script>

</head>

<body>
<form name="orderForm">
<input type="checkbox" name="ch1">
商品１　\3,000.-<br>
<input type="checkbox" name="ch2">
商品２　\2,500.-<br>
<input type="checkbox" name="ch3">
商品３　\1,500.-<br><br>
消費税を
<input type="radio" name="tax" value="0" checked="true">
含む
<input type="radio" name="tax" value="1">
含まない<br>
送料(\500.-）を
<input type="radio" name="send" value="0" checked="true">
含む
<input type="radio" name="send" value="1">
含まない<br><br>
<input type="button" value="計算" onClick="calc()">
<br><br>
<input type="text" name="calcText">
<br><br>
<input type="reset" value="リセット" >
</form>
</body>
</html>

～sample21.html～のリスト

関数「calc」の定義

合計を0に初期設定
商品１がチェックされているかの判定
商品２がチェックされているかの判定
商品３がチェックされているかの判定
消費税を含むかどうかの判定
送料を含むかどうかの判定
テキストフォームに合計を表示
テキスト部品については次章を参照してください

■補足　『オブジェクトの指定について』
　　　document.orderForm.tax[0].checked
の部分は下記のように記述しても同じ意味になります

　　document.forms[0].elements[3].checked
　　document.forms["orderForm"].elements[3].checked

「orderForm」というフォームを作ります
商品を選ぶためのチェックボックスを３つ作ります

消費税を含むかどうかのラジオボタンのグループを作ります

送料を含むかどうかのラジオボタンのグループを作ります

代金の合計を計算するボタンを作ります
クリックされると関数「calc」を実行します
代金の合計を表示するためのテキストフィールドをつくります
テキスト部品については次章を参照してください
フォームのリセットボタンを作ります

　　　■sample21.htmlを実行する

sample21.htmlの実行画面

■JavaScript入門－フォーム編（ボタン部品各種）　　　　　■戻る　　　　　■次へ　　　　　■Home