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

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

＜第109号＞ 今週のおさらい
　　　　　　　　　　　　   毎週金曜日配信　What's New 2005年1月5日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ JavaScript講座  第23回 --- Form/Elementオブジェクト

◆ JavaScript講座 --- Formオブジェクト

アンケートや質問、意見などを扱うフォームは、HTMLタグの formタグによって形成されます。そこには様々なタイプの入力フィールドがあり、Formオブジェクトはそうしたフォーム全体や様々な入力フィールドをオブジェクトとして活用します。

Formオブジェクトの最上位オブジェクトは windowオブジェクトですが、下位に Elementオブジェクトを内包し、そのまた下位に11個のオブジェクトを持っています。

下図は Formオブジェクトの階層を示したもので、上位オブジェクトとして Formがあり、その直下に Elementオブジェクトが位置します。Elementオブジェクトの下位層に11個のオブジェクトが定義され、その中の Selectオブジェクトには Option

なお、下位オブジェクトを利用する際には、そのオブジェクト名を記述する必要がありません。各入力フィールドに対応したオブジェクトが自動的に割り当てられるので、メソッドあるいはプロパティのみ明示すれば適応されます。

■ Form、および Elementオブジェクトの使い方

Formオブジェクトは、HTML構文のフォームをオブジェクトとして扱うため、最低１つ以上のフォームが必要です。ファームを扱うスクリプトを作成するためには、formタグに name属性で、フォームの名前を振る必要があります。

もし、名前がなければ最初に出現するフォーム要素が対応されます。

例文

<form name="myForm">

Elementオブジェクトは、フォーム内に配置される各種入力フィールドを対象とします。つまり、テキスト入力フィールドやチェックボックス、ラジオボタン、あるいはメニュー選択フィールドなど様々なフォーム構成部品を Elementオブジェクトとして扱います。

Elementオブジェクトとして扱う入力フィールドは、その要素名 (name属性で定義した名前)、あるいは入力フィールドの出現順番を割り当てます。順番は最初の入力フィールドが 0 であることに注意してください。

Elementオブジェクトの書式は以下のとおりです。

document.フォーム名.elements[順番号].メソッド (あるいはプロパティ)

具体例
  document.myForm.elements[0].focus();

■ Formオブジェクトのサンプル

以下の構文は入力された値を条件分岐によってメッセージを出すスクリプトです。入力された値の取り出し方法で Form、Elementオブジェクトを使っています。

ヘッダ部に記述
  <script type="text/javascript">
  <!--
  function myAge(){
   var a=document.myForm.age.value;
   if(a<=25) {
   alert("お若くて羨ましいです！");
   }
    else if(a<=26 && a>=32) {
    alert("そろそろ責任が問われる時期ですね。");
    }
    else {
    alert("もう若くありませんね、同情します。");
   }
 }
//-->
</script>

body部に記述
  <form name="myForm">
  <p>あなたの年齢を入力してください。
  <input type="text" name="age">
  <input type="button" value="実行" onclick="myAge()">
  </p>
  </form>

上記サンプルの実行結果

PageTop / Home / 目次

---

初版公開日 2005年1月7日

Copyright（C） 2002-2005 banban@scollabo.com