input submit button 傻傻分不清楚

提交按钮

在页面中表示一个按钮有多种表示方式，比如较为常见的有

<form action="xxx">
  <input type="submit" value="提交1">
  <input type="button" value="提交2">
  <button>提交3</button>
  <button type="button">提交4</button>
</form>

页面会出现四个长得一模一样的按钮，真叫人傻傻分不清楚呀。其实主要区别在于按钮点击后是否会触发表单数据向后台传送。先说结论

• input[type]为submit和button，即按钮“提交1”和“提交3”会触发表单数据传送
• input[type]为button和button[type]为button，即按钮“提交2”和“提交4”不会触发表单数据传送，仅仅只是一个能点击的按钮而已。

button

对于<button>标签，它的type值也有多种，默认type为submit,也就是说<button>提交</button>与<button type="submit">提交</button>是等价的。type可选值：

• submit:此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
• reset:此按钮重置所有组件为初始值。
• button:此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
  更多详情请查询MDN
  ).

input

input是一个空元素，没有闭合标签；而button标签内可以插入内容元素。input类型非常非常多，详细可查询MDN.
有一点需要铭记，如果想要将数据提交，别忘了一定要把按钮写在form标签内，写在外面是不起作用滴！

参考博文：https://harttle.land/2015/08/03/form-submit.html