在HTML中,表单是由<form>元素来表示的。
取得表单的方法
var form = document.getElementById(“id1”);
var firstForm = document.forms[0]; // 取得页面中的第一个表单
var myForm = document.forms[“form2”]; //取得名为”Form2的表单”
提交表单的方法
<input type=”submit” value=”Bubmit Form”> // 通用提交按钮
<button type=”submit”>Submit Form</button> // 自定义提交按钮
<input type=”submit” src=”graphic.gif”> // 图像按钮
在 JavaScript中,以变成方式调用 submit() 方法也可以提交表单,而且,这种方式无需表单包含提交按钮,任何时候都可以正常提交表单。
var form = document.getElementById(“myForm”);
form.submit() ; // 提交 , 不会触发 submit 事件。
重置表单
在重置表单时, 所有表单字段都会恢复到页面刚刚加载完毕时的初始值.
<input type="reset" value="Reset Form"> // 通用重置按钮
<button type="reset">Reset Form</button> // 自定义重置按钮
重置表单经常会导致用户摸不着头脑, 事实上, 重置表单需求很少见.
当用户单击重置按钮时,表单会被重置。 <input type=”reset”value=”reset Form”>
<button type=”reset”>Reset Form</button>
带有默认值的也会被初始化为默认值
var form = document.getElementById(“myForm”);
form.reset() ;
表单字段
表单中可能包含很多字段, 当你提交表单时, 可能提交了多个内容, 例如<input><textarea><button><fieldset> 每个表单字段在 elements集合中的顺序, 与它们出现在标记中的顺序相同, 可以按照位置和name特性来访问它们. 例如:
var form = document.getElementById("form1"); // 通过ID, 找到 form
var field1 = form.elements[0] // 取得表单中第一个字段
var field2 = form.elements["textbox1"]; // 取得表单中 名为 textbox1 的字段
var fieldCount = form.elements.length; // 取得表单中包含字段的数量
如果多个表单控件都使用一个name(如单选按钮), 可以返回一个name 的 NodeList, 例如:
1 <form method="post" id="myForm"> 2 <ul> 3 <li><input type="radio" name="color" value="red">Red</li> 4 <li><input type="radio" name="color" value="green">green</li> 5 <li><input type="radio" name="color" value="blue">blue</li> 6 </ul> 7 </form>
1 var form = document.getElementById("myForm"); 2 3 var colorFields = form.elements["color"]; // 得到的是一个数组 NodeList 4 alert(colorFields.length); // 3 5 var firstColorField = colorFields[0]; 6 var firstFormField = form.elements[0]; 7 alert(fistColorField === firstFormField); // true
个人感觉, 要获取表单内的字段, 最好还是使用名字, 如果是顺序, 容易造成混乱.
另外, HTML5 对表单也提供了很多新的功能, 如必填字段, Email 字段 等等.