document.forms

来源：互联网发布：qq三国桃园第一js蘑菇编辑：程序博客网时间：2024/06/05 20:31

语法：

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 formvar f = document.createElement("form");// Add it to the document bodydocument.body.appendChild(f);// Add action and method attributesf.action = "/cgi-bin/some.cgi";f.method = "POST"// Call the form's submit methodf.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>

0 0