HTML: Define the action of "enter" in a <form>

Question

I've got an HTML <form> with a few <button>s and an <input type="submit">:

<form>
    <button>first button</button>
    <button>second button</button>
    <input type="text">
    <input type="submit">
</form>

But when enter is pressed while in the text field, the "first button" is activated instead of the "submit" button.

How can I make enter trigger the "submit" button?

Answer 1

The default behavior of a <button> element is to act like a 'submit' button. Try using <button type='button'> for the non-submit buttons.