Every couple of days I pick an HTML element or attribute I want to master. Two days ago I was looking into formaction and formmethod attributes. While I was testing these attributes, I realized I first needed to fully understand how to trigger a submit event using Enter. This is a write-up of my findings.

Being able to submit a <form> with Enter is a standard feature on the web. There are multiple ways to accomplish this and in this article I explore a plain HTML approach. You may think that just pressing Enter while the focus in on an <input> does it but there's a bit more to it.

There are three preconditions that need to be satisfied in order for this to work. First, an <input> type must treat Enter as a command that triggers submit event. Of all the input types, seventeen <input> types listed below handle Enter this way.

  • <input type="checkbox">
  • <input type="date">
  • <input type="datetime"> obsolete
  • <input type="datetime-local">
  • <input type="email">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Second, the <input> must be accompanied by at least one submit-triggering element listed below, unless that <input> is type="submit" or type="image".

  • <input type="submit">
  • <input type="image">
  • <button>, which by default is type="submit"

Third, those elements must be inside a <form>.

To summarize, to submit a form using Enter in plain HTML you need:

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

In the next article I explain how formaction, formmethod and similar attributes interplay with Enter-triggered <form> submissions.