结论：
1 建议使用button[type=submit]来提交表单，而不是input；
2 只有单行文本控件时，回车会引发表单提交；
3 通过onsubmit事件可阻止表单提交
表单提交方式
input[type=submit] 或input[type=image]
<form method="get" action="./menut.html" id="form">
<input name='key'>
</input value='ok' type='submit'>
</form>
点击提交按钮可以提交
但是有个问题，如果给<input type="submit" name="btn"/>,提交后的结果为：
Paste_Image.png
注意其中form的URL为./menut.html?key=123&btn=ok. 作为按钮的input控件同时被当做一个表单输入提交给了服务器。那么这个提交按钮到手是交互控件还是数据控件呢？定位是有些不清晰。再加上它的样式难以定制，不可作为其他标签的容器，所以建议不要用input作为表单提交按钮。
button[type=submit]
button的语义很明确，就是一个按钮，不包含数据，作用就是用户交互。但它也有type和value属性。type的默认值是submit(IE下是button),所以点击一个button会提交表单
<form method="get" action="">
<input name='key'>
<button type="submit">确定</button>
//最好还是加上type="submit",因为在IE浏览器中button的type默认是button,这意味着它只是一个按钮而不会提交表单
</form>
不幸的是，button居然和input[type=submit]一样，可以设置name和value.提交表单时，value也会被作为表单数据提交给服务器。相比较而言，还是建议用button作为交互用的按钮，来提交表单。同时请注意设置type=submit来兼容IE
Enter键提交表单
Enter键是可以提交表单的！分为两种情况：
1 单行文本控件（指的是type为text 而非textarea）回车可以提交表单。
2 只要表单中存在以下列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交表单（textarea 是个例外）。如果表单中没有提交按钮，按回车键就不会提交表单。
<input type="submit" value="ok">
<button type="submit"></button>
<input type="image" src="1.png">
通过form.submit()提交表单
<form method="get" action="">
<input name="name" type="text" >
<button type="button" value="ok" onclick="A()">
</form>
function A () {
if(){
return false;
}else {
document.forms[0].submit();
}
}
阻止表单提交
1 在表单中加上onsubmit = "return false;" 可以阻止表单提交。
<script>
function submitFun(){
//逻辑判断
return true; //允许表单提交
//逻辑判断
return false;//不允许表单提交
}
</script>
<form onsubmit="return submitFun();"> //注意此处不能写成 onsubmit="submitFun();"否则将表单总是提交
</form>
form表单中陷阱
描述：最近遇到一次处理form数据的过滤，采用了button的onclick事件来检查，发现return false后表单仍然提交了
仔细研究了下onclick, onsubmit, submit集合函数之间的关系和区别
<form action="#" method="POST" name="A" onsubmit="return X();">
<input type="text" value="" />
<input onclick="Y()" type="submit" value="提交"/>
</form>
自己写了X(),Y()函数，我们会发现，这几个函数的执行顺序
1） onclick: Y();
2) onsubmit: X();
3) submit();
也就是说：
只要onclick 未return false 那么就继续执行onsubmit
只要onsubmit未return false那么表单就被提交出去了
正确写法
<input type="submit" onclick="return X()">
//X()返回false后，form的submit会被终止
错误写法
<input type="submit" onclick="X()">
//X()返回false后，form的submit会继续
网友评论