JavaScript プログラミング講座


フォームについて（HTMLFormElement）



・フォームについて
・フォームを作成する
・フォームを設定する
・フォームの送信について
・フォームの機能について
・フォーム内のコントロール要素について

前のページに戻る

　

フォームについて

　


■フォームについて


<FORM> タグを使用すると、送信フォームを配置する事ができます。
　
<FORM> 要素の中には、コントロール要素を配置する事ができます。
　
<FORM> タグを使用して送信フォームを表示する

<html>
  <body>

    <form action="http://example.com/cgi-bin/upload.cgi" >

      <input type="text" name="name_a" value="value_a" > <br>
      <input type="text" name="name_b" value="value_b" > <br>
      <input type="text" name="name_c" value="value_c" > <br>

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

    </form>

  </body>
</html>
　
■ <FORM> 要素の機能
　
フォームは、コントロール要素の name と value 属性値を、外部に送信できます。
　
HTML のみでも実現可能です。
　
JavaScript が無効であっても送信できます。
　

■ HTMLFormElement インターフェースについて

　
HTMLFormElement インターフェースは、<FORM> タグに相当します。
　
送信フォームの機能がまとまっています。
　
■ HTMLFormElement インターフェースの派生について

HTMLFormElement インターフェースは、以下の様に派生しています。
　
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
　
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
↓派生
HTMLFormElement
　

上に戻る

　

フォームを作成する

　
フォームを作成する
フォームを表示する
フォームを取得する
　


■フォームを作成する

　
■ Document.createElement() メソッドを使用する
　
HTMLFormElement オブジェクトを作成するには、document.createElement() メソッドを使用します。
　
引数に、"form" を指定します。
　
動的に HTMLFormElement オブジェクトを作成する

// HTMLFormElement オブジェクトを作成する
var form = document.createElement("form");

// 出力テスト
console.log(form);
　

■フォームをブラウザに表示する

　
HTMLFormElement オブジェクトを、ブラウザに表示するには、任意のノードリストに登録します。
　
フォームを任意のノードリストに登録しただけでは、何も表示されません。
　
さらに、フォームのノードリストに、任意のコントロール要素を登録します。
　
フォームの子孫となったコントロール要素は、フォームの管理下に置かれます。
　
フォームを動的に作成して、ノードリストに登録する

// ------------------------------------------------------------
// HTMLFormElement オブジェクトを作成する
// ------------------------------------------------------------
var form = document.createElement("form");

// BODY のノードリストに登録する
document.body.appendChild(form);

// ------------------------------------------------------------
// HTMLInputElement オブジェクトを作成する
// ------------------------------------------------------------
var input = document.createElement("input");

// フォームのノードリストに登録する
form.appendChild(input);
　

■ HTMLFormElement オブジェクトを取得する

　
■静的な <FORM> タグから取得する
　
任意のエレメントを取得する方法は、こちらで解説しています。
　
静的な <FORM> タグから、HTMLFormElement オブジェクトを取得する

<html>
  <body>

    <form id="aaa" action="http://example.com/cgi-bin/upload.cgi" ></form>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var form = document.getElementById("aaa");

	// 出力テスト
	console.log(form);

    //-->
    </script>

  </body>
</html>
　
■ DOM ツリーに存在するフォームを、まとめて取得する
　
doucment.forms プロパティを使用します。
　
HTMLCollection オブジェクトが得られます。
　
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
　
中には、HTMLFormElement オブジェクトが格納されています。
　
DOM ツリーに存在するフォームを、まとめて取得する

// ------------------------------------------------------------
// DOM ツリーに存在するフォームを、まとめて取得する
// ------------------------------------------------------------
var form_list = document.forms;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
var i;
var num = form_list.length;
for(i=0;i < num;i++){

	// HTMLFormElement オブジェクトを取得する
	var form = form_list[i];

	// 出力テスト
	console.log(form);
}
　

上に戻る

　

フォームを設定する

　
フォームのアクセス先を設定する
ターゲットウィンドウを設定する
リクエストの「文字セット」を設定する
リクエストの「HTTP メソッド」を設定する
リクエストの「コンテンツタイプ」を設定する
　


■フォームのアクセス先を設定する


フォームのアクセス先を設定するには、action プロパティを使用します。
　
フォームのアクセス先を設定する

// ------------------------------------------------------------
// HTMLFormElement オブジェクトを作成する
// ------------------------------------------------------------
var form = document.createElement("form");

// ------------------------------------------------------------
// フォームを設定する
// ------------------------------------------------------------
// フォームのアクセス先を設定する
form.action = "http://example.com/cgi-bin/upload.cgi";
　

■ターゲットウィンドウを設定する


ターゲットウィンドウ名を指定するには、target プロパティを使用します。
　
フォームの送受信結果は、指定したウィンドウ内で開かれます。
　
存在しないウィンドウ名を指定した場合、新しくページが開かれ、名前が割り当てられます。
　
名前以外に、以下の文字列を指定することもできます。
　
文字列 説明
"_self" 現在のウィンドウ
"_blank" 新規にウィンドウを開く
"_parent" 現在のウィンドウから１つ上（親）のウィンドウ
"_top" 現在のウィンドウの最上位（ルート）のウィンドウ
　
フォームのターゲットウィンドウを設定する

// ------------------------------------------------------------
// HTMLFormElement オブジェクトを作成する
// ------------------------------------------------------------
var form = document.createElement("form");

// ------------------------------------------------------------
// フォームを設定する
// ------------------------------------------------------------
// フォームのアクセス先を設定する
form.action = "http://example.com/cgi-bin/upload.cgi";

// ターゲットウィンドウを設定する
form.target = "_blank";
　

■リクエストの「文字セット」を設定する


リクエストの文字セットを設定するには、acceptCharset プロパティを使用します。
　
この設定は、送信内容（リクエスト側）に作用します。
　
省略した場合、"UTF-8" 形式が採用されます。
　
リクエストの文字セットを Shift-JIS に変更する

// ------------------------------------------------------------
// HTMLFormElement オブジェクトを作成する
// ------------------------------------------------------------
var form = document.createElement("form");

// ------------------------------------------------------------
// フォームを設定する
// ------------------------------------------------------------
// フォームのアクセス先を設定する
form.action = "http://example.com/cgi-bin/upload.cgi";

// リクエストの文字セットを設定する
form.acceptCharset = "Shift-JIS";
　

■リクエストの「HTTP メソッド」を設定する


リクエストの HTTP メソッドを設定するには、method プロパティを使用します。
　
省略した場合、"GET" メソッドが採用されます。
　
指定可能なメソッドの種類です。
　
HTTP メソッド 説明
"get" GET メソッド。送信データを、URL 文字列に埋め込んで送信します。
"post" POST メソッド。送信データを、リクエストボディ内に格納して送信します。
　
POST メソッドに変更する

// ------------------------------------------------------------
// HTMLFormElement オブジェクトを作成する
// ------------------------------------------------------------
var form = document.createElement("form");

// ------------------------------------------------------------
// フォームを設定する
// ------------------------------------------------------------
// フォームのアクセス先を設定する
form.action = "http://example.com/cgi-bin/upload.cgi";

// リクエストの HTTP メソッドを設定する
form.method = "post";
　
■ GET メソッドを採用した場合
　
コンテンツタイプの設定は、無意味です。
　
必ず "application/x-www-form-urlencoded" となります。
　
送信データは、アクセス先 URL のクエリ引数に、自動的に埋め込まれます。
　
送信データは、Percent-Encoding 変換されます。
　

■リクエストの「コンテンツタイプ」を設定する


リクエストのコンテンツタイプを設定するには、enctype プロパティを使用します。
　
省略した場合、"application/x-www-form-urlencoded" が採用されます。
　
指定可能なコンテンツタイプの種類です。
　
コンテンツタイプ 説明
"application/x-www-form-urlencoded" 「name=value」の & 区切り形式で送信します。
"multipart/form-data" ファイルを送信する場合に指定します。
リクエストボディ内に、ファイルのバイナリ情報を含める事ができます。
POST メソッドのみ動作します。
　
ファイルアップロード用のコンテンツタイプを設定する

// ------------------------------------------------------------
// HTMLFormElement オブジェクトを作成する
// ------------------------------------------------------------
var form = document.createElement("form");

// ------------------------------------------------------------
// フォームを設定する
// ------------------------------------------------------------
// フォームのアクセス先を設定する
form.action = "http://example.com/cgi-bin/upload.cgi";

// リクエストの HTTP メソッドを設定する
form.method = "post";

// リクエストのコンテンツタイプを設定する
form.enctype = "multipart/form-data";
　

上に戻る

　

フォームの送信について

　
■フォームの送信について
■送信データを追加する
■送信データを変更する
■送信ボタンを追加する
■手動的に送信を開始する
■サブミット直前であるか監視する
　


■フォームの送信について


フォームからサブミットを行うと、送信が開始されます。
　
フォーム内のコントロール要素の name と value 属性値が、自動的に送信されます。
　
通常の場合、フォームの送信を行うと、画面の遷移が発生します。
　
アクセス先の URL ページが、新しく開かれます。
　
■ Ajax 風の送受信について
　
画面を遷移を発生させずに、Ajax のように動作させる事もできます。
　
こちらで解説しています。
　
HTML5 世代では、XMLHttpRequest と FormData を組み合わせて使用します。
　
こちらで解説しています。
　
■ブラウザを使って通信内容を確認する
　
ブラウザの開発者向けツールを使用すると、通信内容を確認する事ができます。
　
使用方法は、こちらで解説しています。
　

■送信データを追加する

　
■「非表示なコントロール」を静的に用意する
　
「非表示なコントロール」を配置するには、<input type="hidden"> 要素を使用します。
　
この要素には、コントロールが無く、何も表示されません。
　
name と value 属性値を、送信データに、追加的に含めたい場合に最適です。
　
「非表示なコントロール」を含めたフォーム

<html>
  <body>

    <form action="http://example.com/cgi-bin/upload.cgi" >

      <input type="hidden" name="name_a" value="value_a" >
      <input type="hidden" name="name_b" value="value_b" >
      <input type="hidden" name="name_c" value="value_c" >

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

    </form>

  </body>
</html>
　
■「非表示なコントロール」を動的に追加する
　
document.createElement() メソッドを使って、インプット要素を作成します。
　
引数に、"input" を指定します。
　
「非表示なコントロール」に変更するには、type プロパティに "hidden" を指定します。
　
最後に、フォーム要素の、ノードリストに登録します。
　
「非表示なコントロール」を動的に追加する

<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" >

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

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フォーム要素を取得する
	// ------------------------------------------------------------
	// "my_form" という ID 属性のエレメントを取得する
	var form = document.getElementById("my_form");

	// ------------------------------------------------------------
	// 「非表示なコントロール」を作成する
	// ------------------------------------------------------------
	// HTMLInputElement を作成する
	var hidden = document.createElement("input");

	// タイプを "hidden" に変更する
	hidden.type = "hidden";

	// 名前を設定する
	hidden.name  = "name_a";

	// 値を設定する
	hidden.value = "value_a";

	// ------------------------------------------------------------
	// フォーム要素のノードリストに登録する
	// ------------------------------------------------------------
	form.appendChild(hidden);

    //-->
    </script>

  </body>
</html>
　

■送信データを動的に変更する

　
■コントロール要素の値を変更する
　
送信予定のデータを、JavaScript から動的に変更するには、DOM 操作を行います。
　
DOM API については、こちらで解説しています。
　
フォームからコントロール要素を取得する方法については、こちらで解説しています。
　
コントロール要素の、名前を設定するには、name プロパティを使用します。
　
コントロール要素の、値を設定するには、value プロパティを使用します。
　
コントロール要素の値を動的に変更する

<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" >

      <input type="hidden" name="my_hidden_a" value="" >
      <input type="hidden" name="my_hidden_b" value="" >
      <input type="hidden" name="my_hidden_c" value="" >

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

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フォーム要素を取得する
	// ------------------------------------------------------------
	// "my_form" という ID 属性のエレメントを取得する
	var form = document.getElementById("my_form");

	// ------------------------------------------------------------
	// フォーム内の各コントロール要素を取得する（名前を指定）
	// ------------------------------------------------------------
	var hidden_a = form["my_hidden_a"];
	var hidden_b = form["my_hidden_b"];
	var hidden_c = form["my_hidden_c"];

	// ------------------------------------------------------------
	// コントロール要素の値を変更する
	// ------------------------------------------------------------
	hidden_a.value = "value_a";
	hidden_b.value = "value_b";
	hidden_c.value = "value_c";

    //-->
    </script>

  </body>
</html>
　

■送信ボタンを追加する

　
■１つのサブミット用ボタンを追加する
　
サブミット用のボタンを追加するには、<input type="submit"> 要素を使用します。
　
サブミット用のボタンを押すと、フォームの送信が開始されます。
　
１つのサブミット用ボタンを追加する

<html>
  <body>

    <form action="http://example.com/cgi-bin/upload.cgi" >

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

    </form>

  </body>
</html>
　
■複数のサブミット用ボタンを追加する（送信値付き）
　
複数のサブミット用ボタンを追加するには、<button type="submit"> 要素を使用します。
　
ボタンには、name と value 属性値を持たせる事ができます。
　
複数の送信ボタンを配置して、分岐させたい場合に便利です。
　
この場合、押したボタンの name と value 属性値のみが、送信データに含まれます。
　
Internet Explorer 7 以前では、未対応です。
　
name と value 属性値を持つ複数のサブミット用ボタンを追加する

<html>
  <body>

    <form action="http://example.com/cgi-bin/upload.cgi" >

      <button type="submit" name="name_a" value="value_a" >送信Ａ</button> <br>
      <button type="submit" name="name_b" value="value_b" >送信Ｂ</button> <br>
      <button type="submit" name="name_c" value="value_c" >送信Ｃ</button> <br>

    </form>

  </body>
</html>
　

■手動的に送信を開始する


手動的にサブミットを行うには、submit() メソッドを使用します。
　
HTMLFormElement.submit( ) :Void
引数 Voidなし。
戻り値 Voidなし。
　
■セキュリティについて
　
新規にウィンドウが作られる場合、ポップアップブロックが発生する事があります。
　
回避するには、マウスやキーボードなどの押下操作中に実行します。
　
■使用例
　
JavaScript から送信を開始する

<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" target="_self >

      <input type="hidden" name="name_a" value="value_a" >
      <input type="hidden" name="name_b" value="value_b" >
      <input type="hidden" name="name_c" value="value_c" >

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フォーム要素を取得する
	// ------------------------------------------------------------
	// "my_form" という ID 属性のエレメントを取得する
	var form = document.getElementById("my_form");

	// ------------------------------------------------------------
	// 送信を開始する
	// ------------------------------------------------------------
	form.submit();

    //-->
    </script>

  </body>
</html>
　

■サブミット直前であるか監視する


サブミット直前であるか監視するには、onsubmit イベントを使用します。
　
onsubmit イベントが発火したタイミングでは、まだ送信は開始されていません。
　
ここでフォームを変更すると、送信先や送信内容を変更することができます。
　
サブミット直前であるか監視する

<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" >

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

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フォーム要素を取得する
	// ------------------------------------------------------------
	// "my_form" という ID 属性のエレメントを取得する
	var form = document.getElementById("my_form");

	// ------------------------------------------------------------
	// サブミット直前に実行されるイベント
	// ------------------------------------------------------------
	form.onsubmit = function (e){

		alert("送信ボタンが押された");

	};

    //-->
    </script>

  </body>
</html>
　
■サブミットを無効化する（フォームの送信を中止する）
　
Event オブジェクトの、preventDefault() メソッドを使用します。
　
DOM Events 非対応環境では、false 値を返します。
　
フォームの送信を中止する

// ------------------------------------------------------------
// サブミット直前に実行される関数
// ------------------------------------------------------------
function FormSubmitFunc(e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// フォームの送信を中止する
	// ------------------------------------------------------------
	if(e.preventDefault){
		// デフォルトの動作を無効化する
		e.preventDefault();
	}else{
		// デフォルトの動作を無効化する（非標準）
		return false;
	}
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// サブミット直前に実行されるイベント
	document.addEventListener("submit" , FormSubmitFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// サブミット直前に実行されるイベント
	document.attachEvent("onsubmit" , FormSubmitFunc);

// イベントハンドラを使用する
}else{

	// サブミット直前に実行されるイベント
	document.onsubmit = FormSubmitFunc;

}
　

上に戻る

　

フォームの機能について

　


■フォームのプロパティ一覧

　
■ HTMLFormElement インターフェース
　
プロパティ名型説明
nameString自身のフォーム要素の名前を設定する。
actionStringアクセス先となる CGI の　URL アドレスを設定する。
targetStringページを開くターゲットウィンドウ名を設定する。
acceptCharsetStringリクエストの「文字セット」を設定する。
methodStringリクエストの「HTTP メソッド」を設定する。（GET、POST）
enctypeStringリクエストの「コンテンツタイプ」を設定する。
encodingStringenctype プロパティと同等。(HTML5 で標準化)
　
プロパティ名型説明
elementsHTMLCollectionフォームが保有するコントロール要素のリストが得られる。
lengthNumberフォームが保有するコントロール要素の総数が得られる。
　
■ HTML5 世代
　
プロパティ名型説明
autocompleteStringオートコンプリートの有無を設定する。（"on"、"off" など）
noValidateBoolean送信時に検証しない場合、true を指定する。
　

■フォームのメソッド一覧

　
■ HTMLFormElement インターフェース
　
メソッド名説明
reset()フォーム内のコントロール要素の値をリセットする。
submit()サブミットを実行する。
　
■ HTML5 世代
　
メソッド名説明
checkValidity()フォーム内の要素の妥当性（validity）がすべて合格の場合、true が得られる。
　

上に戻る

　

フォーム内のコントロール要素について

　
■コントロール要素について
■フォーム内のコントロール要素をすべて取得する
■名前から、任意のコントロール要素を取得する
■フォーム内をリセットする
　


■コントロール要素について


以下の要素は、フォームと関連性があります。（一部抜粋）
　
<INPUT> <BUTTON> <TEXTAREA> <SELECT> <FIELDSET> <KEYGEN>
　
コントロール要素は、単独では、入力コントロールとして機能します。
　
フォーム要素内に入れ子にすると、フォームの管理下に置かれます。
　
<FORM> 要素内に、コントロール要素を含める

<html>

  <head>
    <style type="text/css">
	label {
		display:inline-block;
		margin:2px;
		padding:2px;
		background:#eee;
	}
    </style>
  </head>

  <body>

    <form action="http://example.com/cgi-bin/upload.cgi" >

      <fieldset name="field_a" >
        <legend>フィールドＡ</legend>
        <input type="text" name="name_a0" value="value_a0" > <br>
        <input type="text" name="name_a1" value="value_a1" >
      </fieldset>
      <br>

      <fieldset name="field_b" >
        <legend>フィールドＢ</legend>
        <textarea name="name_b">TextArea_Value_B</textarea>
      </fieldset>
      <br>

      <fieldset name="field_c" >
        <legend>フィールドＣ</legend>
        <select name="name_c" size=2 >
          <option value="item_c0" >アイテム０</option>
          <option value="item_c1" >アイテム１</option>
          <option value="item_c2" >アイテム２</option>
          <option value="item_c3" >アイテム３</option>
        </select>
      </fieldset>
      <br>

      <fieldset name="field_d" >
        <legend>フィールドＤ</legend>
        <label><input type="radio" name="name_d" value="item_d0" >：アイテム０</label> <br>
        <label><input type="radio" name="name_d" value="item_d1" >：アイテム１</label> <br>
        <label><input type="radio" name="name_d" value="item_d2" >：アイテム２</label> <br>
        <label><input type="radio" name="name_d" value="item_d3" >：アイテム３</label>
      </fieldset>
      <br>

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

    </form>

  </body>
</html>
　

■フォーム内のコントロール要素をすべて取得する

　
■ elements プロパティを使用する
　
フォーム内のコントロール要素をすべて取得するには、elements プロパティを使用します。
　
HTMLCollection オブジェクトが得られます。
　
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
　
中には、コントロール要素が格納されています。
　
elements プロパティを使って、すべてのコントロール要素を取得する

<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" >

      <fieldset name="field_a" >
        <legend>フィールドＡ</legend>
        <input type="text" name="name_a0" value="value_a0" > <br>
        <input type="text" name="name_a1" value="value_a1" >
      </fieldset>
      <br>

      <fieldset name="field_b" >
        <legend>フィールドＢ</legend>
        <textarea name="name_b">TextArea_Value_B</textarea>
      </fieldset>
      <br>

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フォーム要素を取得する
	// ------------------------------------------------------------
	// "my_form" という ID 属性のエレメントを取得する
	var form = document.getElementById("my_form");

	// ------------------------------------------------------------
	// コントロール要素のリストを取得する
	// ------------------------------------------------------------
	var element_list = form.elements;

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = element_list.length;
	for(i=0;i < num;i++){

			// 要素を取得する
			var element = element_list[i];

			// 出力テスト
			console.log("index:" + i + " tag:" + element.tagName + " value:" + element.value);
	}

    //-->
    </script>

  </body>
</html>
　
■フォームから直接取得する
　
HTMLFormElement オブジェクトに対して、数値で読み取りアクセスします。
　
HTMLFormElement オブジェクトは、配列のように中身を取り出せます。
　
中には、コントロール要素が格納されています。
　
フォーム内のコントロール要素の総数を取得するには、length プロパティを使用します。
　
すべてのコントロール要素を取得する

<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" >

      <fieldset name="field_a" >
        <legend>フィールドＡ</legend>
        <input type="text" name="name_a0" value="value_a0" > <br>
        <input type="text" name="name_a1" value="value_a1" >
      </fieldset>
      <br>

      <fieldset name="field_b" >
        <legend>フィールドＢ</legend>
        <textarea name="name_b">TextArea_Value_B</textarea>
      </fieldset>
      <br>

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フォーム要素を取得する
	// ------------------------------------------------------------
	// "my_form" という ID 属性のエレメントを取得する
	var form = document.getElementById("my_form");

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = form.length;
	for(i=0;i < num;i++){

			// 要素を取得する
			var element = form[i];

			// 出力テスト
			console.log("index:" + i + " tag:" + element.tagName + " value:" + element.value);
	}

    //-->
    </script>

  </body>
</html>
　

■名前から、任意のコントロール要素を取得する

　
HTMLFormElement オブジェクトに対して、名前（name）で読み取りアクセスします。
　
■得られるデータ型について
　
以下の仕様に注意してください。
　
得られるデータは、配列ライクなオブジェクトである可能性があります。
　
該当する要素が存在しない場合は、undefined 値が得られます。
　
該当する要素が１つ存在する場合は、HTMLElement オブジェクトが直接的に得られます。
　
該当する要素が複数存在する場合は、HTMLCollection オブジェクトが得られます。
　
■ HTMLCollection について
　
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
　
中には、コントロール要素が格納されています。
　
■取得例
　
name 属性を使って、該当するコントロール要素を取得する

<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" >

      <textarea name="my_textarea" >テキストエリア</textarea> <br>

      <input type="radio" name="my_radio" value="item_a" > <br>
      <input type="radio" name="my_radio" value="item_b" > <br>
      <input type="radio" name="my_radio" value="item_c" >

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フォーム要素を取得する
	// ------------------------------------------------------------
	// "my_form" という ID 属性のエレメントを取得する
	var form = document.getElementById("my_form");

	// ------------------------------------------------------------
	// name 属性が、"my_textarea" であるエレメントを取得（この例では、該当する要素は１つ）
	// ------------------------------------------------------------
	var textarea = form["my_textarea"];

	// 出力テスト
	console.log("tag:" + textarea.tagName + " value:" + textarea.value);

	// ------------------------------------------------------------
	// name 属性が、"my_radio" であるエレメントを取得（この例では、該当する要素は複数）
	// ------------------------------------------------------------
	var radio_list = form["my_radio"];

	var i;
	var num = radio_list.length;
	for(i=0;i < num;i++){

			// 要素を取得する
			var radio = radio_list[i];

			// 出力テスト
			console.log("tag:" + radio.tagName + " value:" + radio.value);
	}

    //-->
    </script>

  </body>
</html>
　

■フォーム内をリセットする

　
フォームをリセットするには、reset() メソッドを使用します。
　
リセットすると、フォーム内のコントロール要素の value が、デフォルト値に戻ります。
　
ファイル選択コントロールは、未選択状態に戻ります。
　
HTMLFormElement.reset( ) :Void
引数 Voidなし。
戻り値 Voidなし。
　

上に戻る

　
前のページに戻る