..

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[参照番号](ページ先頭からのフォーム数で0からの通し番号)
   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[参照番号]

   (参照番号はフォームの先頭からのエレメント(部品)数で0からの通し番号)
 ラジオボタンを「name」属性で指定する場合は
   ラジオボタンのグループ名
[参照番号] とします
   (参照番号はグループの先頭からのラジオボタン数で0からの通し番号)



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


<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"><!--
function calc()
{
   goukei=0;
   if(document.orderForm.ch1.checked==true)goukei+=3000;
   if(document.orderForm.ch2.checked==true)goukei+=2500;
   if(document.orderForm.ch3.checked==true)goukei+=1500;
   if(document.orderForm.tax[0].checked==true)goukei*=1.05;
   if(document.orderForm.send[0].checked==true)goukei+=500;
   document.orderForm.calcText.value=goukei;
}
// --></script>


</head>



<body>
<form name="orderForm">
<input type="checkbox" name="ch1">

商品1 \3,000.-<br>
<input type="checkbox" name="ch2">
商品2 \2,500.-<br>
<input type="checkbox" name="ch3">
商品3 \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に初期設定
商品1がチェックされているかの判定
商品2がチェックされているかの判定
商品3がチェックされているかの判定
消費税を含むかどうかの判定
送料を含むかどうかの判定
テキストフォームに合計を表示
テキスト部品については次章を参照してください
■補足 『オブジェクトの指定について』
   document.orderForm.tax[0].checked

の部分は下記のように記述しても同じ意味になります

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

  document.forms["orderForm"].elements[3].checked
「orderForm」というフォームを作ります
商品を選ぶためのチェックボックスを3つ作ります






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




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



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

   ■sample21.htmlを実行する


sample21.htmlの実行画面



..

JavaScript入門−フォーム編(ボタン部品各種)     ■戻る     ■次へ     ■Home


..