JavaScript プログラミング講座

 

フォームについて

 


■フォームについて


<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> 要素の機能
 
フォームは、コントロール要素の namevalue 属性値を、外部に送信できます
 
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);
}
 


 

フォームを設定する

 
 


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


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

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

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

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


ターゲットウィンドウ名を指定するには、target プロパティを使用します。
 
フォームの送受信結果は、指定したウィンドウ内で開かれます。
 
存在しないウィンドウ名を指定した場合、新しくページが開かれ、名前が割り当てられます。
 
名前以外に、以下の文字列を指定することもできます。
 
文字列 説明
"_self" 現在のウィンドウ
"_blank" 新規にウィンドウを開く
"_parent" 現在のウィンドウから1つ上(親)のウィンドウ
"_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";
 


 

フォームの送信について

 
 


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


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

■送信データを追加する

 
■「非表示なコントロール」を静的に用意する
 
「非表示なコントロール」を配置するには、<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>
 

■送信ボタンを追加する

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

<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" >送信A</button> <br>
      <button type="submit" name="name_b" value="value_b" >送信B</button> <br>
      <button type="submit" name="name_c" value="value_c" >送信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() メソッドを使用します。
 
 
フォームの送信を中止する

// ------------------------------------------------------------
// サブミット直前に実行される関数
// ------------------------------------------------------------
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>フィールドA</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>フィールドB</legend>
        <textarea name="name_b">TextArea_Value_B</textarea>
      </fieldset>
      <br>

      <fieldset name="field_c" >
        <legend>フィールドC</legend>
        <select name="name_c" size=2 >
          <option value="item_c0" >アイテム0</option>
          <option value="item_c1" >アイテム1</option>
          <option value="item_c2" >アイテム2</option>
          <option value="item_c3" >アイテム3</option>
        </select>
      </fieldset>
      <br>

      <fieldset name="field_d" >
        <legend>フィールドD</legend>
        <label><input type="radio" name="name_d" value="item_d0" >:アイテム0</label> <br>
        <label><input type="radio" name="name_d" value="item_d1" >:アイテム1</label> <br>
        <label><input type="radio" name="name_d" value="item_d2" >:アイテム2</label> <br>
        <label><input type="radio" name="name_d" value="item_d3" >:アイテム3</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>フィールドA</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>フィールドB</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>フィールドA</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>フィールドB</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 値が得られます。
 
該当する要素が1つ存在する場合は、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" であるエレメントを取得(この例では、該当する要素は1つ)
	// ------------------------------------------------------------
	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なし。