先说一下button 和input的定义：
<button> 标签定义的是一个按钮
1、在 <button> 元素内部，您可以放置任何内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处；
2、 <button> 控件提供了更为强大的功能和更丰富的内容；
3、<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
<input> 标签规定了用户可以在其中输入数据的输入字段
<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件；input具体类型取决于type属性
接下来具体说明 四种按钮： <input type="submit"/>、<input type="button"/>、<button type="submit"></button>、<button type="button"></button>
一、<input type="submit"/>：当用户单击此按钮时，表单会按<form>标记的action属性设置的方式来发送表单内容。点击时，页面会刷新
<form action="#">
<input type="text" name="username"/><br/>
<input type="password" name="password"/><br/>
<input type="submit" value="登录"/>
</form>
要想在提交数据之前，先对表单数据进行检验：
<form action="#" onsubmit="return check()">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
<input type="submit" value="登录"/>
</form>
<script LANGUAGE="JavaScript">
function check(){
console.log("提交前先验证");
var checkElement=document.getElementsByTagName("input");
if(checkElement[0].value==="" || checkElement[1].value==="") {
return false;//当用户名或者密码为空时，返回false，此时表单不会提交
}
}
</script>
当check函数里返回false会阻止submit的默认行为，即阻止表单数据提交（阻止页面刷新）
注意：onsubmit="return check()" 中的 return 不能省略
二、<input type="button"/>普通按钮，必须搭配JS才有用，如onclick事件等
<form action="#" onsubmit="return check()">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
<input type="submit" value="登录"/>
<input type="button" value="提醒" onclick="remind()"/>
</form>
<script LANGUAGE="JavaScript">
function check(){
console.log("提交前先验证");
var checkElement=document.getElementsByTagName("input");
if(checkElement[0].value==="" || checkElement[1].value==="") {
return false;//当用户名或者密码为空时返回false，此时表单不会提交
}
}
function remind(){
alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}
</script>
三、<button type="submit"></button>表单数据提交按钮，与<input type="submit"/>用法相同
<form action="#" onsubmit="return check()">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
<button type="submit">登录</button>
</form>
<script LANGUAGE="JavaScript">
function check(){
console.log("提交前先验证");
var checkElement=document.getElementsByTagName("input");
if(checkElement[0].value==="" || checkElement[1].value==="") {
return false;//当用户名或者密码为空时返回false，此时表单不会提交
}
}
</script>
四、<button type="button"></button>普通按钮，与<input type="button"/>的用法是一样的
<form action="#" onsubmit="return check()">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
<button type="submit">登录</button>
<button type="button"onclick="remind()">提醒</button>
</form>
<script LANGUAGE="JavaScript">
function check(){
console.log("提交前先验证");
var checkElement=document.getElementsByTagName("input");
if(checkElement[0].value==="" || checkElement[1].value==="") {
return false;//当用户名或者密码为空时返回false，此时表单不会提交
}
}
function remind(){
alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}
</script>
注意一点：
当<button>未处于<form>表单中时，其浏览器默认的type就是button；
而当<button>处于<form>表单中时，不同的浏览器对 <button> 元素的 type 属性使用不同的默认值；
因此，建议时刻为button设置type值。
总结一下：