<button>元素为何触发表单action？多按钮同效原因解析

第一个疑问：按钮为何关联到表单的action='script.php' #

你的PHP代码输出了<form method=post action='script.php'>标签，虽然你没写</form>闭合标签，但浏览器解析HTML时会自动补全表单的闭合逻辑，把后面的<button>元素纳入到这个表单范围内。

HTML里，放在<form>标签内的<button>元素，默认type属性是submit，这类按钮的默认行为就是触发所在表单的提交动作，所以点击它就会把表单提交到action指定的script.php页面。

第二个疑问：多个按钮都会触发表单提交 #

原因很简单：只要按钮在表单范围内，且没显式指定type属性，浏览器就默认把它识别为type="submit"类型的按钮，所有这类按钮点击后都会触发表单提交。

如果要实现不同按钮的差异化行为，可以参考这两种方式：

• 给不需要提交表单的按钮加type="button"，比如：<button type="button">仅点击不提交</button>，这类按钮不会触发表单提交，需要搭配JS实现自定义功能。
• 若要多个按钮都提交但执行不同逻辑，给按钮加name和value属性，比如：

  <button name="btn_action" value="say_hello">触发Hello逻辑</button>
  <button name="btn_action" value="say_world">触发World逻辑</button>
  

  然后在script.php里通过$_POST['btn_action']的值来判断执行对应的代码逻辑。

内容的提问来源于stack exchange，提问作者Fanny