米诺zuo
米诺zuo

表单

1. 表单基础

在JavaScript中，表单对应的是HTMLFormElement类型，继承自HTMLElement。


表单_第1张图片
表单属性.png

获取form 元素的方法：

var from = document.getElementById("myform");
var form = document.forms[0];//获取页面第一个form元素
var form = document.forms[form]; //页面中名称为form的表单

1.1 提交表单

form.submit()在调用时，不会触发submit事件，因此在调用之前先验证表单数据。
提交表单是可能出现的最大问题是重复提交表单。
解决方法：在第一次提交表单后就禁用提交按钮。
利用onsubmit事件处理程序取消后续的表单提交操作。

1.2 重置表单

//1.


//2.
var form= document.forms[0];
form.reset();
//阻止表单重置 EventUtil为工具类
var form= document.forms[0];
EventUtil.addHandler(form, "reset", function(event){
      var event = EventUtil.getEvent(event);
      EventUtil.preventDefault(event);
});

与submit()方法不同，调用重置方法会像单击重置按钮一样触发reset事件。

1.3表单字段

var first = form.elements[0]; //表单中的第一个字段
form.elements["username"]; //表单中name为username的字段
form.elements.length;//form中字段的长度

当一个form 中多个字段的name相同时，使用elements["color"]，会返回一个NodeList，其中包含三个元素，如果访问elements[0]只会返回第一个元素。


    
    
        
    • 
        
    • 
        
    •
表单_第2张图片
GI`72E{_HD[TH2ZNKK{1N]0.png

1.3.1禁用表单事件

EventUtil.addHandler(form, "submit", function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      var btn = target.elements["submit-btn"];
       btn.disable = true;
});

注意：不能通过onclick事件来实现这个功能。在不同浏览器中onclick和submit的执行顺序不同。

1.3.2共用的表单字段的方法

每个字段都有两个方法：focus()和blur()方法。
HTML5 为表单新增了一个autofocus属性。

1.3.3共用的表单字段的事件

除了支持鼠标、键盘、更改和HTML事件，所有表单字段都支持下列3个事件。

  • blur:当前字段失去焦点时触发。
  • change:对于和

    在HTML中不能给