What is the default behavior when we submit an HTML form?
Hello, consider the following code:
My question is, if we let the form as it is in its default behavior, what happens when we click on the submit button?
Say I have a server running on localhost. When I press the button, am I redirected to
./submit_page or the page refresh but the data is sent to the route ./submit_page and it's the job of my server to handle the incoming data?
If we want to prevent a page redirection or page refresh, is there a particular attribute we should add on the form element or we should prevent the form default behavior using javascript, then use fetch() to send the appropriate data?26 Replies
you are not redirected
"redirected" has a special meaning
ah, we are "directed", then ?
not quite
Form submissions usually just refresh the page
they send a request and you are taken to the page in the
actionah ok, just the server needs the appropriate logic to handle the route, for eg with the url
./submit_page ?yes
or the client intercepts thw submit and does whatever
hmm say I have the form above and I click submit, do I go to
submit_page ?
I mean page refreshes to submit_page?Forms send the data to the URL in the
action attribute, but doesn't navigate to it
-# I thoughtwill just try to simulate it
wait
it does
sending is part of it
Wait, b/c it's a GET request it'll go to that page. if you want to submit only then you need
action="POST"that still takes you to the page, by the way
Then again, I've not done raw form submissions in so long I can't remember. So I guess ignore me 🤷
the only method that doesnt is
dialog
if you have a <form action="hello.html" method="post"><input type=submit></form> it will navigate you to hello.html but uses a post request where it will send the data in the body of the http requestIf we want to prevent a page redirection or page refresh, is there a particular attribute we should add on the form element or we should prevent the form default behavior using javascript, then use fetch() to send the appropriate data?Yes, if you don't want the page to refresh or navigate away you use JS to
event.preventDefault() and use fetch() to send the data.a get request does the same, but the data is part of the url, appended by
?Yeah, the form data (not to be confused with
multipart/form-data :p) is sent as query params on a GET reqthat is why you get the "resubmit form?" message when you refresh a page with a form
exactly, but you are - by default - navigating to the url in
action
in javascript, you can cancel that and do whatever you want
but, by default, without any js, you are navigating to the url
you are not being redirected: that is a whole different can of enchilada wormsjust tested it out guys, it directs me to the url in the action attribute as said earlier
multipart/form-data is something I heard, don't remember, what is it and where is it used pls, is it used in HTML itself or in the fetch() function in JS?
It's an encoding type used when sending files
it tells the browser how to format the data in the form, for the server
it's required if you want to send files
ah ok I see
it's pretty low-level stuff
if you leave it as the default, the value is
application/x-www-form-urlencoded
which is almost the equivalent of putting everything in the query string, but is sent as part of the request bodyyep I see, thanks !
you're welcome