情報学部 菅沼ホーム 目次 索引

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　　要素名．使用例１に示すように，それらを参照するときに使用する．
  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">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>

情報学部 菅沼ホーム 目次 索引