静岡理工科大学 菅沼ホーム JavaScript 目次 索引

form オブジェクト

[機能]

  フォーム内の要素に対する様々な処理

[プロパティ]

  1. document.forms  ドキュメント中のフォームが入っている配列
  2. document.{form名 | forms[index]}.action  フォームの送信先
  3. document.{form名 | forms[index]}.elements  フォーム内の要素が入っている配列
  4. document.{form名 | forms[index]}.encoding  フォーム送信のエンコード形式
  5. document.{form名 | forms[index]}.method  フォームの送信方法
  6. document.{form名 | forms[index]}.target  フォーム送信後の表示 Window

      以下に示すフォーム内の各オブジェクト( INPUT 要素など)のプロパティは,

    document.{form名 | forms[index]}.{要素名(NAME属性の値) | elements[index]}.プロパティ

    の形で指定する.以下の説明においては,プロパティ部分だけを記述する.

  7. checked  チェックボックスまたはラジオボタンにおけるチェック状態
  8. name  要素名.使用例1に示すように,それらを参照するときに使用する.
  9. options  ポップアップメニュー(リストメニュー)の各項目が入っている配列
  10. options[index].value  ポップアップメニュー(リストメニュー)の VALUE 属性値
  11. options[index].text  ポップアップメニュー(リストメニュー)の項目
  12. options[index].selected  ポップアップメニュー(リストメニュー)におけるチェック状態
  13. type  要素の形式
  14. value  VALUE 属性値.この値がサーバに送られる.

[メソッド]

  1. document.{form名 | forms[index]}.reset()  フォームの内容をリセットする

  2. document.{form名 | forms[index]}.submit()  フォームの内容を送信する

      以下に示すフォーム内の各オブジェクト( INPUT 要素など)に対するメソッドは,

    document.{form名 | forms[index]}.{要素名(NAME属性の値) | elements[index]}.メソッド

    の形で指定する.以下の説明においては,メソッド部分だけを記述する.

  3. blur()  フォームの入力エリアからフォーカスをはずす

  4. focus()  フォームの入力エリアにフォーカスを移動する

  5. select()  フォームの入力エリアの文字を選択状態にする

[使用例]

  1. プログラム(下がそのソースコード)は,フォームエレメントのプロパティの例である.

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>form</TITLE>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
    </HEAD>
    <BODY CLASS="white">
    	<H1 STYLE="text-align: center">エレメントのプロパティ</H1>
    	<FORM ACTION="test.cgi" NAME="form1">
    		<DL>
    			<DT><LABEL>テキスト: </LABEL><INPUT TYPE="text" NAME="名前" VALUE="YS">
    			<DT>ラジオボタン:
    			<DD><INPUT TYPE="radio" NAME="sex" VALUE="Male" CHECKED> 男性<BR>
    			<DD><INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
    			<DT>チェックボックス:<BR>
    			<DD><INPUT TYPE="checkbox" NAME="fruit1" VALUE="orage"> 蜜柑<BR>
    			<DD><INPUT TYPE="checkbox" NAME="fruit2" VALUE="apple"> 林檎<BR>
    			<DD><INPUT TYPE="checkbox" NAME="fruit3" VALUE="grape"> 葡萄<BR>
    			<DT><INPUT TYPE="button" NAME="but" VALUE="ボタン">
    			<DT>ポップアップメニュー:
    			<DD><SELECT SIZE="1" NAME="pop">
    			<DD><OPTION VALUE="item1"> 秋刀魚 </OPTION>
    			<DD><OPTION VALUE="item2"> 鯵 </OPTION>
    			<DD><OPTION VALUE="item3" SELECTED> 鰯 </OPTION>
    			<DT></SELECT>
    			<DT><TEXTAREA COLS="30" ROWS="3" NAME="text_a">こんにちは</TEXTAREA>
    		</DL>
        </FORM>
    	<P>フォーム要素のプロパティ</P>
    	<SCRIPT TYPE="text/javascript">
    		document.writeln("<DL>");
    		document.writeln("<DD>送信先( action ): " + document.form1.action);
    		document.writeln("<DD>エンコード形式( encoding ): " + document.form1.encoding);
    		document.writeln("<DD>送信方法( method ): " + document.form1.method);
    		document.writeln("<DD>ターゲット( target ): " + document.form1.target);
    		document.writeln("<DD>フォーム内の要素数( target ): " + document.form1.elements.length);
    		document.writeln("</DL>");
    	</SCRIPT>
    	<P>フォーム内各要素のプロパティ</P>
    	<SCRIPT TYPE="text/javascript">
    		document.writeln("<DL>");
    		document.writeln("<DT>テキスト:");
    		document.writeln("<DD>type  " + document.form1.elements[0].type);
    		document.writeln("<DD>name  " + document.form1.elements[0].name);
    		document.writeln("<DD>value  " + document.form1.elements[0].value);
    		document.writeln("<DT>ラジオボタン:");
    		for (i1 = 1; i1 <= 2; i1++) {
    			document.writeln("<DD>No. " + i1);
    			document.writeln("<DD>  type  " + document.form1.elements[i1].type);
    			document.writeln("<DD>  name  " + document.form1.elements[i1].name);
    			document.writeln("<DD>  value  " + document.form1.elements[i1].value);
    			document.writeln("<DD>  checked  " + document.form1.elements[i1].checked);
    		}
    		document.writeln("<DT>チェックボックス:");
    		for (i1 = 3; i1 <= 5; i1++) {
    			document.writeln("<DD>No. " + (i1-2));
    			document.writeln("<DD>  type  " + document.form1.elements[i1].type);
    			document.writeln("<DD>  name  " + document.form1.elements[i1].name);
    			document.writeln("<DD>  value  " + document.form1.elements[i1].value);
    			document.writeln("<DD>  checked  " + document.form1.elements[i1].checked);
    		}
    		document.writeln("<DT>ボタン:");
    		document.writeln("<DD>type  " + document.form1.elements[6].type);
    		document.writeln("<DD>name  " + document.form1.elements[6].name);
    		document.writeln("<DD>value  " + document.form1.elements[6].value);
    		document.writeln("<DT>ポップアップメニュー(リストメニュー):");
    		document.writeln("<DD>type  " + document.form1.elements[7].type);
    		document.writeln("<DD>name  " + document.form1.elements[7].name);
    		for (i1 = 0; i1 < document.form1.elements[7].options.length; i1++) {
    			document.writeln("<DD>No. " + (i1+1));
    			document.writeln("<DD>  value  " + document.form1.elements[7].options[i1].value);
    			document.writeln("<DD>  text  " + document.form1.elements[7].options[i1].text);
    			document.writeln("<DD>  selected  " + document.form1.elements[7].options[i1].selected);
    		}
    		document.writeln("<DT>テキストエリア:");
    		document.writeln("<DD>type  " + document.form1.elements[8].type);
    		document.writeln("<DD>name  " + document.form1.elements[8].name);
    		document.writeln("<DD>value  " + document.form1.elements[8].value);
    		document.writeln("</DL>");
    	</SCRIPT>
    	<P>  上記のプログラムは,配列 elements を用いず,オブジェクト名を指定する方法でも記述できる.なお,以下の例では,フォームに対しては,配列 forms を使用している.</P>
    	<SCRIPT TYPE="text/javascript">
    		document.writeln("<DL>");
    		document.writeln("<DT>テキスト:");
    		document.writeln("<DD>type  " + document.forms[0].名前.type);
    		document.writeln("<DD>name  " + document.forms[0].名前.name);
    		document.writeln("<DD>value  " + document.forms[0].名前.value);
    		document.writeln("<DT>ラジオボタン:");
    		for (i1 = 0; i1 < document.forms[0].sex.length; i1++) {
    			document.writeln("<DD>No. " + (i1+1));
    			document.writeln("<DD>  type  " + document.forms[0].sex[i1].type);
    			document.writeln("<DD>  name  " + document.forms[0].sex[i1].name);
    			document.writeln("<DD>  value  " + document.forms[0].sex[i1].value);
    			document.writeln("<DD>  checked  " + document.forms[0].sex[i1].checked);
    		}
    		document.writeln("<DT>チェックボックス:");
    		document.writeln("<DD>No. 1");
    		document.writeln("<DD>  type  " + document.forms[0].fruit1.type);
    		document.writeln("<DD>  name  " + document.forms[0].fruit1.name);
    		document.writeln("<DD>  value  " + document.forms[0].fruit1.value);
    		document.writeln("<DD>  checked  " + document.forms[0].fruit1.checked);
    		document.writeln("<DD>No. 2");
    		document.writeln("<DD>  type  " + document.forms[0].fruit2.type);
    		document.writeln("<DD>  name  " + document.forms[0].fruit2.name);
    		document.writeln("<DD>  value  " + document.forms[0].fruit2.value);
    		document.writeln("<DD>  checked  " + document.forms[0].fruit2.checked);
    		document.writeln("<DD>No. 3");
    		document.writeln("<DD>  type  " + document.forms[0].fruit3.type);
    		document.writeln("<DD>  name  " + document.forms[0].fruit3.name);
    		document.writeln("<DD>  value  " + document.forms[0].fruit3.value);
    		document.writeln("<DD>  checked  " + document.forms[0].fruit3.checked);
    		document.writeln("<DT>ボタン:");
    		document.writeln("<DD>type  " + document.forms[0].but.type);
    		document.writeln("<DD>name  " + document.forms[0].but.name);
    		document.writeln("<DD>value  " + document.forms[0].but.value);
    		document.writeln("<DT>ポップアップメニュー(リストメニュー):");
    		document.writeln("<DD>type  " + document.forms[0].pop.type);
    		document.writeln("<DD>name  " + document.forms[0].pop.name);
    		for (i1 = 0; i1 < document.forms[0].pop.options.length; i1++) {
    			document.writeln("<DD>No. " + (i1+1));
    			document.writeln("<DD>  value  " + document.forms[0].pop.options[i1].value);
    			document.writeln("<DD>  text  " + document.forms[0].pop.options[i1].text);
    			document.writeln("<DD>  selected  " + document.forms[0].pop.options[i1].selected);
    		}
    		document.writeln("<DT>テキストエリア:");
    		document.writeln("<DD>type  " + document.forms[0].text_a.type);
    		document.writeln("<DD>name  " + document.forms[0].text_a.name);
    		document.writeln("<DD>value  " + document.forms[0].text_a.value);
    		document.writeln("</DL>");
    	</SCRIPT>
    </BODY>
    </HTML>
    			
  2. プログラム(下がそのソースコード)は,文字入力エリアへのフォーカスと文字を選択状態にする例である.

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>form</TITLE>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
    </HEAD>
    <BODY CLASS="white">
    	<H1 STYLE="text-align: center">フォーカスの移動</H1>
    	<FORM NAME="form1">
    		<P STYLE="text-align: center">
    			<INPUT TYPE="text" NAME="name" VALUE="名前">  
    			<INPUT TYPE="button" VALUE="ここへフォーカス" onClick="change(this.form,0)"><BR><BR>
    			<INPUT TYPE="text" NAME="address" VALUE="住所">  
    			<INPUT TYPE="button" VALUE="ここへフォーカス" onClick="change(this.form,1)"><BR><BR>
    		</P>
        </FORM>
    	<SCRIPT TYPE="text/javascript">
    		function change(form, sw)
    		{
    			if (sw == 0) {
    				form.name.focus();
    				form.name.select();
    			}
    			else {
    				form.address.focus();
    				form.address.select();
    			}
    		}
    	</SCRIPT>
    </BODY>
    </HTML>
    			

静岡理工科大学 菅沼ホーム JavaScript 目次 索引