DOM表单元素获取和事件，HTMLCollection 对象

目录

表单元素的获取

表单元素的事件

表单事件form

 onsubmit:提交事件

 onreset:重置事件

 表单元素事件  input

 onfocus:获取焦点

 onblur：失去焦点

 onchange：事件

oninput:输出的时候实时触发  在IE8及以下不会触发但是不会报错 IE独有的 onpropertychange 

HTMLCollection 对象

HTMLCollection 对象 length 属性

---

表单元素的获取

• 语法：form.name值;

• 返回值：单个name值获取到具体的元素，多个name值获取到一个集合

  <form action="" id="form">
        <p>请输入用户名：<input type="text" name="user"></p>
        <p>请输入密码：<input type="password" name="password"></p>
        <p>请选择性别：<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" checked value="女">女</p>
        <p>请选择爱好：
            <input type="checkbox" name='habby'>干饭
            <input type="checkbox" name='habby'> 睡觉
            <input type="checkbox" name='habby'> 打呼
            <input type="checkbox" name='habby'> 磨牙
            <input type="checkbox" name='habby'> 梦游
            <input type="checkbox" name='habby'> 做梦
        </p>
    </form>
    <script>
        var form = document.querySelector("form");

        // form.name值;
        console.log(form.user);//<input type="text" name="user">
        console.log(form.password);//<input type="password" name="password">
        console.log(form.sex); //RadioNodeList(2) [input, input, value: '女']
        console.log(form.habby);//RadioNodeList(6) [input, input, input, input, input, input, value: ""]