I'm checking this example in react-hook-form doc: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/index.js
Weird thing is that the button doesn't have type="submit"
. But it still triggers submit event after clicking. (Screenshot attached below.)
How does it know which button is the submit button?
So the <form> element can be anywhere else in the hypertext document, be it before or even after the button. The button must not be a descendant of the form.
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value. reset: The button resets all the controls to their initial values.
Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML.
A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).
If a button
is inside a form
, then by default it is given the submit
type, unless you give it another type.
So the Reset button in that codesandbox has type="button"
to prevent it triggering the event, but the Submit button leaves it blank, so it submits by default.
Reference: Moz Docs
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With