js表单

在HTML中，表单是由 <form> 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement ，因而与其他HTML元素具有相同的默认属性。

1、HTMLFormElement 也有自己独有的属性和方法：

acceptChartset：服务器能够处理的字符集，等价于 HTML 中的 accept-chartset

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

elements：表单中所有空间的集合（HTMLCollection）

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

length：表单控件的数量

method：请求类型，"post"，"get"，等价于 HTML 的 method

name：表单的名称，等价于HTML 的 name

reset()：重置表单方法

submit()：提交表单方法

target：用于发送请求和接受响应的窗口名称，等价于HTML的 target

2、获取表单元素引用

var form = document.getElementById("formId");

var forms = document.forms; // 获得页面中所有的表单

var firstForm = document.forms[0];

var form = document.forms["formName"]; // 通过form的name属性获取

3、表单事件：表单submit事件，表单reset事件

3.1 在form 中的 type类型为submit的按钮点击后会触发 submit 事件

    <form id="form1" name="form1" action="#" method="get">
        <input type="text" name="name1" id="name1">
        <input type="text" name="age1" id="age1">
        <!--<input type="submit" value="提交" id="submit">-->
    </form>
    <input type="submit" value="提交" id="submit">
      

        var form1 = document.getElementById("form1");
        var submitBtn = document.getElementById("submit");

        submitBtn.onclick = function(e){   // 点击按钮手动触发表单提交事件，需要把按钮button放在表单外

            //form1.submit();  //若是执行这行代码，表单直接提交了，不会经过submit事件

            //手动触发事件
            if(document.createEvent){
                //FIREFOX\CHROME等标准浏览器
                var evt = document.createEvent('HTMLEvents');
                evt.initEvent('submit',false,true);
                form1.dispatchEvent(evt);
            }else{
                //IE8-浏览器
                var event = document.createEventObject();
                form1.fireEvent('onsubmit',event);
            }


        };

    EventUtil.addHandler(form1,"submit",function (e) {  // 特别执行submit事件处理程序，

        // todo 可以进行一些验证等操作

        e = EventUtil.getEvent(e);
        EventUtil.preventDefault(e);

        console.log("submit");
    });

3.2 在form 中的 type类型为reset的按钮点击后会触发 reset 事件，将表单的输入框的内容恢复到初始状态

猜你喜欢