先说一下button 和input的定义:
标签定义的是一个按钮
1.在 < button > 元素内部,您可以放置任何内容,比如文本或图像。这是该元素与使用 元素创建的按钮之间的不同之处;
2、 < button > 控件提供了更为强大的功能和更丰富的内容;
3、< button > 与 < /button > 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
标签规定了用户可以在其中输入数据的输入字段
元素在 元素中使用,用来声明允许用户输入数据的 input 控件;input具体类型取决于type属性
接下来具体说明 四种按钮: <input type=“submit”/>、<input type=“button”/>、<button type=“submit”>、<button type=“button”>
一、<input type=“submit”/>:当用户单击此按钮时,表单会按标记的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的默认行为,即阻止表单数据提交(阻止页面刷新)
注意:οnsubmit=“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”>表单数据提交按钮,与<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”>普通按钮,与<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>
注意一点:
当未处于表单中时,其浏览器默认的type就是button;
而当处于表单中时,不同的浏览器对 元素的 type 属性使用不同的默认值;
因此,建议时刻为button设置type值。
总结一下:
<button type=“submit”> 和 <input type=“submit”/>用法相同,用作表单数据提交按钮,默认即会刷新页面;
<button type=“button”> 和 <input type=“button”/>的用法是一样的,均为普通按钮,默认情况不会刷新页面。