警告: この記事の内容は古くなっている可能性があります。
HTMLFormElement インターフェース
FORM 要素は、 element セクションで説明されている他の HTML 要素の全てのプロパティ及びメソッドを共有します。これらはまた、特化されたインターフェース HTMLFormElement を持ちます。
プロパティ
- form.elements
-
elements は、
FORM要素に含まれる全てのフォームコントロールの配列を返します。 - form.length
-
length は、
FORM要素のコントロールの数を返します。 - form.name
-
name は、現在の
FORM要素の名前を文字列で返します。 - form.acceptCharset
-
acceptCharset は、現在の
FORMにサポートされているキャラクタセットのリストを返します。 - form.action
-
action は、
FORM要素のアクションを 取得／設定します。 - form.enctype
-
enctype は、現在の
FORM要素の content type を取得／設定します。 - form.encoding
-
encoding は、現在の
FORM要素の content type を取得／設定します。 - form.method
- method は、フォームを送信するのに使う HTTP メソッドを取得／設定します。
- form.target
- target は、アクションの対象(即ち、その出力を送るフレーム)を取得／設定します。
メソッド
- form.submit
- submit() は、フォームを送信します。
- form.reset
- reset() は、フォームをその初期状態にリセットします。
例
このインターフェースは DOM を使って FORM 要素を作成及び変更するメソッドを提供します。次の例は、新しいフォーム要素の作成、その属性の変更及び送信の方法を見せます。
// Create a form
var f = document.createElement("form");
// Add it to the document body
document.body.appendChild(f);
// Add action and method attributes
f.action = "/cgi-bin/some.cgi";
f.method = "POST"
// Call the form's submit method
f.submit();
加えて、次の完全な HTML ドキュメントは、フォーム要素からの情報の展開及びそのいくつかの属性をセットする方法を見せます。
<title>Form example</title>
<script type="text/javascript">
function getFormInfo() {
var info;
// Get a reference using the forms collection
var f = document.forms["formA"];
info = "f.elements: " + f.elements + "\n"
+ "f.length: " + f.length + "\n"
+ "f.name: " + f.name + "\n"
+ "f.acceptCharset: " + f.acceptCharset + "\n"
+ "f.action: " + f.action + "\n"
+ "f.enctype: " + f.enctype + "\n"
+ "f.encoding: " + f.encoding + "\n"
+ "f.method: " + f.method + "\n"
+ "f.target: " + f.target;
document.forms["formA"].elements['tex'].value = info;
}
// A reference to the form is passed from the
// button's onclick attribute using 'this.form'
function setFormInfo(f) {
f.method = "GET";
f.action = "/cgi-bin/evil_executable.cgi";
f.name = "totally_new";
}
</script>
<h1>Form example</h1>
<form name="formA" id="formA"
action="/cgi-bin/test" method="POST">
<p>Click "Info" to see information about the form.
Click set to change settings, then info again
to see their effect</p>
<p>
<input type="button" value="info"
onclick="getFormInfo();">
<input type="button" value="set"
onclick="setFormInfo(this.form);">
<input type="reset" value="reset">
<br>
<textarea id="tex" style="height:15em; width:20em">
</p>
</form>