uhyohyo.net

JavaScript初級者から中級者になろう

二章第十二回 フォームの操作

フォームについての説明は、基礎第六回にあります。

HTMLFormElement

form要素のHTMLElementは、HTMLFormElementと呼ばれます。

このform要素ですが、今までと同様にgetElementByIdなどで取得することも可能ですが、実は専用のものもあります。

それは、documentが持つformsというプロパティで、これはHTMLCollectionです。つまり、例えば

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="?">
    </form>

    <script type="text/javascript">
      var form = document.forms.item(0);

      console.log(form);
    </script>
  </body>
</html>
        

のようにしたとき、変数formには、0番目のform要素が代入されていることになります。formを表示してみるとHTMLFormElementと表示されるので、ちゃんとform要素であることが分かります。(実際はちゃんとフォームの中には何か置きましょう)

さて、それではこのHTMLFormElementはどんな機能を持っているのでしょうか。

elements

elementsというプロパティを持っています。これは、そのフォームが持つコントロールのHTMLCollectionです。コントロールとは、フォームの中にある操作出来るもののことで、select要素とか、input要素とか、textarea要素とか、button要素などが当てはまります。

フォームコントロール1つ1つに何か処理をしたいときなどに使えます。

HTMLFormElementのメソッド

HTMLFormElementは、2つのメソッドを持っています。submitresetで、どちらも引数はありません。これらは、

<input type="submit" value="送信">
<input type="reset" value="送信">
        

これらのボタンを押したのと同じ動作をします。

つまり、submitメソッドはそのフォームを送信し、resetメソッドはそのフォームをリセットします。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="http://www.google.com/">
    </form>

    <script type="text/javascript">
      var form = document.forms.item(0);

      form.submit();
    </script>
  </body>
</html>
          

このサンプルは、実行するといきなりGoogleにジャンプします。これは、JavaScriptによってフォームが送信され、そのフォームの送信先がGoogleになっているからです。

HTMLInputElement

さて、それでは、1つ1つのコントロールの操作について見ていきましょう。

まずは、そのうちinput要素です。input要素のHTMLElementは、HTMLInputElementといいます。このHTMLInputElementは多くのプロパティを持っていますが、input要素は、入力ボックスやボタン、チェックボックスなどさまざまな種類のコントロールがひとつの要素にまとまっているため、それぞれの種類専用のプロパティなどがあります。

汎用のプロパティ

まず、どんな種類のinputでも使えるプロパティを見てみます。

formプロパティは、そのコントロールが所属するフォームの要素、つまりHTMLFormElementが代入されています。書き換えはできません。所属するフォームを変えるには、そのフォームのノードを別のフォームの下にくっつける作業が必要になります。

また、valueプロパティは、そのvalue属性を取得できます。ただし、入力ボックスの場合は、初期値(最初から入力されている値)がvalue属性であり、入力ボックスの中身が変更された場合、変更後の値を取得します。変更前の値(value属性)を取得するには、defaultValueプロパティを使います。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="?">
      <p>
        <input id="aaa" type="text" value="testtest">
        <input type="button" value="check" onclick="check();">
      </p>
    </form>
      <script type="text/javascript">
      function check(){
        var input = document.getElementById('aaa');
        console.log(input.value);
      }
    </script>
  </body>
</html>
        

今回のサンプルでは、ユーザーが変更した後で処理をするために、イベントを使用しています。詳しくは基礎第五回を参照して下さい。

これを実行すると、画面には"testtest"が入力された入力ボックスとボタンがあります。ボタンを押すと、check関数が呼ばれます。

check関数では、入力ボックスのHTMLElementをgetElementByIdによって取得し(そのためにinputにはid属性をつけています)、そのvalueプロパティを表示しています。入力ボックスを変更すると、変更後の値がそのまま表示されることがわかります。

disabledプロパティは、disabled属性を取得します。しかし、disabled属性は、

<input disabled type="button" value="test">

のように、値を持たず、あるかないかだけです。それをどう扱うかというと、disabledプロパティは、文字列ではなく、真偽値が入っています。すなわち、あればtrue、なければfalseです。書き換えできますが、この場合も真偽値を代入しなければなりません。

typeプロパティは、そのコントロールの種類が文字列で入っています。書き換えられません。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="?">
      <p>
        <input type="text" value="test">
        <input type="button" value="test">
        <input type="checkbox" value="test">
        <input type="radio" value="test">
      </p>
    </form>

    <script type="text/javascript">
      var form = document.forms.item(0);

      for(var i=0; i < form.elements.length; i++){
        console.log(form.elements.item(i).type);
      }
    </script>
  </body>
</html>
        

このサンプルでは、まずform要素を取得し、for文とform.elementsによってフォームが持つコントロールひとつひとつについて処理をしています。このようなfor文の書き方については、過去に解説しています。iが0からform.elementsの最後の要素の番号まで増加するため、ひとつひとつの要素について処理をすることができるのでした。

そのひとつひとつの要素が、itemメソッドで取得したform.elements.item(i)です。これのtypeを表示しています。

「text」「button」「checkbox」「radio」と表示されます。

さて、blurfocusclickというメソッドも持っています。すべて引数はありません。blurは、そのコントロールからフォーカスを外し、逆にfocusは与えます。

clickは、そのコントロールをクリックしたことにします。例えば、ボタンなら押されるし、チェックボックスやラジオボタンも押されたことになります。ただし、入力ボックスの場合は効果がなく、何も起きません。

入力ボックス

入力ボックス(typeが"text"か"password"の場合)は、まずreadOnlyプロパティが使えます。これは、readonly属性を取得するものですが、disabledと同じく

<input readonly type="text" value="testtest">

のような指定をするため、真偽値です。

また、selectというメソッドがあります。引数はありません。これは、入力ボックスの文字を全て選択状態にするというものです。

チェックボックス・ラジオボタン

チェックボックスやラジオボタン("checkbox","radio")の場合、checkedというプロパティを使えます。これは真偽値で、そのinputがチェックされていればtrue、されていなければfalseです。

また、defaultCheckedというプロパティもあります。同じく真偽値で、もともとチェックされていたかどうか、つまりchecked属性があるかどうかということです。

HTMLTextAreaElement

HTMLTextAreaElementは、textarea要素のHTMLElementで、input要素(入力ボックスの場合)と同じように扱えます。

HTMLButtonElement

HTMLButtonElementは、button要素のHTMLElementで、これもinput要素(ボタンの場合)と同じように扱えます。