How do you Submit an HTML Form? How does it work?

so i wanted to give you a quick overview of what an html5 form is and how you can use it to submit data to the back end um in a general sense all the form is is a way to encapsulate a bunch of input boxes that have names and take that data package it up and send it from your browser to an endpoint so i'm going to show you that how to build it out and then also in the chrome browser kind of show you what's going on behind the scenes so you have a better understanding of the actual network request that it's making so on the left here i have an index html file and if i scaffold out a bare bones html file you can see that we have a couple of tags here we have html inside of that we have a head and a body hopefully none of this is really new to you but if you are new just know the html is built up of these different tags which you can further nest more tags inside of them so the one we're kind of curious about right here is the body the body is where you store all of your html content and the thing we're trying to build here is a form right so in html there is a tag called form let's just go ahead and declare a form here and a form by itself doesn't really do anything you need to actually have some inputs let's just pretend that we're doing like a contact us form or something and there's an input here i can do another tag in html it's called input and that input takes a couple of what we call attributes right so the most important attribute that you need is name so name is the actual like key that is going to be sent in the request to the backend so in this case we could have like a name could be a address right and then you could just go ahead and close off that input and you can see over here on the right side where i have my chrome browser running an input form popped up now i do want to say in order to get these dev tools open this is called the dev tools you can right click on the page and say inspect element or inspect and that'll pop up the dev tools this is a super important tool to understand and get used to because this is the one way that you can really dive in and debug and understand what your page is doing so we're going to be using that hopefully in this video but notice here if we expand the actual nodes this is like your element viewer and this shows you the actual contents of the page so if you go here you can see that we have a form and it has an input right so it's kind of matching one to one with what we have over here now the importance of the form is typically there is a submit button right you need a way to tell the browser hey take all the data that the user entered into the form and submit it somewhere so the second thing we typically do is we make a button and we give it a type of submit so i could just give the button some text inside of it by the way some html tags require that you actually put content inside of them so in this case the button tag takes actual text and that text is what's going to be showing up here over here on the right side of this page you see there's submit showing up cool so now we actually have a form that you can submit so let's actually kind of play around with this and see what happens when you click on submit button i'm going to type in like hello here and inside of the dev tools let's click on these arrows here and click on network i want to show you what's happening behind the scenes make sure you have preserve log on because it's actually going to do something strange it's actually going to refresh the page when i submit this so let's just go ahead and click submit and you'll notice that the page actually cleared out the input box right there's nothing in this input box anymore because what's actually happening is that the page is doing a request to a back-end and then when it gets a response back it's refreshing the page which basically clears out everything that you typed in right and let's further kind of inspect what's going on so if i open up this a little bit more so you can view what's going on you'll see that one of the requests here is for the page but you'll notice that there's like something attached to the url this is called a query string which is kind of another discussion but you see that i basically took the name of our input which or if you remember we call it address and it took the value of that input which we typed in hello and it refreshed the page and put that as a query string inside of the url so it's kind of strange right you're not really sure what you might want to use that for but it turns out that you can use this you have the back and maybe do some filtering refresh the page and show you some content so for example let's say this was a a filter on a product website right if you typed eggs and click submit you'll notice that up here actually let me um let me give you some more context instead of doing address let's change this to like filter and i'm going to go ahead and type in eggs here and click submit and you'll notice that up in the top there's a query string that says filter for eggs okay so if you don't know much about back-end processing or how this would work just think abstractly we have a way to know what the user typed in and we can change what data is returned from the back in based on the filter that they used but the the use case that i kind of want to stick to is like a contact us form because i think that makes more sense conceptually for beginners let's go back and change this back to address and let's add a couple of other fields like we'll do address we'll do a phone and i think you can say type of tell so let me let me take a step back type is another attribute you can add to inputs and this has a couple of values that you can use tell short for telephone is one you can use like um number i believe you can use text you could use email if you want like i could put one here and say input to name of email and then type is equal to email all right so now if i refresh the page we have three different input fields um and it doesn't look that clean it doesn't look that nice but again i'm just trying to show you like the mechanics of how this all works we could add some breaks here if you wanted to like clean this up a little bit or if you wanted to pull on some css and do some styling you could do that but overall we have now a contact us form and i'm just going to add a little like header here that says contact us h3 is just another html tag that you can use to basically put titles and stuff so hopefully that's not new to you right so now we have a form that has three inputs we have an address an email and a phone and it would be nice if we actually knew like what these inputs meant so another attribute you can tap you can put on to input um elements is called a placeholder a placeholder you can actually put like some type of description of what the input would be so in this case like we could add email and as they type in that placeholder is gonna get cleared out and just display what the user typed in so i'm gonna put placeholders on all of these it's not the actual best user experience you probably want to use labels but again we're trying to keep this a little bit simpler for beginners so let's just go ahead and place some placeholders email oh this one needs to be addressed my bad so address email phone so hopefully you're sticking with me at this point we have a form it just has three input fields those input fields have different names attached to them address email phone we attach some placeholder text so it shows up on the page for users so they know like what we need to type and then also we have a submit button so now let's do the same logic let's go ahead and clear out network tab by pressing this um this clear button let's click submit and look at the url here so you see here the url it might be really really small to see actually let's just type in some stuff so i'll just type in like this email is asset example.com and this is my phone let's clear this out click submit and we get a url here and let's actually inspect this url right so it's going to be kind of hard because there's not much not much real estate but i'm going to break this up into different parts and you'll see that it took the three input fields and kind of broke them down into a three-part query string so one other thing i should kind of talk about when it comes to query strings is that inside of a query string you typically have this question mark that starts the query string and then in between you have these little amber stands right so every key value pair is separated by an ampersand you see here we have address and that has the the actual physical value that they typed in we have email followed by equals and then followed by the email they typed in and then we have phone equals and then the phone number they typed in so a query string is able to combine all these key value pairs together with amber sands and another thing i should point down that's kind of strange is that spaces are actually kind of encoded with different characters right so a space has a plus in a query string and also the at symbol is encoded with a percent 40. so it's kind of strange to understand um but typically the back-end is able to process that and kind of encode it and decode it as needed to kind of get that data so just keep that in mind if you see weird things in your query string just because the browser is kind of encoding in such a way so that you can send it over to the backend and not have any issues all right so all that should hopefully make sense i mean if you don't really understand query strings it's okay you can kind of um maybe watch some other videos about query strings but the thing i kind of want to show you is that this form can actually do different types of actions right the default action is to do a get request and it's going to do it on the same url that the page is on right so in this case we're on index html so it's doing a get request to the exact same page that we're on and it's attaching a bunch of query strings but let's say on the back and you had a different route or different page that you wanted to send this data to let's say you want to send this data to like a third-party service such as form submit and they have a special endpoint that you need to send this data to so one thing that you can do is on the form itself there's another attribute called action like i do action here and you can put a url of where you want that data to be submitted to right so for an example i could do like localhost 5000 if i wanted to and that will submit the data to localhost 5000. so let me just save that and kind of type in some default values and if i click submit you'll notice down here it's actually trying to do a get request to this localhost 5000 which doesn't happen to exist but you could change this to whatever you want you could change this to like you know google.com and do a submit here and see what happens go ahead and do that i guess i need to type in a real thing all right so just keep in mind if you do a relative path like it's thinking that google.com is an actual file on this url so if you wanted to do an absolute path you'd have to do like https google.com like that let's go back and try to submit the form again and see what happens so let's go ahead and click submit and you'll notice that it actually redirected us to google okay and if you look at the query string you'll notice that it's google.com and all that data has been passed over to the google site so now google can actually process our request and do something different like so for an example i think if you were to pass a query string with like question mark q equals cats then google is actually going to do a query for cats but that's kind of out of the scope of what we're doing but let's go back to another third party service which i wanted to kind of talk about so there's a form submit.co website and they kind of tell you like here is the action here's a url that you need to submit that data to and also they tell you a method right to tell you the method has to be post so we haven't talked about what post is so let's kind of go back and talk about the method because hopefully you understand what action is action is like the url that you're pushing the data to let's change the method to post and see what happens so let me open this up let's go ahead and type in some information on this field and do that request and you'll see down here it does a request to index.html so the same kind of behavior as it did before but now if you look in the request itself you'll see that there is a request method which is set to post okay this is important if you don't know what get requests are and post requests are it's basically just a way to describe the request that the browser is making so the backend can do different operations on the request so a post request is typically used for like i'm sending you data a get request is typically for like i need to get data back from the backend um but the the main thing i'm trying to show you here is since it's a post request there's typically like a body of data that's sent over so if i scroll down to the bottom so if i click on this payload tab you'll notice that there's actually those three key value pairs inside our form data payload so this is what's being sent to the backend or sent to the server the server is going to be able to process that payload do something with it and then your page is going to refresh to whatever the backend decides to return to you that's important to understand so if we were to go back to another third-party service called form submit you'll see here that they tell you you need to make a forum that has an action that goes to their website so we kind of already learned about what an action is we can just say action is equal to this website and then the method is post so what's really happening here if i go back to my index file refresh the page if i type some information in here and go ahead and click submit this is actually doing a request to the form submit website and it's passing all that data over to them so right if i go back to post here you'll see that in the url it's going to form submit.co and the payload has our information all right so now if we actually look at this website that they redirected us to form submit has that information right they can they can process that information and do whatever they want with it and then your page is going to refresh to this form submit site but note that we didn't actually type in a correct email address here so their site kind of crashed but if i were to type in like a real email this would probably have shown something correct or like a setup page but just note that that's how a form kind of works the last thing i want to mention about forms is that typically when a form is submitted your browser tries to refresh the page okay and if you wanted to prevent that because sometimes you just want to send data over but keep the user on the same page and this is very common on single page applications like if you're working with react or vue you don't want the page to just constantly refresh because then you're going to lose all the state of the application so what a lot of people do is inside of the body or inside the html they can put a submit method so i can say const or i can say function submit and that function is going to take in an event okay so that event is going to be the form submission event and inside of this event you can say edot prevent default and that's going to prevent the form from refreshing but it's also going to prevent the data from being sent over to the back end so keep that in mind that if you need to do some type of custom axios request when someone submits the form or some type of custom javascript execution if you do eep dot prevent default it's not actually going to hit the backend and send your data you'd have to do that manually but let's actually hook that up so what i can do is on the form there's another attribute called on submit and i can just go ahead and call that submit function actually so i had to refactor the name from submit to something else because i think submit is like a special word so now i'm calling a function called run code and i'm passing the event of the submission right so we can use that down here we can say e dot prevent default and again that will prevent the form from actually refreshing but it also prevents it from actually sending the request so you actually have to do something custom here if you want to send that data over to the backend you would have to probably use axios or fetch to make a post request so you'd have to basically get all the form data yourself put it into an object and send that over to the backend if you need to do some type of custom logic here cool so that's about um i think that's about all i wanted to give you as an overview when it came to html forms i hope that made sense if there's anything that i left off be sure to let me know leave me a comment give me a thumbs up if this video has helped you understand more about forums or creating your own form and how data is kind of sent from your browser to the backend when you actually click on that submit button also be sure to subscribe if you're new to this channel because i'm gonna have other content like this that should hopefully help you become a better web developer in the future all right have a good day and happy coding

Channel: Web Dev Cody

Views: 76,408

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering, html5, html form, form submit, formsubmit.co, submit a form, beginner

Id: TCEgdiN0A8s

Length: 17min 1sec (1021 seconds)

Published: Mon Nov 22 2021