Default button behaviour in forms

Default button behaviour in forms

ยท

1 min read

This talks about what the default button behaviour is when you do not specify a type attribute on a button element.

TL;DR: Use a type attribute to avoid confusion.

Behaviour

  • Every button, when clicked, behaves as a submit button
    • The button's click handler is called
  • When the form is structured as a proper form and the user hits enter to submit the form, only the first button's click handler is triggered

form-button-behaviour.png

Code Samples

Vanilla JS

React

Vue

ย