When I was playing around with formaction attribute I learned something interesting about the way the attribute interacts with Enter-triggered submit events. I'm documenting my findings here to help others - and my future self - debug this undocumented behavior. Note: Everything discussed about formaction applies identically to formenctype, formmethod, formnovalidate, and formtarget attributes as well.

First, a recap from the previous article. To trigger a submit event via Enter the three ingredients listed below need to be present.

  • an Enter-able <input> element
  • an additional submit-triggering button, unless <input> is type="submit" or type="image"
  • a <form> that contains the <input> element(s)

formaction attribute allows a submit-triggering element to submit <input> values to a URL different from the one determined by the <form> element it is in. When formaction attribute isn't used, that URL is determined by the action attribute on the <form>, and if there is no action attribute then it defaults to the URL of the current page + the <input> values encoded in a search string.

Let's consider two scenarios listed below in which Enter triggers a submit event.

One submit-triggering element with formaction attribute. As expected, in this case the formaction attributes wins over <form>'s action attribute.

Multiple submit-triggering elements with formaction attribute. However, in this case it's the first formaction attribute that wins not only over the <form>'s action attribute but over other formaction attributes.