理解JavaScript表单的基础知识
HTMLFormElement继承了HTMLElement，它自己独有的属性和方法有：
- acceptCharset:服务器能够处理的字符集，等价于HTML的accept-charset特性
- action：接收请求的URL，等价于HTML中的action特性。
- elements：表单中所有控件的集合（HTMLCollection）
- enctype：请求的编码类型
- length：表单中控件的数量
- method:要发送的HTTP请求类型，通常是get或post
- name：表单的名称
- reset():将所有表单域重置为默认值
- submit():提交表单
- target:用于发送请求和接收响应的窗口名称；
取得form元素的引用可以是getElementById、也可以是document.forms中数值索引或name值；
一、提交表单
提交表单的按钮有三种：
<inputtype="submit"value="SubmitForm"> <buttontype="submint">SubmitForm</button> <inputtype="image"src="">
以上面这种方法提交表单会在浏览器请求发送给服务器之前触发submit事件，这样就可以验证表单数据和决定是否允许提交表单，如下面的代码就可以阻止表单的提交：
varform=document.getElementById("myForm");
form.addEventListener("submit",function(){
event.preventDefault();
});
另外也可以通过js脚本调用submit()方法提交表单，在调用submit()提交表单不会触发submit事件。
varform=document.getElementById("myForm");
form.submit();
第一次提交表单后如果长时间没有回应，用户会变得不耐烦，往往多次点击提交按钮，导致重复提交表单，因此应该在第一次提交表单后就禁用提交按钮或利用onsubmit事件阻止后续操作。
varsubmitBtn=document.getElementById("submitBtn");
submitBtn.onclick=function(){
//处理表格和提交等等
submitBtn.disabled=true;
};
二、重置表单
重置表单应该使用input或button：
<inputtype="reset"value="ResetForm"> <buttontype="reset">ResetForm</button>
当用户单击重置按钮重置表单时，会触发reset事件，可以在必要的时候取消重置操作：
varresetBtn=document.getElementById("resetBtn");
resetBtn.addEventListener("reset",function(){
event.preventDefault();
});
另外也可以通过js脚本调用reset()方法重置表单，在调用reset()方法重置表单时会触发reset事件。
varform=document.getElementById("myForm");
form.reset();
三、表单字段
每个表单都有一个elements属性，该属性是表单中所有表单（字段）的集合：
varform=document.forms["myForm"]; varlist=[]; //取得表单中第一个字段 varfirstName=form.elements[0]; list.push(firstName.name); //取得表单中名为lastName的字段 varlastName=form.elements["lastName"]; list.push(lastName.name); //取得表单中包含的字段的数量 varfieldCount=form.elements.length; list.push(fieldCount); console.log(list.toString());//firstName,lastName,4
多个表单控件使用一个name（单选按钮），那么会返回以该name命名的NodeList：
<formid="myForm"name="myForm"> <ul> <li><inputtype="radio"name="color"value="red">red</li> <li><inputtype="radio"name="color"value="yellow">yellow</li> <li><inputtype="radio"name="color"value="blue">blue</li> </ul> <buttontype="submint">SubmitForm</button> <buttontype="reset">ResetForm</button> </form>
name都是color，在访问elements["color"]时，返回NodeList：
varlist=[]; varform=document.forms["myForm"]; varradios=form.elements["color"]; console.log(radios.length)//3
共有的表单字段属性
- disabled:布尔值，表示当前字段是否被禁用；
- form:指向当前字段所属表单的指针：只读；
- name:当前字段的名称；
- readOnly:布尔值，表示当前字段是否只读；
- tabIndex:表示当前字段的切换（tab）序号；
- type:当前字段的类型；
- value:当前字段被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径；
可通过submit事件在提交表单后禁用提交按钮，但不可以用onclick事件，因为onclick在不同浏览器中有“时差”；
共有表单字段方法
- focus():激活字段，使其可以响应键盘事件；
- blur():失去焦点，触发；使用的场合不多；
可以在侦听页面的load事件上添加该focus()方法：
window.addEventListener("load",function(){
document.forms["myForm"].elements["lastName"].focus();
});
需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。
在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。
autofocus
如：
<inputtype="text"name="lastName"autofocus>
或者检测是否设置了该属性，没有的话再调用focus()方法：
window.addEventListener("load",function(){
varform=document.forms["myForm"];
if(form["lastName"].autofocus!==true){
form["lastName"].focus();
};
});
共有的表单字段事件
除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：
blur：当前字段失去焦点时触发；
change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
focus：当前字段获得焦点时触发；
如：
varform=document.forms["myForm"];
varfirstName=form.elements["firstName"];
firstName.addEventListener("focus",handler);
firstName.addEventListener("blur",handler);
firstName.addEventListener("change",handler);
functionhandler(){
switch(event.type){
case"focus":
if(firstName.style.backgroundColor!=="red"){
firstName.style.backgroundColor="yellow";
};
break;
case"blur":
if(event.target.value.length<1){
firstName.style.backgroundColor="red";
}else{
firstName.style.backgroundColor="";
};
break;
case"change":
if(event.target.value.length<1){
firstName.style.backgroundColor="red";
}else{
firstName.style.backgroundColor="";
};
break;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助。