表单脚本学习笔记（表单基础）

表单是由

<form>

元素来表示的，而在Javascript中，表单对应的时HTMLFormElement类型的，继承自HTMLElement，保留了原有的属性，也有自己独特的属性和方法

acceptCharset：服务器能够处理的字符集，等价域HTML的accept-charset特性

action：接受请求中的URL；等价于HTML中的action

elements：表单中所有的控件集合。

enctype：请求的编码类型；等价于HTML中的enctype

length：控件数量

method：发送的HTTP请求的方式，就是我们所说的get和post；

name：表单名称。

reset()：将表单设置为默认值。

submit()：将表单提交

target：用于发送请求和接收请求的窗口名称

DOM提供给了我们一种

document.forms

的方法可以让我们提取到页面中所有的表单，并且根据索引值或者name值来取得特定的表单。

//取得第一个表单
var form=document.forms[0];
//取得名字为submitText的表单
var formSub=document.forms["submitText"];

很多时候后我们提交数据的时候，页面会帮助我们自动刷新，或者服务器响应过久并没有答复。这个时候就要通过事件来解决这些问题

//HTML部分
<form>
<input type="submit" name="submit-type" value="提交" id="sub">
</form>
//阻止页面刷新，还可以验证表单
var form=document.getElementsByTagName("form")[0];
var list=form.elements["chose"];
console.log(list.length);
var sub=document.getElementById("sub")
sub.addEventListener("click",function(){
var event=event?event:window.event;
var target=event.target||event.srcElement
// console.log(target.name);
event.preventDefault();
if (sub.name=="submit-type") {
console.log(sub.name);
form.submit;
}else{
console.log("wrong")
// form.submit()
}
},false)
//阻止多次提交表单，这里使用了事件中定义的EventUtil对象
var form=document.getElementsByTagName("form")[0];
EventUtil.addHandler(form,"submit",function(){
event=EventUtil.getEvent();
target=EventUtil.getTarget();
var btn=document.getElementById("sub");
btn.disabled=true;
})

在某些浏览器中我们不能够通过

onclick

来实现第二个例子的功能，原因是因为某些浏览器在提交表单的时候会先触发click事件，再触发submit事件，导致表单永远都无法提交出去。所以这里type是submit。

优化表单选择

表单提供给了我们一个select()方法，在调用select方法的时候，会选择到文本框中的所有文本。在调用select()方法时，大多数浏览器都会将焦点设置在文本框中。这个方法不接受任何参数，可以在任何时候被调用。

var inp=document.getElementsByTagName("input")[0];
inp.addEventListener("focus",function(event){
event=event?event:window.event;
var target=event.target||event.srcElement;
target.select()
},false);