input submit button 傻傻分不清楚
2019-03-24 本文已影响3人
kiterumer
提交按钮
在页面中表示一个按钮有多种表示方式，比如较为常见的有
<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标签内，写在外面是不起作用滴！
