Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How submit button works without `type="submit"`

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.) enter image description here

How does it know which button is the submit button?

like image 654
ArtixZ Avatar asked Jul 24 '20 20:07

ArtixZ


People also ask

Can a button submit without a form?

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.

How does button type submit work?

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.

Does submit need to be inside form?

Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML.

What is the difference between button and input type submit?

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).


1 Answers

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

like image 163
Luke Storry Avatar answered Oct 22 '22 08:10

Luke Storry