初心者のためのホームページ作り:第109号

                 隔週金曜日配信 What's New 2005年1月21日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

       初心者のためのホームページ作り/Web for beginner
           http://www.scollabo.com/banban/

                        <第109号>

              banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
 成に役立つことを目的に配信されております。

  当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
 なお、このマガジンは等幅フォントでお読みいただくと快適に読めます。

   今週のコンテンツ
    ■ JavaScript講座 (第23回) --- Form/Elementオブジェクト
    ■ Tips --- フォームとJavaScript

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆JavaScript講座 ---  Form/Elementオブジェクト
 Form 及び Elementオブジェクトは、HTMLドキュメント中で利用される form要
 素を使用することで自動的に生成されるオブジェクトです。

 Formオブジェクトと、Elementオブジェクトは同義に扱われますが、Elementオ
 ブジェクトは、form要素内で配置される各入力フィールドを扱います。ただし
 両者のメソッドとプロパティはほぼ同じものが定義されていますが、機能が若
 干異なります。
  Formオブジェクトは Elementオブジェクトの上位オブジェクトに位置し、さ
 らに Elementオブジェクトには11個の下位オブジェクトが定義されています。

 フォームをオブジェクトとして扱ったとき、閲覧者がフォームの入力フィール
 ドに何かを書いたりしたときに、動的にレスポンスさせることができます。
  今回は Form、及び Elementオブジェクトについて解説します。

 ■ Form/Elementオブジェクトのプロパティ
  ○ action
  フォームに入力されたデータの送信先 URL の参照したり設定します。送信先
  は主に CGIスクリプトの URLが用いられるのが一般的です。
   HTMLタグの action属性と同じ働きを持ちます。普通ではこのメソッドは用
  いられることが少ないようです。

  書式
   document.フォーム名.action(送信先URL)

  例文
   document.myForm.action(/user/bin/sample.cgi);

  ○ encoding
  フォームで入力皿他データを送信する際のエンコード (符号化) を参照した
  り設定するときに使います。formタグの enctype属性と同じ役割をするもの
  ですが、利用するブラウザ銘柄によっては無視されることがあります。

  書式
   エンコード方式.encoding

  例文
   document.myForm.encoding = "text/plain";

  ○ length
  HTMLドキュメント中のフォームの総数、フォーム内の要素の総数を参照しま
  す。Formオブジェクトではフォームの総数を、また Elementオブジェクトで
  はフォーム内に配置されている入力フィールドの総数を参照します。

  書式
   document.フォーム名.lengh

   なお Elementオブジェクトにおける lenghプロパティでは、返される総数
  が実際の総数よりも1つ少ないことに注意してください。

  ○ method
  form要素内で記述する method属性の送信形式 (get、または post) を参照、
  あるいは設定します。返される値は post、または get です。文書が読み込
  まれた後でも、設定の値を変更することが可能です。

   書式
    フォーム名.method = post あるいは get

   例文
    document.myForm.method = "post";

  ○ name
  formタグ内で記述されている name属性の値 (フォーム名) を参照します。な
  お、このプロパティでフォーム名を変更することはできません。
   Elementオブジェクトでは、入力フィールドで指定された名前を参照します。

   書式
    document.フォーム名.name (Formオブジェクトの場合)
    document.エレメント名.フォーム名.name (Elementオブジェクト)

   例文
    a = document.Myform.name;
    a = document.element[0].myForm.name;

  ○ target
  フォームデータの送信先のターゲットウィンドウを参照、または設定します。

   書式
    document.フォーム名.target

   例文
   <script type="text/javascript">
   <!--
    function myWin() {
    alert("送信しました。" + document.myForm.target);
    }
    //-->
   </script>

   <form name="myForm" method="get" action="mailto:xxxx@xxx.net" 
     target="New Window">
   <p>
   <input type="text" value="" name="sample">
   <input type="submit" value="送信" name="submit" onclick="myWin()">
   </p>
   </form>

 ■ Form/Elementオブジェクトのメソッド
  ○ reset
  入力されたフォームデータを初期化し最初の状態に戻します。inputタグの
  type属性が「reset」と同じ役割を持ちます。

   書式
    フォーム名.rest()

   例文
    document.myForm.reset();

  ○ submit
  入力されたデータの送信に用います。inputタグの type属性が「submit」と
  同じ役割を持ちます。

   書式
    フォーム名.submit()

   例文
    document.myForm.submit();

 ■ Form/Elementオブジェクトの下位オブジェクト
 Form、及び Elementオブジェクトには下位層に位置する11個のオブジェクトを
 内包しています。

  下位オブジェクト
   Button、Checkbox、FileUpload、Hidden、Password、Radio、Reset、Text、
   Textarea、Submit、Select、(Option)

  HTMLのタグに詳しい方ならピンと来たハズです。これらのオブジェクトは、
  いずれも入力フィールドを形成するタグやその属性に準じています。そのた
  め、利用する際にオブジェクト名を明記しなくても下位オブジェクトとして
  自動的に割り当てられます。
   各オブジェクトのプロパティとメソッドを利用する場合の書式は

   document.フォーム名.エレメント名[番号].プロパティまたはメソッド

  エレメント名に「elements」を代用できます。その場合の番号は formタグ
 内に配置された入力フィールドの順番となります。ただし、最初の入力フィー
 ルドが、 0 であることに注意してください。
  もし2番目の入力フィールドに適用させたい場合には [1] となります。

 ■ Buttonオブジェクト
 Buttonオブジェクトは inputタグの type属性の値が「button」の場合に利用
 可能なオブジェクトです。

 ○ Buttonオブジェクトのプロパティ
 name  name属性で指定されているタグ名を参照
 type  ボタンの形式を参照
 length value属性で指定されているボタンの文字列を参照、または設定

 ○ Buttonオブジェクトのメソッド
 blur  選択されている入力フィールドのフォーカスを外す (選択を抜ける)
 click 自動的に選択されたボタンをクリックする
 focus フォーム内の入力フィールドを選択する (フォーカスする)

 ■ Checkboxオブジェクト
 Checkboxオブジェクトは inputタグの type属性の値が「checkbox」の場合に利
 用可能なオブジェクトです。

 ○ Checkboxオブジェクトのプロパティ
 checked チェックされている場合に真、されていない場合に偽を返す
 name   name属性で指定されている要素名を参照する
 type   指定されたコントロールの形式 (checkbox) の値を返す
 value  value属性で指定されている値 (送信内容) を参照、または設定する
 defaultChecked  初期のチェック状態の値を返す

 ○ Checkboxオブジェクトのメソッド
 blur  選択されている入力フィールドのフォーカスを外す
 click 自動的に選択されたボタンをクリックする
 focus フォーム内の入力フィールドを選択する

 ■ FileUploadオブジェクト
 FileUploadオブジェクトは inputタグで value属性の値が「fileupload」の場
 合に利用可能なオブジェクトです。 (ブラウザから別文書などを送付する場合
 に用いられる属性です。)

 ○ FileUploadオブジェクトのメソッド
 blur  選択されている入力フィールドのフォーカスを外す
 focus フォーム内の入力フィールドを選択する

 ○ FileUploadオブジェクトのプロパティ
 name  name属性で指定されている要素名を参照する
 type  指定された入力フィールドの形式 (fileupload) の値を返す
 value value属性で指定されている値(送信内容)を参照、または設定

 ■ Hiddenオブジェクト
 Hiddenオブジェクトは、<input type="hidden"> で示される隠しフィールドで
 通常は画面に表示されず管理用として利用されます。

 ○ Hiddenオブジェクトのプロパティ (メソッドは定義されていません)
 name  name属性で指定されている要素名を参照する
 type  指定された入力フィールドの形式 (hidden) の値を返す
 value value属性で指定されている値(送信内容)を参照、または設定

 ■ Passwordオブジェクト
 inputタグの type属性の値が「password」で示される入力フィールドをオブジ
 ェクトとして扱います。

 ○ Passwordオブジェクトのプロパティ
 name  name属性で指定されている要素名を参照
 type  指定されたコントロールの形式 (password) の値を返す
 value  value属性で指定されている値 (送信内容) を参照、または設定
 defaultValue   スワードの初期入力の値を参照

 ○ Passwordオブジェクトのメソッド
 blur   選択されているコントロールのフォーカスを外す 
 focus  フォームのコントロールを選択する 
 select  フォーカスされたパスワードの文字列を選択状態にする 

 ■ Radioオブジェクト
 inputタグの type属性の値が「radio」で示されるラジオボタン方式の入力フ
 ィールドをオブジェクトとして扱います。

 ○ Radioオブジェクトのプロパティ
 checked  チェックされている場合に真、されていない場合に偽を返す 
 name    name属性で指定されている要素名を参照
 type    指定されたコントロールの形式 (radio) の値を返す
 value   value属性で指定されている値 (送信内容) を参照、または設定
 defaultChecked 初期値としてチェック状態の値を返す

 ○ Radioオブジェクトのメソッド
 blur  選択されているラジオボタンのフォーカスを外す
 click 自動的に選択されたラジオボタンをクリックする
 focus フォーム内のラジオボタンを選択する

 ■ Resetオブジェクト
 Resetオブジェクトは、inputタグの type属性の値が「reset」で示される取消
 ボタンをオブジェクトとして扱うものです。

 ○ Resetオブジェクトのプロパティ
 name    name属性で指定されている要素名を参照
 type    指定されたコントロールの形式 (reset) の値を返す
 value   value属性で指定されている値 (送信内容) を参照、または設定

 ○ Resetオブジェクトのメソッド
 blur  選択されているリセットボタンのフォーカスを外す
 click 自動的に選択されたリセットボタンをクリックする
 focus フォーム内のリセットボタンを選択する

 ■ Textオブジェクト
 Textオブジェクトは、inputタグの type属性の値が「text」で示される文字入
 力フィールドをオブジェクトとして扱うものです。

 ○ Textオブジェクトのプロパティ
 name  name属性で指定されている要素名を参照
 type  指定された入力フィールドの形式(text)の値を返す
 value  入力された入力フィールドの値を参照、または設定
 defaultValue 入力フィールドの初期入力の値を参照

 ○ Textオブジェクトのメソッド
 blur  選択されている入力フィールドのフォーカスを外す
 click 自動的に選択された入力フィールドをクリックする
 select フォーカスされた入力フィールドの文字列を選択状態にする

 ■ Textareaオブジェクト
  texteraタグで示される文字入力フィールドをオブジェクトとします。Textオ
 ブジェクトの違いは、複数行にわたる文字入力フィールドであることです。
  inputタグの type属性が「text」の場合は、1行の文字入力フィールドとな
 ります。

 ○ Textareaオブジェクトのプロパティ
 name  name属性で指定されている要素名を参照
 type  指定された入力フィールドの形式(textarea)の値を返す
 value  入力された入力フィールドの値を参照、または設定
 defaultValue 入力フィールドの初期入力の値を参照

 ○ Textereaオブジェクトのメソッド
 blur  選択されている入力フィールドのフォーカスを外す
 click 自動的に選択された入力フィールドをクリックする
 select フォーカスされた入力フィールドの文字列を選択状態にする

 ■ Submitオブジェクト
 Submitオブジェクトは、inputタグの type属性の値が「submit」で示される送
 信ボタンをオブジェクトとして扱うものです。

 ○ Submitオブジェクトのプロパティ
 name  name属性で指定されている要素名を参照
 type  指定された入力フィールドの形式(submit)の値を返す
 value  入力された入力フィールドの値を参照、または設定

 ○ Submitオブジェクトのメソッド
 blur  選択されている送信ボタンのフォーカスを外す
 click 自動的に選択された送信ボタンをクリックする
 focus フォーム内の送信ボタンを選択する

 ■ Selectオブジェクト
 Selectオブジェクトは、<select> 〜 </select> で囲まれたメニュー選択方式
 の入力フィールドをオブジェクトとします。
  なお、メニュー項目は optionタグによって形成されるため、下位オブジェ
 クトとして Optionオブジェクトが定義されています。

 ○ Selectオブジェクトのプロパティ
 name   name属性で指定されている要素名を参照
 option  メニューの選択項目 (optionタグで定義)を参照、または設定
 type   指定されたコントロールの形式 (select-one) の値を返す
 value  value属性で指定されている値 (送信内容) を参照、または設定
 selectedIndex  選択されているメニュー項目のインデックス番号を参照

 ○ Selectオブジェクトのメソッド
 blur  選択されているメニュー項目のフォーカスを外す 
 focus  あるメニュー項目を選択する 
 length optionタグで定義されている選択項目の総数を参照

 ■ Optionオブジェクト (Selectオブジェクトの下位オブジェクト)
 Optionオブジェクトは、optionタグで形成されるメニュー方式のメニュー項目
 を示すもので、あらかじめ入力する値が決められています。
  このオブジェクトは Selectオブジェクトが上位オブジェクトとなります。

 ○ Optionオブジェクトのプロパティ (メソッドは定義されていません)
 index   メニューの選択項目のインデックス番号を参照
 selected 選択されている場合は真、選択されていない場合は偽を返す
 text   選択されているメニュー項目の文字列を参照、または設定
 defaultSelected 
      初期に選択されている場合は真、選択されていない場合は偽を返す

 ※当サイトの「今週のおさらい」に簡単なサンプルと、Formオブジェクトの利
  用法を掲載しましたので、折があればご覧ください。
    http://www.scollabo.com/banban/magazine/review_109.html

◆Tips --- フォームとJavaScript

 閲覧者から入力されたフォームのデータを、JavaScriptによってチェックする
 ことができます。
  例えばメールアドレスが不正かどうか、あるいは入力漏れがないかどうかを
 判断するには、今回掲げたオブジェクトを駆使することで作成できます。

 また、JavaScriptの起動にイベントハンドラを使うことが一般的です。ある入
 力フィールドのフォーカス (選択状態) を外れたときや、フォーカスされたと
 き、イベントハンドラによってスクリプトを実行させます。

 今回はサンプルを用意しませんでしたが、当講座のバックナンバー「第63号」
 を参考にしていただければ、今回の解説が理解しやすいと思います。

 なお、入力されたデータを実際に利用する場合には、サーバ側で CGIに対応す
 る必要があります。フォームを作ることはそれほど難しいことではありません
 が、データを再利用する場合には難解な CGIプログラムを書かなければなりま
 せん。
  また、サーバ側でも CGIに対応している必要があります。一般のプロバイダ
 が提供する Webサーバにはこの点に限界があるようです。
  無料で使える CGIサーバも幾つかあるので、いろいろと探して自分の環境に
 当てはまるサーバをお選びください。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで。

 今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
 てください。
  Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
 しています。あわせて過去の記事のおさらいも掲載しています

 (今週のおさらい)
  http://www.scollabo.com/banban/magazine/review_109.html

 次回は、当方の都合で3週間後の 2月11日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
 ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
 と思います。
  ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
 てくれると思います。

 発行者 ばんばん
 協力  スズキ・コラボレーション http://www.scollabo.com/
 配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

  誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

 ■バックナンバー こちらで公開しています。
 プレーンテキスト  http://www.scollabo.com/banban/magazine.html
 各号のおさらい  http://www.scollabo.com/banban/magazine/
 アーカイブ    http://www.scollabo.com/banban/daf/archive.html
 まぐまぐ     http://backno.mag2.com/reader/Back?id=0000090196

 ■配信の変更・中止はこちらです。
 個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
 かります。
  当サイトにて http://www.scollabo.com/banban/magazine/top.html
  まぐまぐにて http://www.mag2.com/m/0000090196.htm

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

<えでぃた〜ず・る〜む>

 今年は以前に増して外に出かける機会が増えました。そのせいなのか分かりま
 せんが、今年はずいぶん寒いなぁと感じています。冬だから当たり前の話です
 が、一番の悩みは「花粉症」です。

 今年の花粉の飛散は既に1ヶ月前から始まっており、昨年の猛暑で花粉量が多
 く当地では例年の10倍くらいになるそうです。目が痒く鼻水が猛烈に出てきま
 す。5月末までこの症状が続くのかと思うと非常に辛いものがあります。
  今まで薬に頼らずに過ごしてきましたが、今年ばかりは考えなくてはなりま
 せん。春はそこまできているのにねぇ・・・

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆著作権について
 個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応
 じておりません。記事中の内容について、無断で使用することを固く禁じます。
  なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
 自由に使っていただいても差し支えありません。

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


This page is Valid HTML 4.01! 最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com