Form表单三种提交按钮的区别？

1.<input type='button' id='btn' onclick='check()' value="提交">

　　说明：只是普通的按钮(不附带提交功能)，不会触发form表单的submit()事件，所以点击后不会提交表单

好处：可加入js验证，验证后若想提交可使用 document.Formname.submit()  -->js 提交函数，进行提交  Formname 为表单的name名字

　　　　　若不加载提交，利用Ajax获取数据，可实现页面不刷新，文本框内容保留

<form  action='test.php' method="post" name="Form">
手机号<input type="text" name="phone">
<input type='button' id='btn'  value="提交" onclick='check()'>
 </form>

function check(){
js判断
document.Formname.submit(); 判断后提交 Formname 为form的name   document.getElementById("id").submit();也可获取，获取到form表单即可 id为form表单 id

}

2.<input type="submit" id='btn'  value="提交" onclick='return check()'>

　　说明：提交按钮，点击后会触发form的onsubmit事件 提交数据实现页面跳转，进行表单处理

　　若想使用js验证，可在form onsubmit事件里进行返回值判定，若返回false 表单不提交 若返回ture 表单提交

<form  action='test.php' method="post" name="Form" onsubmit="return check()">   若不加return 函数返回值，则会始终提交
手机号<input type="text" name="phone">
<input type="submit" id='btn'  value="提交" >
</form>

　　也可在按钮里面加上判断函数

<form  action='test.php' method="post" name="Form" >   若不加return 函数返回值，则会始终提交
手机号<input type="text" name="phone">
<input type="submit" id='btn'  value="提交" onclick="return check()" >
</form>
function check(){

return confirm('Yes or no!');

}

3.<button></button>按钮 同 <input type="submit" id='btn'  value="提交" >按钮效果一样