I'm trying to understand a little of how the following html code snippet works under the hood:
<form action="/some_action" method="POST">
<input name="name">
<input name="email">
<input name="password">
<button> Sign Up</button>
</form>
I was expecting to find that button has some built-in onclick attribute that describes what it should do when it gets clicked.
I've tried inspecting the button and its respective form element with document.getElementByTagName() method and printing them to the browser's console with console.dir(), but hopelessly so far.
When the submit button is clicked, the GET request is triggered, but the button attributes and all other methods are empty strings when I inspect the document. It doesn't make sense to me. How the button does its job if it doesn't contain the information to do it?
Hope someone will help me so I can get on with my life : ]
<form>
element with anaction
attribute, the browser automatically handles the form submission process. When you click the button, the browser collects the values of all form controls (inputs
,textareas
,selects
, etc.) inside the form, then sends these values to the server specified in theaction
attribute using the HTTP method defined in themethod
attribute. you can learn more about the form element here: developer.mozilla.org/en-US/docs/Web/HTML/Element/form<button type="submit">
. The reason it still works without that type attribute is becausesubmit
is the default type for buttons.