HTMLFormElement

  • リビジョンの URL スラッグ: DOM/HTMLFormElement
  • リビジョンのタイトル: HTMLFormElement
  • リビジョンの ID: 329905
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{DomRef}}{{outdated}}

HTML Form Element Interface

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>

仕様書

このリビジョンのソースコード

<div>{{DomRef}}{{outdated}}</div>

<h2 id="HTML_Form_Element_Interface" name="HTML_Form_Element_Interface">HTML Form Element Interface</h2>
<p><code>FORM</code> 要素は、 <a href="/ja/DOM/element" title="ja/DOM/element">element</a> セクションで説明されている他の HTML 要素の全てのプロパティ及びメソッドを共有します。これらはまた、特化されたインターフェース <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">HTMLFormElement</a> を持ちます。</p>

<h2 id="Properties" name="Properties">プロパティ</h2>
<dl>
  <dt>
    <a href="/ja/DOM/form.elements" title="ja/DOM/form.elements">form.elements</a></dt>
  <dd>
    elements は、<code>FORM</code> 要素に含まれる全てのフォームコントロールの配列を返します。</dd>
  <dt>
    <a href="/ja/DOM/form.length" title="ja/DOM/form.length">form.length</a></dt>
  <dd>
    length は、<code>FORM</code> 要素のコントロールの数を返します。</dd>
  <dt>
    <a href="/ja/DOM/form.name" title="ja/DOM/form.name">form.name</a></dt>
  <dd>
    name は、現在の <code>FORM</code> 要素の名前を文字列で返します。</dd>
  <dt>
    <a href="/ja/DOM/form.acceptCharset" title="ja/DOM/form.acceptCharset">form.acceptCharset</a></dt>
  <dd>
    acceptCharset は、現在の <code>FORM</code> にサポートされているキャラクタセットのリストを返します。</dd>
  <dt>
    <a href="/ja/DOM/form.action" title="ja/DOM/form.action">form.action</a></dt>
  <dd>
    action は、<code>FORM</code> 要素のアクションを 取得/設定します。</dd>
  <dt>
    <a href="/ja/DOM/form.enctype" title="ja/DOM/form.enctype">form.enctype</a></dt>
  <dd>
    enctype は、現在の <code>FORM</code> 要素の content type を取得/設定します。</dd>
  <dt>
    <a href="/ja/DOM/form.encoding" title="ja/DOM/form.encoding">form.encoding</a></dt>
  <dd>
    encoding は、現在の <code>FORM</code> 要素の content type を取得/設定します。</dd>
  <dt>
    <a href="/ja/DOM/form.method" title="ja/DOM/form.method">form.method</a></dt>
  <dd>
    method は、フォームを送信するのに使う HTTP メソッドを取得/設定します。</dd>
  <dt>
    <a href="/ja/DOM/form.target" title="ja/DOM/form.target">form.target</a></dt>
  <dd>
    target は、アクションの対象(即ち、その出力を送るフレーム)を取得/設定します。</dd>
</dl>
<h2 id="Methods" name="Methods">メソッド</h2>
<dl>
  <dt>
    <a href="/ja/DOM/form.submit" title="ja/DOM/form.submit">form.submit</a></dt>
  <dd>
    submit() は、フォームを送信します。</dd>
  <dt>
    <a href="/ja/DOM/form.reset" title="ja/DOM/form.reset">form.reset</a></dt>
  <dd>
    reset() は、フォームをその初期状態にリセットします。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<p>このインターフェースは DOM を使って <code>FORM</code> 要素を作成及び変更するメソッドを提供します。次の例は、新しいフォーム要素の作成、その属性の変更及び送信の方法を見せます。</p>
<pre>
// 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();
</pre>
<p>加えて、次の完全な HTML ドキュメントは、フォーム要素からの情報の展開及びそのいくつかの属性をセットする方法を見せます。</p>
<pre>
&lt;title&gt;Form example&lt;/title&gt;
&lt;script type="text/javascript"&gt;
  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";
  }
&lt;/script&gt;

&lt;h1&gt;Form  example&lt;/h1&gt;

&lt;form name="formA" id="formA"
 action="/cgi-bin/test" method="POST"&gt;
 &lt;p&gt;Click "Info" to see information about the form.
    Click set to change settings, then info again
    to see their effect&lt;/p&gt;
 &lt;p&gt;
  &lt;input type="button" value="info"
   onclick="getFormInfo();"&gt;
  &lt;input type="button" value="set"
   onclick="setFormInfo(this.form);"&gt;
  &lt;input type="reset" value="reset"&gt;
  &lt;br&gt;
  &lt;textarea id="tex" style="height:15em; width:20em"&gt;
 &lt;/p&gt;
&lt;/form&gt;
</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#the-form-element" title="http://www.w3.org/TR/html5/forms.html#the-form-element">HTML 5, Section 4.10.3, The form Element</a></li>
  <li><a class="external" href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-40002357" title="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-40002357">DOM&nbsp;Level 2 HTML, Section 1.6.5, Object definitions</a></li>
</ul>
Revert to this revision