二章第十二回 フォームの操作
このページの最終更新日：
フォームについての説明は、基礎第六回にもありましたね。今回はよりDOM的な観点からフォームについて振り返ります。
HTMLFormElement
form要素のHTMLElementは、HTMLFormElementと呼ばれます。
このform要素ですが、今までと同様にgetElementByIdなどで取得することも可能ですが、実は専用のものもあります。
それは、documentが持つformsというプロパティで、これはHTMLCollectionです。例えば、
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<form id="form1" action="?">
</form>
<script type="text/javascript">
var form = document.forms.item(0);
console.log(form);
</script>
</body>
</html>
このようにform要素を取得することができます。変数formには0番目のform要素が代入されていることになります。0番目というのは、例によって文書順です。すなわち、ページ内で最初に存在するform要素が0番目になります。
実は、HTMLCollectionには番号で要素を取得するほかに、名前で要素を取得する機能を持ちます。それにはnamedItemというメソッドを用います。これは、引数で与えられた名前を持つ要素を探して返すものです。名前というのは、id属性またはname属性のことです。今問題のform要素にはform1というidがついていますから、次のようにform要素を取得することもできます。
var form = document.forms.namedItem("form1");さらに、これはnamedItemメソッドを陽に使わなくても、次のようにプロパティアクセスの形で書くことができます。
var form = document.forms["form1"];もちろん、これは次のように書いても同じことです。
var form = document.forms.form1;これで基礎第六回で出てきたdocument.forms["フォーム名"].elements["エレメント名"].valueという書き方が部分的に説明できました。
elements
実は、HTMLFormElementはelementsというプロパティを持っています。これは、そのフォームが持つコントロールのHTMLCollectionです。コントロールとは、フォームの中にある操作出来るもののことで、select要素とか、input要素とか、textarea要素とか、button要素などが当てはまります。
これは、名前でフォームコントロールを指定して取得したいときに便利です。そして、これで先ほどのdocument.forms["フォーム名"].elements["エレメント名"].valueの部分が説明できました。
HTMLFormElementのメソッド
HTMLFormElementは、submitとresetという2つのメソッドを持っています。どちらも引数はありません。これらは、
<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[0];
form.submit();
</script>
</body>
</html>
このサンプルは、実行するといきなりGoogleにジャンプします。これは、JavaScriptによってフォームが送信され、そのフォームの送信先がGoogleになっているからです。
HTMLInputElement
さて、それでは、1つ1つのコントロールの操作について見ていきましょう。
まずは、input要素です。input要素のHTMLElementは、HTMLInputElementといいます。このHTMLInputElementは多くのプロパティを持っていますが、input要素は、入力ボックスやボタン、チェックボックスなどさまざまな種類のコントロールになる可能性があり、それぞれの種類専用のプロパティなどがあります。
汎用のプロパティ
まず、どんな種類のinputでも使えるプロパティを見てみます。
formプロパティは、そのコントロールが所属するフォームの要素、つまりHTMLFormElementが代入されています。これは木構造の形にかかわるプロパティですから、例によって書き換えはできません。所属するフォームを変えるには、そのフォームのノードを別のフォームの下にくっつける作業が必要になります。
また、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プロパティは、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[i].type);
}
</script>
</body>
</html>
このサンプルでは、まずform要素を取得し、for文とform.elementsによってフォームが持つコントロールひとつひとつについて処理をしています。このようなfor文の書き方については、過去に解説していますね。iが0からform.elementsの最後の要素の番号まで増加するため、ひとつひとつの要素について処理をすることができるのでした。
このでは、そのひとつひとつの要素のtypeを表示しています。
「text」「button」「checkbox」「radio」と表示されるはずです。
さて、HTMLInputElementはblur、focus、clickというメソッドも持っています。すべて引数はありません。blurは、そのコントロールからフォーカスを外し、逆にfocusは与えます。
clickは、そのコントロールをクリックしたことにします。例えば、ボタンなら押されるし、チェックボックスやラジオボタンも押されたことになります。ただし、入力ボックスの場合は効果がなく、何も起きません。
入力ボックス
入力ボックス（typeが"text", "password", "search", "url"などの場合）は、まずreadOnlyプロパティが使えます。これは、readonly属性を取得するものですが、disabledと同じく
<input readonly type="text" value="testtest">のような指定をするため、真偽値です。このプロパティは、属性名と異なりOが大文字になっていることに注意してください。このようにDOMでは、複合語の場合プロパティ名に大文字が含まれることがあります。
入力ボックスの場合はselectというメソッドがあります。引数はありません。これは、入力ボックスの文字を全て選択状態にするというものです。
チェックボックス・ラジオボタン
チェックボックスやラジオボタン（typeが"checkbox"や"radio"）の場合、checkedというプロパティを使えます。これは真偽値で、そのinputがチェックされていればtrue、されていなければfalseです。これは先程紹介したvalueプロパティと同様、現在の状態を取得します。最初の状態（もともとchecked属性で指定されていた状態）を取得するには、defaultCheckedプロパティを使います。
HTMLTextAreaElement
HTMLTextAreaElementは、textarea要素のHTMLElementで、input要素（入力ボックスの場合）と近い使い方ができます。例えば、value属性があります。
HTMLButtonElement
HTMLButtonElementは、button要素のHTMLElementで、これもinput要素（ボタンの場合）と同じように扱えます。