|
|
| butoff.jpg |
buton.jpg |
上のボタンは、右に示すような２種類のボタンからできています。５段目のボタンのコードは次のようになっています。
ジャバスクリプトを使って、マウスのポインターがボタンの上におかれると、ボタンが大きくなるように仕組まれています。
このボタンについての説明は、このページ (自分でボタンを作るにはどうしたらいいの？) で行っています。ほかにもボタンの使い方を、
具体例を示しながら、説明しています。上のリンクをクリックすると、
新しいページが開きます。このページに戻るには、新しいページを閉じてください。
これとちょうど同じことを、FORMタグを使って行うことができます。その例を下に示します。
 |
チンプのゴンベイです。
僕、あなたのこと、愛しちゃったんですけど、僕のことどう思いますか？
下のボタンをクリックして教えてください。 |
|
NOTE : スピーカーのスイッチを入れてください。 |
ラジオボタンをクリックしてみてください。お気づきでしょうが、いくつかボタンをクリックしても、ただの１つしか選ぶことができないようになっています。
これが、このラジオボタンの特徴です。上のデモのコードを下に示します。
<FORM action="http://barclay.free-city.net/cgi-
bin/result.html">
<input type="radio" name="choice" value="1"
onClick="document.kitsui.play()">
絶対に、嫌い！
<BR>
<input type="radio" name="choice" value="2"
onClick="document.doushite.play()">
分かんないなー
<BR>
<input type="radio" name="choice" value="3"
onClick="document.hakkiri.play()">
どうしようかなー。。。困っちゃうなあー。。。
<BR>
<input type="radio" name="choice" value="4"
onClick="document.sukisuki.play()">
ゴンベイちゃん、好きになってあげてもいいわよ。
<BR>
<input type="radio" checked name="choice" value="5"
onClick="document.kiss.play()">
あたしも、愛しているわ！キスしてちょうだい！
<P>
<input type="submit"
onClick="alert('残念ながら、このボタンをクリックしても、どこにも回答を送ることはできません。\nこれは、単なるデモです。\n\nしかし、本当は、このようにして、回答をリモートサイトへ送るために考え出されたものです。実際の例では、次のような、あなたのチョイス (例えば、choice=5) を含んだ string を ACTION アトリビュートで指定した URL へ送ります。\n\n http://barclay.free-city.net/cgi-bin/result.html?choice=5')">
</FORM>
５番目のボタンは、はじめからチェックマークがついていますが、このページのビジターが、何の選択もせずに、ボタンを押した場合に、この５番がデフォールトとして、リモートサイトへ送られます。
このようなデフォールトを設定するには、CHECKED (stand-alone, no-value-bearing attribute) アトリビュートを使います。
一番上のボタンを選択してサブミット・ボタンをクリックすると、choice=1 というストリングが、クエスチョンマークの後に、くっつけられて、リモートサイトへ送られます。リモートサイトでは、
result.html というページが、この選択肢に基づいて、回答を処理して、そのページに、何らかの処理結果を表示するわけです。
これは、単なるデモですから、たとえ、
上のサブミットボタンをクリックしても、何もしません。ただ上に示したようなメッセージをジャバスクリプトの alert() ファンクションによって表示するだけです。
この alert() ファンクション （メソッド） の使い方は、次のページ(Javascript Special Characters and Alert() Method)を見てください。新しいページが開きます。このページへ戻るには、新しいページを閉じてください。
onClick はイべント・ハンドラーと呼ばれますが、この使い方については、このページ (イベント・ハンドラーってどうやって使うの？) を見てください。
ラジオ・ボタンでは、残念ながら一つしか選ぶことができません、２つ以上選ぶ時には、チェックボックス・ボタンを使います。
このボタンについては次のページ (他にどんなボタンがFORMタグで使えるの？ （チェックボックス・ボタン）) で説明します。
Beaverland Music
