HTML button element caveat

This is a brief note for the readers to remember that the <button> should always have type attribute specified.

From my experience, I've seen a lot of cases when <button> elements are used without specifying the type attribute (mostly when used in React components). This can lead to unexpected behavior when the button is clicked.

The default type of a <button> element is "submit". This means that if the button is inside a form, it will submit the form when clicked. This can lead to unexpected behavior if the button is not intended to submit the form.

To avoid this, always specify the type attribute on the <button> element. If the button is not intended to submit the form, use type="button".

<button type="button">Click me</button>

This will ensure that the button does not submit the form when clicked.

This behavior is documented in the MDN Web Docs as well.

type

submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value.

Hope this helps! 🚀