首页 / JAVASCRIPT / 在表单中button与input的区别

在表单中button与input的区别

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在表单中button与input的区别，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3317字，纯文字阅读大概需要5分钟。

内容图文

这次给大家带来在表单中button与input的区别，在表单中使用button与input的注意事项有哪些，下面就是实战案例，一起来看一下。

先说一下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>

要想在提交数据之前，先对表单数据进行检验：

当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"/> 用法相同

四、<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"/>的用法是一样的，均为普通按钮，默认情况不会刷新页面。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

jest测试react native组件的步奏是什么

javascript的隐式调用详解

JS添加元素新节点

以上就是在表单中button与input的区别的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在表单中button与input的区别全部内容，希望文章能够帮你解决在表单中button与input的区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/293941.html

来源：【匿名】