DOM:form

From MDC

« Gecko DOM Reference

Contents 1 HTML Form Element Interface 2 Properties 3 Methods

[edit] HTML Form Element Interface

FORM elements share all of the properties and methods of other HTML elements described in the element section. They also have the specialized interface HTMLFormElement.

This interface provides methods to create and modify FORM elements using the DOM. The following example shows how to create a new form element, modify its attributes and submit it.

// 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();

In addition, the following complete HTML document shows how to extract information from a form element and to set some of its attributes.

<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">
  </textarea>
 </p>
</form>

[edit] Properties

form.elements 

elements returns an array of all the form controls contained in the FORM element.

form.length 

length returns the number of controls in the FORM element.

form.name 

name returns the name of the current FORM element as a string.

form.acceptCharset 

acceptCharset returns a list of the supported character sets for the current FORM element.

form.action 

action gets/sets the action of the FORM element.

form.enctype 

enctype gets/sets the content type of the FORM element.

form.encoding 

encoding gets/sets the content type of the FORM element.

form.method 

method gets/sets the HTTP method used to submit the form.

form.target 

target gets/sets the target of the action (i.e., the frame to render its output in).

[edit] Methods

form.submit 

submit() submits the form.

form.reset 

reset() resets the form to its initial state.