DOM
HTML Elements Reference
This chapter provides reference information for several specific HTMLElement interfaces.
HTMLFormElement Interface
As HTML elements, FORM elements expose all of the properties and methods described in the DOM Elements Reference chapter. They also expose the specialized interface described here.
The APIs for manipulating FORM elements described here allow you to create and fully configure FORM elements using the DOM. The following snippet gives you some idea of how you might create a new form element and equip it with some of the attributes that the form submission process requires.
f = document.createElement("form");
body.appendChild(f);
f.action = "\cgi-bin\some.cgi";
f.method = "POST"
...
f.submit(); // submit the newly-created form!
|
In addition, the following complete HTML document shows how to extract info from an existing form element and how to set some of the read/write properties on that FORM.
<html>
<head>
<title>form tests</title>
<script> function getFormInfo() {
var info = "";
ta = document.getElementById("tex");
f = document.forms["myform"];
info += "f.elements: "+f.elements+"\n";
info += "f.length: "+f.length+"\n";
info += "f.name: "+f.elements+"\n";
info += "f.acceptCharset: "+f.acceptCharset+"\n";
info += "f.action: "+f.action+"\n";
info += "f.enctype: "+f.enctype+"\n";
info += "f.encoding: "+f.encoding+"\n";
info += "f.method: "+f.method+"\n";
info += "f.target: "+f.target+"\n";
ta.setAttribute("value", info);
}
// cont'd...
|
function setFormInfo() {
f = document.forms["myform"];
f.method = "GET";
f.action = "/cgi-bin/evil_executable.cgi";
f.name = "totally_new";
// click info again to get this new data
// back from the form
}</script>
</head>
<body>
<h1>form tests</h1>
<form name="myform" id="myform" action="/cgi-bin/test" method="POST">
<input type="button" value="info" onclick="getFormInfo();"/>
<input type="button" value="set" onclick="setFormInfo();"/>
<input type="reset" value="reset"/>
<br>
<textarea id="tex"
style="min-height:300;min-width:300" />
</form>
</body>
</html>
|
Properties
| |
elements returns an array of all the form controls contained in the FORM element. |
| |
length returns the number of controls in the FORM element. |
| |
name returns the name of the current FORM element as a string. |
| |
elements returns a list of the supported character sets for the current FORM element. |
| |
action gets/sets the action of the FORM element. |
| |
enctype gets/sets the content type of the FORM element. |
| |
encoding gets/sets the content type of the FORM element. |
| |
method gets/sets the HTTP method used to submit the form. |
| |
target gets/sets the target of the action (i.e., the frame to render its output in). |
Methods
| |
submit() submits the form. |
| |
reset() resets the form to its initial state. |
