button 和input 的区别及在表单form中的用法
2018-06-24 02:19:48来源:未知 阅读 ()
先说一下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值。
总结一下:
-
<button type="submit"></button> 和 <input type="submit"/>用法相同,用作表单数据提交按钮,默认即会刷新页面;
-
<button type="button"></button> 和 <input type="button"/>的用法是一样的,均为普通按钮,默认情况不会刷新页面。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- HTML 5的革新——语义化标签section和article的区别 2020-06-01
- 前端开发和后端开发的区别?这两者哪个更累? 2020-05-22
- XHTML?它与 HTML的区别?如何转换 2020-03-31
- 常见form表单5种input输入类型 2020-03-29
- CSS3--3种隐藏元素方法的区别 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash