HTMLFormElement

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>

仕様書

• HTML 5, Section 4.10.3, The form Element
• DOM Level 2 HTML, Section 1.6.5, Object definitions