<button>标签
<button>
标签类型type可选的值
-
button
此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。比如Js指定 -
submit
此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。
<input>标签
<input>
标签类型type可选的值
button
-
submit
用于提交表单的按钮
上面的基本介绍了<button>
,<input>
的button
,submit
的特性,下面通过实例🌰提交表单测试。
表单
表单代码
从左至右三个提交按钮对应的HTML代码如下
<!-- 左一按钮-->
<input type="submit" value="提交">
<!-- 中间按钮 -->
<input type="button" value="提交">
<!-- 右一按钮 -->
<button>提交</button>
测试
<input type="submit" value="提交">
表单输入信息如下:
点击左一提交按钮
,结果如下:
<input type="button" value="提交">
表单输入信息如下:
点击中间提交,界面不会发生任何跳转,控制台的Network
也显示并没有向当前的服务器提交任何数据
<button>提交</button>
表单输入信息如下:
点击右一按钮提交的信息如下:
①设定
button
的类型的值为button<button type="button">提交</button>
提交的数据如下:
提交结果如下:
② <button>
提交</button>
与<button type="submit">提交</button>
button
的类型的值设置为submit
: 此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。
总结:
1.input
的类型值(type
)为submit
可以点击按钮提交数据,button
的值类型值为submit
或是不设定值得情况下,点击按钮则都会提交表单数据。
- 单独的
按钮
(不提交数据type="button"),在页面对按钮的样式
有更高要求时候使用<button>
元素会更加便利。
参考:
MDN-input
MDN-button
<button> vs. <input type=“button” />. Which to use?
版权声明:本文为博主原创文章,未经博主许可不得转载