JavaScript | 5章：フォームオブジェクトを操作しよう

INDEX

前の章に戻る次の章に進む

5章：フォームオブジェクトを操作しよう

本章では、JavaScriptによるフォームの操作の方法を学びます。

本章の学習をはじめるにあたり、以下のダウンロードリンクから、素材ファイルをダウンロードして下さい。

JS 5章演習データ

演習素材について
ダウンロードした「JS5演習データ」フォルダの中には、「forms_start」と「forms_fin」フォルダが入っています。

forms_start:作業用フォルダ
forms_fin:完成データ

自分で書いたコードがうまく動作しないときは、完成データとの違いを探してみましょう。

【5−1】フォームオブジェクトとは

HTMLのコンテンツ領域に表示されるフォームの入力パーツはJavaScriptで操作可能なオブジェクトです。

JavaScriptでフォームを操作する方法には、画像オブジェクトと同様に次の2通りがあります。

★JavaScriptでフォームを操作する方法

１．ブラウザオブジェクトのformsオブジェクト、elementsオブジェクトを操作する
２．DOMを構成する要素オブジェクト（form要素、input要素、textarea要素、select要素、option要素など）を操作する

【5-2】フォームオブジェクトの操作方法

■ 1. ブラウザオブジェクトのformsオブジェクト、elementsオブジェクトを操作する

「forms_start」フォルダ内のform-obj.htmlをエディタで開き、ブラウザプレビューして下さい。

forms_start / form-obj.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>フォームオブジェクト</title>
  </head>

  <body>
    <form class="signup-form">
      <h3>メールアドレス</h3>
      <input type="text" class="elem1" /> @ <input type="text" class="elem2" />

      <h3>メルマガ登録</h3>
      希望<input
        type="radio"
        name="mailmagazine"
        value="necessary"
        class="radio1"
        checked
      />　 不要<input
        type="radio"
        name="mailmagazine"
        value="unnecessary"
        class="radio2"
      />

      <p>
        <input type="submit" value="登録する" />
      </p>
    </form>
  </body>
</html>

サンプルコード5-1

ブラウザプレビュー

ブラウザオブジェクトのformsオブジェクト、elementsオブジェクト

・フォームのHTML要素は、formタグの中にinputタグやtextareaタグ、selectタグなどの入力パーツが入れ子状態でマークアップされています。

・ブラウザオブジェクトとしてフォームを扱う場合、formタグには「forms」というオブジェクト名が用意されており、inputタグほかの入力パーツには「elements」というオブジェクト名が用意されています。

・formsオブジェクトは、以下の「主要なブラウザオブジェクトの階層構造」の図を見るとわかるとおり、documentオブジェクトの配下に位置するオブジェクトです。

・また、elementsオブジェクトは、formsオブジェクトの配下に位置するオブジェクトです。

formsオブジェクト、elementsオブジェクトへのアクセス

・formsオブジェクトやelementsオブジェクトにアクセスするときは、上記のツリーを上から辿るように「.（ドット）」でつないでいきます。

・windowオブジェクトは省略可能ですから、document.formsやdocument.forms.elementsと記述すれば良いのですが、ここでひとつ注意点があります。
　→それは、HTMLのコンテンツ領域にはformタグやinputタグが複数存在する場合があるということです。

今回のサンプルファイル内には、以下の図のようにformタグ内に4つのinputタグが存在します。

formsオブジェクト、elementsオブジェクトには連番がついている

・formタグやinputタグ、textareaタグ、selectタグ、buttonタグなどをブラウザオブジェクトとして扱う場合、画像オブジェクトと同じように、HTMLファイル中に書かれている順番に、あらかじめ連番が割り当てられています。

・1つめのformタグには0番、2つめのformタグには1番、3つめのformタグには2番という具合です。

・この連番は[0]、[1]、[2]、[3]、・・・・と記述し、添字またはインデックス番号などと呼ばれます。

・これは前章で学習したimagesオブジェクトの考え方と同じです。

・サンプルファイル内のformタグやinputタグをJavaScriptのブラウザオブジェクト名で表す際は、このようになります。

上記のオブジェクト名の表記法を使ったformsオブジェクトへのアクセス方法は以下の通りです。

また、elementsオブジェクトへのアクセス方法は以下の通りです。

★elementsオブジェクトに含まれるタグの要素
textareaタグ、selectタグ、buttonタグ、fieldsetタグなどのinputタグ以外のフォームの入力パーツもelementsオブジェクトとして扱われます。

■ 2. DOMを構成する要素オブジェクト（form要素、input要素、textarea要素、select要素、option要素など）を操作する

formタグとinputタグにclass名またはid名を追加する

<form class="signup-form">
  <h3>メールアドレス</h3>
  <input type="text" class="elem1" /> @ <input type="text" class="elem2" />

  <h3>メルマガ登録</h3>
  希望<input
    type="radio"
    name="mailmagazine"
    value="necessary"
    class="radio1"
    checked
  />　 不要<input
    type="radio"
    name="mailmagazine"
    value="unnecessary"
    class="radio2"
  />

  <p>
    <input type="submit" value="登録する" />
  </p>
</form>

サンプルコード5-2

☝サンプルコード5-2

・フォームオブジェクトを操作するもう一つの方法は、DOMのノードであるform要素やinput要素などのタグの要素を取得して操作するという方法です。
　→この場合は、あらかじめタグにid名またはclass名をつけておき、documentオブジェクトのgetElementByIdメソッドやquerySelectorメソッドなどを使いフォームの要素をオブジェクトとして取得します。

・サンプルコード5-2のように、formタグ内やinputタグ内にclassまたはid名を追加しておき、次の記述法でオブジェクトを取得します。

querySelectorメソッドでclass名を取得してform要素をオブジェクト化する場合

document.querySelector(".signup-form");

サンプルコード5-3

☝サンプルコード5-3の解説

・document.forms[0];と記述したときと同じオブジェクトを表します。
・「signup-form」はformタグに追加したclass名です。

querySelectorメソッドでclass名を取得してinput要素をオブジェクト化する場合

document.querySelector(".elem1");

サンプルコード5-4

・document.forms[0].elements[0];と記述したときと同じオブジェクトを表します。

・「elem1」は1つめのinputタグに追加したclass名です。

・1.または2.の方法でオブジェクトにアクセスできたら、そのオブジェクトのメソッドやプロパティを参照することにより、フォームオブジェクトを操作します。

・formsオブジェクトとelementsオブジェクトには、以下のメソッドやプロパティが用意されています。

formsオブジェクトの主要なメソッド

メソッド名	使い方
reset()	入力値をクリアする
submit()	フォームを送信する

formsオブジェクトの主要なプロパティ

プロパティ名	使い方
length	フォーム内の要素数を取得する
name	formタグのname属性の属性値を取得する

elementsオブジェクトの主要なメソッド

メソッド名	使い方
focus()	フォームパーツにフォーカスを合わせる
blur()	フォームパーツからフォーカスを外す
select()	テキストを選択状態にする

elementsオブジェクトの主要なプロパティ

プロパティ名	使い方
value	フォームパーツの入力値を取得または設定する
checked	ラジオボタン、チェックボックスの選択状態を取得する

【5-3】演習　フォームオブジェクトの操作

本章で学んだフォームオブジェクトの操作方法を使い、次の2種類のサンプルファイルを作成してみましょう。

■ テキストフォームにカーソルを立てる

・inputタグで作成されたひとつ目のテキストフォームに、ページ読み込み時にカーソルを立てます。
・テキストフォームにカーソルが立つことを「フォーカスが合う」といいます。
・elementsオブジェクトのfocusメソッドを使い、この機能を実装することができます。

HTMLマークアップ

forms_start / form-obj.html

<form class="signup-form">
  <h3>メールアドレス</h3>
  <input type="text" class="elem1" /> @ <input type="text" class="elem2" />

  ・・・中略・・・
  
</form>

サンプルコード5-5

コード内の最初のinputタグをオブジェクトとして操作します。

<script></script>

</body>
</html>

サンプルコード5-6

</body>の直前に<script></script>を入力します。

JavaScriptでフォームパーツを操作する

添字を使いブラウザオブジェクトのelementsにアクセスする方法と、class名を取得してDOMのinput要素にアクセスする方法の2通りで書いてみましょう。

1.ブラウザオブジェクトのelementsにアクセスする方法

<script>
  document.forms[0].elements[0].focus();
</script>

サンプルコード5-7

添字を使いブラウザオブジェクトにアクセスする場合、JavaScriptのコードはこのようになります。

2.class名を取得してDOMのinput要素にアクセスする方法

<script>
  // document.forms[0].elements[0].focus();
  document.querySelector(".elem1").focus();
</script>

サンプルコード5-8

先ほどのコードはコメントアウトしています。
代わりに、querySelectorメソッドを使って、class名で指定したinput要素を取得し、その要素にアクセスする方法を示しています。

ブラウザプレビューをしてみましょう。

1.と2.のコードはどちらも同じ結果になります。

これで「5章：フォームオブジェクトを操作しよう」の解説を終わります。

次の章に進みましょう。