html-button-type-submit-gotcha

Your form submits because buttons inside a form element default to type="submit". You must explicitly set type="button" on non-submitting UI controls like cancel or close buttons to prevent unintended form submissions.

To prevent unintended form submissions, review all buttons inside your forms and explicitly set type="button" for UI controls like close, cancel, or dismiss. Reserve type="submit" only for actual submit actions in your React components.

The default button type inside an HTML form is submit. Without an explicit type attribute, any button will trigger form submission, meaning UI controls like toggles or close buttons need type="button" to avoid this behavior.

Yes, all buttons inside a form should have an explicit type attribute. Setting type="button" for UI interactions and type="submit" for actual submissions ensures non-submitting controls do not accidentally trigger form submission behavior.

To fix unexpected form submits in HTML, add the explicit type="button" attribute to your non-submitting UI buttons. This overrides the default submit behavior and prevents actions like closing a modal from submitting the parent form.

Yes, enforcing explicit type attributes applies across HTML and React as well as other frameworks. Documenting button type patterns prevents accidental form submissions regardless of the UI library managing the form structure.