表单处理

1.获取表单方法

document.getElementById('myform')

document.getElementsByTagName('form')[0]

document.forms[0]

document.forms['yourform']   // 使用form的名称下标获取元素

document.yourForm  // 使用name名称直接获取元素

PS: submit事件，用传统的方式： object.onsubmit = function(){}

问题： submit事件，为什么要用form对象来触发呢？为什么不能是input中的sub按钮来触发呢？

　　答： 把submit事件注册到input中的submit按钮，是无法出发到submit事件的，必须把submit事件绑定到form对象上，才可以触发submit事件，只不过是触发submit事件的流畅是点击input中的submit按钮而已

submit()方法可以让非submit按钮进行提交，但是对象一定是form

<form id="myForm" name="yourFrom">
        <input type="text" name="user" value="123">
        <input type="button"  value="提交" id="btn">
    </form>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var fm = document.getElementById('myForm');
        btn.onclick = function(){
            fm.submit();
        }
    </script>

2.表单控件获取

 

    <form id="myForm" name="yourFrom">
        <input type="text" name="user" value="123">
        <input type="button"  value="提交" id="btn" >
    </form>
    <script type="text/javascript">
        var fm = document.getElementById('myForm');
        console.log(fm[0])   // 向下兼容，不推荐
        console.log(fm.length)   // 向下兼容，不推荐
        console.log(fm.elements)   // 表单空间集合 HtmlCollection
        console.log(fm.elements.length)  // 推荐
        console.log(fm.elements[0])   // HTMLInputElement
        console.log(fm.elements['user'])
    </script>

 3.选择框脚本

添加选项

<form id="myForm" name="yourFrom">
        <select name="city" multiple = 'multiple'>
            <option value="上海">上海</option>
            <option>无</option>

        </select>
    </form>
    <script type="text/javascript">
    var city = document.getElementsByName('city')[0];
    // DOM添加
        // var option = document.createElement('option');
        // option.appendChild(document.createTextNode('北京 t'));
        // option.setAttribute('value','北京 t');
        // city.appendChild(option);
    // 使用option构造函数添加
        var option = new Option('北京t','北京v');
        // city.appendChild(option);  // IE不支持
        city.add(option, undefined)  // 最佳兼容方案，如果把undefined换成数字或者null都会产生浏览器不兼容
　　　　　// city.remove(0)   // 删除第0个元素

单选框和复选框：

判断checked = true 就行