在HTML中,表单是由 <form> 元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement ,因而与其他HTML元素具有相同的默认属性。
1、HTMLFormElement 也有自己独有的属性和方法:
acceptChartset:服务器能够处理的字符集,等价于 HTML 中的 accept-chartset
action:接受请求的 URL ,等价于 HTML 中的 action
elements:表单中所有空间的集合(HTMLCollection)
enctype:请求编码类型,等价于 HTML 中的 enctype
length:表单控件的数量
method:请求类型,"post","get",等价于 HTML 的 method
name:表单的名称,等价于HTML 的 name
reset():重置表单方法
submit():提交表单方法
target:用于发送请求和接受响应的窗口名称,等价于HTML的 target
2、获取表单元素引用
var form = document.getElementById("formId");
var forms = document.forms; // 获得页面中所有的表单
var firstForm = document.forms[0];
var form = document.forms["formName"]; // 通过form的name属性获取
3、表单事件:表单submit事件,表单reset事件
3.1 在form 中的 type类型为submit的按钮 点击后会触发 submit 事件
<form id="form1" name="form1" action="#" method="get"> <input type="text" name="name1" id="name1"> <input type="text" name="age1" id="age1"> <!--<input type="submit" value="提交" id="submit">--> </form> <input type="submit" value="提交" id="submit"> var form1 = document.getElementById("form1"); var submitBtn = document.getElementById("submit"); submitBtn.onclick = function(e){ // 点击按钮手动触发表单提交事件,需要把按钮button放在表单外 //form1.submit(); //若是执行这行代码,表单直接提交了,不会经过submit事件 //手动触发事件 if(document.createEvent){ //FIREFOX\CHROME等标准浏览器 var evt = document.createEvent('HTMLEvents'); evt.initEvent('submit',false,true); form1.dispatchEvent(evt); }else{ //IE8-浏览器 var event = document.createEventObject(); form1.fireEvent('onsubmit',event); } }; EventUtil.addHandler(form1,"submit",function (e) { // 特别执行submit事件处理程序, // todo 可以进行一些验证等操作 e = EventUtil.getEvent(e); EventUtil.preventDefault(e); console.log("submit"); });
3.2 在form 中的 type类型为reset的按钮 点击后会触发 reset 事件,将表单的输入框的内容恢复到初始状态