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

表单是由<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);