14.1 表单元素

 HTMLFormElement  extends HTMLElement

　　表单类型，从上面可以看出与其他HTML元素具有相同的默认属性。不过HTMLFormElement也有它自己独有的属性和方法。

acceptCharset	服务器处理的字符集
action	接受请求的url
elements	表单所有控件的集合（HTMLCollection）
enctype	请求编码类型;　等价HTML中的enctype
length	表单中控件的数量
method	要发送的HTTP请求类型，通常是 get 或 method
name	表单的名称
Function
reset()	将所有表单重置为默认值
submit()	提交表单
target	用于发送请求和接收响应的窗口名称

 

 

 

 

 

 

 

 

 

 

 

 

 

• 获取表单

方式一：

getElementById()

方式二：forms

document.forms

　　

• 提交表单　

　　第一类方式：用户单击表单按钮或图片按钮，就会提交表单。 使用input 、button 都可以定义提交按钮

　　

<!--通用-->
<input type="submit" value="Submit Form">
<!--自定义-->
<button type="submit">Submit Form</button>
<!--图像按钮-->
<input type="image" value="**.gif">

已这种方式提交的表单时，浏览器会在将请求发送服务器之前触发submit事件。这样我们就有验证表单数据，并据以决定是否允许提交表单。 阻止事件的默认行为就可以取消表单提交。

　　

    var form = document.getElementById("form");
    form.addHandler(form,"submit",function(evennt){
        //取得事件对象
        event = EventUtil.getEvent(event);
        //阻止more事件
    event.preventDefault();
    });

 

　　第二类：在JavaScript中，以编程方式调用 submit()方法也可以提交

　　　　注意：通过这种方式提交的表单，并不会触发submit事件。所以在调用该方法之前应该先对表单进行处理。

    var form = document.getElementById("form");
    var btn = document.getElementById("btn");
    EventUtil.addHandler(form,"submit",function(evennt){
        //取得事件对象
        event = EventUtil.getEvent(event);
        //阻止more事件
        event.preventDefault();
        alert("进入submit事件中");
    });
    EventUtil.addHandler(btn,"click",function(evennt){
        alert("进入执行点击");  //进入执行点击
        form.submit();
    });

　　　　给表单中一个元素添加点击事件，用调用方法的形式提交表单，只执行了click处理函数， submit处理函数并未执行。

　　★★★★★★

　　提交表单时可能出现的最大问题，就是重复提交表单。在第一个提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时可能会返回点击提交按钮。

　　解决这问题最好常用的方式：

　　　　★★★：在第一次提交表单后就禁用提交按钮。

　　　 　★★★：利用onsubmit 事件处理程序取消后续的表单提交操作。

 

• 重置表单　

　　　　重置表单就是恢复表单元素到页面刚刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；默认值则恢复默认值

　　　　与重置相关的一个事件： reset 事件，该事件与submit有点区别，不管用那种方式提交都会触发 reset事件。

    var form = document.getElementById("form");
    EventUtil.addHandler(form,"reset",function(evennt){
        //取得事件对象
        event = EventUtil.getEvent(event);
        //阻止more事件
        event.preventDefault();
        alert("进入reset事件中");
    });

 

当出现这样情况时会出现错误：不能使用关键之作为其 id  或 name 的名称

<form  id="form">
    <input value="" type="text">
    <input type="reset" id="reset" value="重置">
    <input type="submit" value="submit">
    <button type="button" id="btn">重置</button>
</form >

 

    var form = document.getElementById("form");
    var btn = document.getElementById("btn");
    EventUtil.addHandler(form,"reset",function(event){
        //取得事件对象
        event = EventUtil.getEvent(event);
        //阻止more事件
        event.preventDefault();
        alert("进入reset事件中");
    });
    EventUtil.addHandler(btn,"click",function(event){
        //alert("进入执行点击");  //进入执行点击
        form.reset()
    });

 

 

　　

• 表单字段

　　　　可以像访问页面中的元素一样，使用原生DOM方法访问表单元素。每个表单都有elements属性，该属性是表单中所有元素的集合。

　　elements集合　

　　　   是一个有序列表，其中包含着表单中的所有字段，例如 input textarea button fieldset 。 每个表单字段在elements集合中顺序,　与它们出现在标记中顺序相同，可以按照位置或name特性来访问。