<button>和<input type=&q

<button>标签

<button>标签类型type可选的值

• button
  此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。比如Js指定
• submit
  此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。

<input>标签

<input>标签类型type可选的值

• button
• submit
  用于提交表单的按钮

上面的基本介绍了<button>，<input>的button,submit的特性，下面通过只管的提交表单测试。

屏幕快照 2019-07-09 下午6.31.33.png
表单
表单代码
从左至右三个提交按钮对应的HTML代码如下

    <!-- 左一按钮-->
    <input type="submit" value="提交">
    <!-- 中间按钮 -->
    <input type="button" value="提交">
    <!-- 右一按钮 -->
    <button>提交</button>

测试

• <input type="submit" value="提交">

表单输入信息如下：

屏幕快照 2019-07-09 下午8.07.32.png

点击左一提交按钮，结果如下:

屏幕快照 2019-07-09 下午8.10.10.png

• <input type="button" value="提交">

表单输入信息如下：

屏幕快照 2019-07-09 下午8.14.34.png

点击中间提交，界面不会发生任何跳转，控制台的Network也显示并没有向当前的服务器提交任何数据

屏幕快照 2019-07-09 下午8.15.57.png

• <button>提交</button>

表单输入信息如下：

屏幕快照 2019-07-09 下午8.21.03.png

点击右一按钮提交的信息如下：

屏幕快照 2019-07-09 下午8.23.53.png
①设定button的类型的值为button<button type="button">提交</button>
提交的数据如下：
屏幕快照 2019-07-09 下午8.34.51.png
提交结果如下：
屏幕快照 2019-07-09 下午8.37.08.png

② <button>提交</button>与<button type="submit">提交</button>

button的类型的值设置为submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。

总结：

1.input的类型值为submit可以点击按钮提交数据，button的值类型值为submit或是不设定值得情况下，点击按钮则都会提交比哦啊单数据。

2. 单独的按钮(不提交数据type="button")，亦或是对按钮的样式有要求的时候使用<button> 元素会更加便利。

---

参考：

MDN-input
MDN-button
<button> vs. <input type=“button” />. Which to use?

版权声明：本文为博主原创文章，未经博主许可不得转载