form表单提交之Enter提交

通常情况下，我们在页面上操作输入框的时候，像搜索框，登录的时候，我们一般输入完成后喜欢直接enter去获取结果，然而尴尬的是当我们在注册的时候，则不喜欢每填完一个内容就enter提交了。其实根据业务的不同需要，需要我们去判断，在这之前需要我们去了解一下浏览器的一些默认行为，以下是总结的经验，亲测，可用。

• 如果表单里只有一个type=”text”的input，不管按钮是什么type(或有无提交按钮)，回车键生效。Chrome/FX/IE均适用

<form action="http://www.baidu.com">
    <input type="text"/>
    
    <input type="button" value="提交"/>
    
    
    
    
form>

• 只要有type为submit的按钮存在，一个文本框还是多个文本框都提交,Chrome/FX/IE均适用

<form action="http://www.baidu.com">
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="submit" value="提交">
    <input type="submit" value="提交" style="display:none;">
    
    
form>

• 只要有type为submit的按钮存在，多个form时同样适用，光标在那个form表单里提交那个表单,Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="submit" value="提交" class="submit1">
    
    
form>
<form action="http://www.kugou.com/" style="border: 1px solid #ddd;padding: 20px;width: 300px;">
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="submit" value="提交" class="submit2">
form>

• 多个文本框的时候，用type为button的按钮，按enter无法进行提交,Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="button" value="提交" class="submit1">
form>

• 用button元素时，button元素不指定type时，enter默认都会提交。Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="radio" />
    <input type="checkbox" />
    <button>提交button>
form>

• 用button元素时，button元素指定type=submit时，enter默认都会提交,其他type类型按enter均不进行提交。Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="radio" />
    <input type="checkbox" />
    <button type="submit">提交button>
form>

• type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="text"/>
    br>br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="image" />
form>

以上是总结的一些form表单提交浏览器的一些默认行为，需要我们加强注意。其中关于button的使用过程中，建议我们每次都指明button的type类型，以防造成不必要的麻烦。