语法:
var collection =document.forms
例子:
得到form信息 和从form里面得到元素信息
<!DOCTYPE html>
<html lang="en">
<head>
<title>document.forms example</title>
</head>
<body>
<form id="robby">
<input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
</form>
<form id="dave">
<input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
</form>
<form id="paul">
<input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
</form>
</body>
</html>
var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
属性:
.acceptCharset
.action
.name
.target
.submit()
.reset()
例子:
创建一个新的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();
get and set form的属性
<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>
popup 一个 form 表单
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
function popupSend (oFormElement) {
if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") {
alert("This script supports the GET method only.");
return;
}
var oField, sFieldType, nFile, sSearch = "";
for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
oField = oFormElement.elements[nItem];
if (!oField.hasAttribute("name")) { continue; }
sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
if (sFieldType === "FILE") {
for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
} else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
}
}
open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
}
</script>
</head>
<body>
<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;">
<p>First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
Password: <input type="password" name="pwd" /><br />
<input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p>
<p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" />I have a car</p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>