Google
A revolving earth (earthani.gif--64x64) Beaverland Net
HTMLを易しく教えて!
HTML Made Easy!
 

 

HTML Made Easy! logo (html01.gif--140x160)

 

JavaScript Made Easy! logo (javascrt.gif--140x360)

 

Slangs not found in a dictionary logo (slangs.gif--140x260)

 

Beaverland Japonica banner (japonic3.gif--140x360)

 

Study in Canada Home Page logo (homepg.gif--160x160)

  1. 出願
  2. 学費・生活費
  3. ビザ
  4. 渡航準備
  5. バンク–バ–
    に留学しよう!
  6. BC州の教育
  7. カナダの教育
  8. 私立高校願書
    の一例 (生徒用)
  9. 私立高校願書
    の一例 (両親用)
  10. 大学入学案内
  11. 私立高校
    入学案内
  12. 全寮制私立高校
    入学案内
  13. 全寮制私立高校
    授業料
  14. 公立高校
    入学案内
  15. バンク–バ–
    公立高校
    2002 / 2003年度
    入学要項
    及び授業料
  16. 語学専門学校
    授業料一覧表
  17. バンク–バ–案内
  18. 御意見・御質問コ–ナ–
  19. 帰国子女の受け入れ
  20. BC州の官公庁
    市町村・大学・高校へのリンク
  21. 留学生のための銀行利用法
  22. 高校生1000人に留学補助

onstore.gif (140x93)

beavbook.gif (120x160)

beavcomp.gif (120x160)

beavmovi.gif (120x160)

beavgift.gif (120x160)

beavtrav.gif (120x160)

music.gif (50x50) Beaverland Music
 
他にどんなボタンが
FORMタグで使えるの?
(チェックボックス・ボタン)
June 20, 2003

A chimp's eyes (310x50)
A chimp's nose (310x30)
A chimp's nostrils (310x30)
A chimp's left whisker (100x132)A chimp's lips (120x132)A chimp's right whisker (90x132)

僕の顔のどこが気に入ってますか?
どれでも、好きなものを選んでちょうだい。

Lips Nose Whisker Eyes Nostrils

 

上のデモは、下のようなコードから成り立っています。

<FORM action="http://www.host.com/cgi-
    bin/process.html">

<input type="checkbox" name="part1"
  value="lips"
  onClick="document.herLips.src=
          '../images/pucklip.gif'" > Lips
<input type="checkbox" name="part2"
  value="nose"
  onClick="document.nose.src=
          '../images/pucknos3.gif'"> Nose
<input type="checkbox" name="part3"
  value="whisker"
  onClick="document.leftWhisker.src=
          '../images/pucwisl.gif'"> Whisker
<input type="checkbox" name="part4"
  value="eyes"
  onClick="document.eyes.src=
          '../images/puckeye3.gif'"> Eyes
<input type="checkbox" name="part5"
  value="nostrils"
  onClick="document.nostrils.src=
          '../images/pucnostr.gif'"> Nostrils
<P>
<input type="reset" value="選びなおす。"
  onClick="restoreAll()">
<input type="submit" value="Submit (伝送)"
  onClick="alert('メッセージ')">
</FORM>

前のページのデモと違って、上の例では、好きなだけ選ぶことができます。この場合には、デフォールトのチェックマークはついていませんが、前のぺーじと同様に、CHECKED (stand-alone, no-value-bearing attribute) アトリビュートを挿入することもできます。

選択するには、それぞれのボタンをクリックします。同じボタンをもう一度クリックすれば、チェック・マークは消えます。しかし、たくさん選んだ場合、 一度に、チェック・マークを消したい場合には、リセット・ボタン(選びなおす)をクリックします。

例えば、唇と鼻を選んでサブミット・ボタンをクリックすると、あたなのブラウザーは、part1=lips&part2=nose というストリングを、クエスチョンマークの後に、くっつけて、 action アトリビュートで指定した、 リモートサイトへ送ります。 リモートサイトでは、process.html というページが、この選択肢に基づいて、回答を処理して、そのページに、 何らかの処理結果を表示するわけです。

これは、単なるデモですから、たとえ、 上のサブミット・ボタンをクリックしても、何もしません。ただ、メッセージをジャバスクリプトの alert() ファンクションによって表示するだけです。

この alert() ファンクション (メソッド) の使い方は、次のページ(Javascript Special Characters and Alert() Method)を見てください。新しいページが開きます。このページへ戻るには、 新しいページを閉じてください。

onClick はイべント・ハンドラーと呼ばれますが、この使い方については、このページ (イベント・ハンドラーってどうやって使うの?) を見てください。

前のページへ

 

Chipmunk pointing to the left (chipleft.gif--178x156) Related
Links


筆者紹介
Akira Kato (kato.jpg--180x135)
  • 日本とカナダの大学で教育を受ける。
  • 横浜にある大手の電器メーカーでコンピューターのソフトウエアの開発に従事する。
  • カナダのノースウエスト隼州政府・財務省に勤務する。
  • バンクーバーのランガラ・カレッジおよびサレーのクワンテレン・カレッジで講師を勤める。
  • ヨーロッパ、東南アジア、中国、北米を幅広く旅行する。
  • 現在、経営コンサルタント、フリーランス・ライターとして活躍している。
  Comments
 
上の例のように、ボタンを使うときには、 onClick= も必ず書かかないと、だめなんですか?
    - さとる

書く必要は、まったくありません。イベント・ハンドラーを使わずとも、あなたのブラウザーはを間違いなく FORM タグを実行してくれます。
    - Akira
 
 



御意見・御感想
とても良い 良い まあまあ 良くない 最低

お名前:
Email アドレス:
御感想を書いて下さい。



A Brief History
of Presidential
Love Affairs


Beaverland ジャポニカ
Re-Discover JAPAN
inserted by FC2 system