Submit buttons

A button inside a form submits the form. That is the default, even when you write no type at all.

I still write the type every time. It makes the intent clear, and it saves you from a surprise when someone moves a button into a form later:

<button type="submit">Publish</button>
<button type="button" id="preview">Preview</button>

The first button submits. The second one does nothing until JavaScript attaches a click handler to it. Without type="button", clicking Preview would submit the form, which is not what anyone wants.

Several submit buttons

One form can have more than one submit button. Give each a name and a value and they send different actions to the same endpoint:

<button type="submit" name="action" value="draft">Save draft</button>
<button type="submit" name="action" value="publish">Publish</button>

Only the button that started the submission adds its name and value to the request. Click Save draft and the body contains action=draft. Click Publish and it contains action=publish. Never both.

On the server, read action and branch on it. Then check that the current user is allowed to do that action on that record.

Be careful here. The button value is input like any other. Someone can send action=publish without ever seeing a Publish button. A hidden button is not a permission check.

Which button does Enter press?

Press Enter while typing in a text field and the browser submits the form. This is called implicit submission.

The browser acts as if you clicked the form’s default button, which is the first submit button in the markup. In the example above, Enter means Save draft. Put the buttons in the order you want, with the safe action first.

This is also why you should handle submission at the form level, not on the button click. A click handler on the button never runs when the person pressed Enter. A submit handler on the form catches both.

Avoid reset buttons

type="reset" restores every control to its initial value. One accidental click erases minutes of typing, with no undo.

Leave it out of most forms. If you truly need a “Clear form” action, label it clearly and keep it far from the submit button.

Try this on your own form: put the cursor in a text field and press Enter. Check which button’s value arrives at the server. If it’s the wrong one, reorder the buttons.