隔週金曜日配信 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プロパティでは、返される総数
が実際の総数よりも１つ少ないことに注意してください。
○ 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 であることに注意してください。
もし２番目の入力フィールドに適用させたい場合には [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」の場合は、１行の文字入力フィールドとな
ります。
○ 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
次回は、当方の都合で３週間後の 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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
今年は以前に増して外に出かける機会が増えました。そのせいなのか分かりま
せんが、今年はずいぶん寒いなぁと感じています。冬だから当たり前の話です
が、一番の悩みは「花粉症」です。
今年の花粉の飛散は既に１ヶ月前から始まっており、昨年の猛暑で花粉量が多
く当地では例年の10倍くらいになるそうです。目が痒く鼻水が猛烈に出てきま
す。５月末までこの症状が続くのかと思うと非常に辛いものがあります。
今まで薬に頼らずに過ごしてきましたが、今年ばかりは考えなくてはなりま
せん。春はそこまできているのにねぇ・・・
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com