Submit Button outside Form

HTML

在一个表单中敲击回车按钮,默认会触发 <form> 的 submit 事件。当 <form> 里面有 <button type="submit"> 按钮的时候,敲击回车会先触发 button 的 click 事件,再触发 form 的 submit 事件。

因为有了这样的机制,在一个表单中,只要指定了 submit 按钮,那么不论是点击按钮还是直接按回车,都可以触发相同的 click 事件,达到同样的代码提交功能。这使得代码可以很容易的复用,不需要额外的工作量就可以让鼠标和键盘都能够方便的提交表单。

然而在实际开发的过程中,因为组件的划分,有时候不能做到 <button type="submit"> 放在 <form> 中。HTML5 中,增加了 buttonform 属性,可以用于关联表单和表单外的提交按钮。

举例如下:

<form id="form-id">
  <input type="text" name="name" />
</form>

<button type="submit" form="form-id">Submit</button>

在上述代码中,button 存在于 form 的外面,理论上和 form 是没有关联的。但是,因为 form 字段的存在,使得 form 和 button 被关联了起来。这样,和 button 在 form 中的表现形式一样,在 form 内敲击回车,就可以触发 button 的 click 事件。

注:如果 click 事件和 submit 事件(如果定义了)都没有 event.preventDefault(),那么就会触发默认的 form 提交流程,会造成页面提交。如果 form 没有指定提交的地址,那么就会提交到当前页面。这可能并不是预期中的行为。