Making the Enter key on an HTML form submit instead of activating button

html

responsive-design

event-handling

accessibility

byNikita Barsukov·Jan 18, 2025

The golden rule is to explicitly specify button types. Set your submit button to type="submit" and any other buttons to type="button". Here's a short and sweet illustration:

<form>
  <input type="text">
  <button type="submit">Submit</button> <!-- VIP (Very Important Press) -->
  <button type="button">Not Submit</button> <!-- Just a regular Joe -->
</form>

Pressing Enter within the form will prioritize form submission, thanks to these specific button types.

Dealing with multiple buttons

When dealing with multiple buttons in a form, the order of placement matters. Browsers tend to opt for the first button encountered as the default action. To ensure a smooth ride:

Front-line your submit button in your HTML code.
Make sure your syntax is squeaky clean to prevent HTML errors from crashing the party.

Using JavaScript for handling

For situations where you need the extra muscle, JavaScript can come to the rescue. You can:

Sniff out keypress events to catch the Enter key in action.
Use event.preventDefault(), the best certified party pooper, to stop your form from auto-submitting.
Trigger 'button click' events with the Enter key, like a well-trained circus monkey.

Balancing accessibility and user experience

Maintaining the fine balance between usability and accessibility is paramount. Thus:

Try to make JavaScript a "nice-to-have" rather than a "must-have". The fewer dependencies, the more accessible.
Always remember to cross-check your solution on different browsers because uniformity is next to godliness.