表单知识总结

表单是前端交互的重要部分，这里总结了我在使用表单元素时的一些经验和遇到的问题。

记得设置元素的name属性

一个我最近犯的错：input元素不设置name，以为设置了type就自动单选了，光看外表的结果自然被打脸。。。

其实如果只是单纯的DOM操作，元素的name属性看来是个可有可无的东西，其功能完全可以被id和class替代。但现在我知道了，至少对于表单元素，name还是很重要的---指定type的话只是给出个样式而已，没有相同的name怎么能标识操作一类数据的控件呢 ！当然也就不能实现其默认交互效果啦。

在表单中使用button元素

如果button元素被用在表单form中，那它就不再是个普通按钮了，要注意，由于其type属性被设置成了submit，所以此时它的行为是和<input type="submit">这个元素一致的，你一点击它就会提交表单、发送请求。

但如果我们就想让它老老实实做个按钮，或者用于实现其他的功能，而不是每次一点击就会提交表单。这时，和input元素一样，我们可以通过设置其type属性来达到目的，只不过其选项就比较少了，只有无默认行为的button和重置的reset两个值可供使用。

防止表单属性和表单元素的冲突

在表单里，每个表单元素的id或name值都可以看成form元素的一个属性，而属性的值就是具有该id或name的元素。所以我们要获得表单元素，除了经典的DOM方法外，还可以这么做：

    <form id="form">
        <button id="btn1" name="btn">btn1</button>
        <input type="button" value="btn2" name="btn" id="btn2">
    </form>
    <script type="text/javascript">
        var f = document.getElementById('form');
        console.log(f.btn1); //<button id="btn1" name="btn">btn1</button>
        console.log(f.btn2); //<input type="button" value="btn2" name="btn" id="btn2">
        console.log(f.btn);  // [button#btn1, input#btn2]
    </script>

虽然在表单里的这个设定给我们引用表单元素带来很大的方便，但如果我们要使用一些form这个DOM对象的默认属性，那我们后定义的表单元素就会覆盖原来的属性，导致调用不到！！比如下面这个例子：

    <form id="form">
        <button id="id">btn1</button>
    </form>
    <script type="text/javascript">
        var f = document.getElementById('form');
        console.log(f.id); //<button id="btn1">btn1</button>
    </script>

所以，我们如果要访问form对象的默认属性，就必须得保证我们表单元素的id或name的值不与原有的属性名冲突，否则是访问不到的。