表单是前端交互的主要部分，这里总结了我在运用表单元素时的一些履历和碰到的题目。

记得设置元素的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的值不与原有的属性名争执，否则是接见不到的。