Learn HTML Forms In 25 Minutes

information is key which is why forms are one of the most important parts of a website in today's video I'm going to show you everything you need to know about how to create forms and elements inside of those forms and if you're new around here make sure to subscribe for more videos where I simplified the web for you let's get started now to get started with forms let's build one of the most common types of forms which is a login form to do that we first need to create a page to load it on so we're just create a page called index.html and in here if you're envious code or you're using Emmet if you just type exclamation point and hit enter it'll generate all the boilerplate code you need for a basic HTML page we could just change the title here to form because this is going to be demonstrated in forms now to use a form the first thing you need to do is open up a form tag so you can just type in here form close it off and this is going to be a form tag in all the inputs that you put inside of this form are going to be submitted to wherever your form goes to by default if you just leave your form tag blank like this it's going to submit to the page that you're currently on so in a study here let's put our different inputs so we can use the input element which is going to allow us to input into our page from our user and what we want to do is we want an input element and this one's going to be the name and the thing with input elements is they don't actually need to be closed because they don't actually allow you to specify anything inside of the tags there are self closing tags so if we want to add a label to our input we need to do is we need to use what's called a label element so let's have our first one beat our user name so what you're going to put a name here and we can just copy this down because we're going to need a second one which is going to be for our password so we can type and password here and now we're almost complete with the basics of our form but we need some way to submit our form so we're going to create a button to do that so let's just create a button here and we're just going to call this submit for the text of our button now to actually test this page we can just right click and open with live server which is an extension from Visual Studio code that you can download once we have that open we can see over here that if we expand this a little bit we have our name field we have our password field and we have our submit button and right now they're all clobbered onto the same line so let's use some divs which is just another basic tag which will allow us to separate these onto multiple lines so if we put some code inside of this div it's going to end up on the next line and we can do the exact same thing down here with our password let's create another div to wrap our password element in oops copy this paste it in there and when we save you see it populates over here on new lines now we can enter name information password information and click Submit and you'll see it'll submit it to the page that we're already on but while technically this does work it's not at all you want to build forms in actuality almost always when you build the form you're going to want your form to submit somewhere other than the page that you're currently on so in order to do that we have a keyword here in attribute which is called action and the action is going to be where your form is submitting to and in our case we're just going to create a page here which is called results HTML and this is going to be where we want our form to submit to the next thing that you almost always are going to specify on a form is the method you want your form to use and this is either going to be get or a post with a get request it's going to append things to the URL and it's going to send it to another page in your site while the post is going to be useful for when you have a server where you need to save some information if for example we were to use post here so if we change this to post and we try to submit something you see that we're immediately going to get an error because browsers can't render post requests they can only render get requests and we don't have a server so what we need to do is we need to use a get request here instead of a post request and now this is going to work as soon as we create our actual page so let's create that results HTML page and I'm actually just going to copy over here it results HTML page this is a very basic page all it has is a link that goes back to our form and it has a little bit of JavaScript which is going to render the results from our HTML form from before so now let's go back over here refresh our page and we want to just make sure we click Submit and you'll see that nothing is being shown up for our form fields but we do have that button to go back and the reason nothing is showing up for our form fields is because in order for an input to actually show up as a form what we need to do is we need to specify the name for that input so let's do that now the name here is just going to be a name for this first one because we just want it to be whatever we're submitting to our form so we're gonna use this as name and down here for our password we're gonna set the name of this one equal to password now if we say bet and come over here and we type in for example a username and we type in a password let's just say that's that and we click Submit you'll see name is set to username and password is set to password if you can see in the URL it's setting those parameters here name equals user name and password equals password and that's what a get request does is it sets it in the URL here while if we did the post request here this is actually going to set it in the body so if we refresh this enter in some information and click Submit again we're going to get that error because we don't have a server accepting any requests so you need a server if you're going to use post so for the rest of this example we're going to be using git for all of our different requests so now with that out of the way we have our form set up properly we have our inputs with actual names so that we can use these and render them later when we submit our form but our labels aren't actually doing anything very useful because normally if you click on a label it should actually highlight the field that's being labeled for this is really helpful for not only users but also for screen readers in order to do this we just need a set of four attribute here and we said it's the idea the element that we want to highlight whenever we click on the label so in our case we're gonna say name and then we need to give our element here that ID which is just going to be named now if we click on our label it's actually going to highlight the input element that that label is for another way that you can do this is if you don't want to have that four attribute you can actually nest your element inside the label so if we come in here and we wrap our label around our input element so we have both our password string and our input element inside of the label now when we click the label you see it's going to highlight that password field for us almost always you're going to see people use the for attribute instead of wrapping inside of it just because it's cleaner and easier to style but just so you know that you can do this and a lot of people do this when it comes to checkboxes and radio buttons which we're going to get to later in this tutorial and speaking of different types of input elements one thing you only knows is that our input here does not have any type specified for it which is why it's defaulting to a text input here but you always want to be explicit in what type of input you're using so you always want to specify a type field and the input tag is very versatile because you can have many many different types of inputs but in our example we just want to have a text input here for the name but for the password normally when you're on a website when you type in your password it's actually hidden and that's because there's a type which is called password which actually by default hides the characters for you so now if we save this and we enter our username you see it works just fine when we enter a password you see it's hiding our characters for us and that's because we're using type of password for our input element and lastly the only thing left to make this login form correct is that we need to change our button down here because we want this to be a submit button so we can just come in here we can type in the type of submit and what this says is this as it's going to submit our form and when we hit enter for example anywhere our form so if I type in something here and I click the enter key it's also going to submit our form which is why having type submit' on your button is really useful and it also allows you to have other buttons in your form that don't necessarily submit your form because this one right here is submitting it since it has the type of submit another type of button that's really useful and really under no one is going to be a button with a type of reset and if we just set that here we're just going to set the text here to reset and we go back to our form and we just type in some text if we click reset it sets everything back to its defaults and as you can see our defaults for us are just going to be completely blank but what happens if for example you want to default the field for the user let's say you already know what the user name is for that user and you want to set that by default that's where the value property is going to come in so you just type in a value and anything you set in here is going to be the default value for that property so let's set the default here to just be user now when we refresh our page you see the user is being the defaulted name and the best part is is if we change this and click reset it goes back to the default value we have set in our code for the HTML another thing that's really useful is to have a placeholder value for example if we have this user's name here let's say that we don't actually know what their name is but we want to put in a placeholder this is just something that's going to show up to kind of let the user know a little bit more information about what they want to put in here so we're gonna say our place while there is just user name and as you can see it fills that in in a lightish grade text and as soon as the user typed something else it completely removes the placeholder and if they remove everything it goes back to having that placeholder just to reiterate a little bit on the points that we touched on a placeholder is really useful for when you want to give a little bit more information to your user while value that you set so for example we change this here to value this is really useful if you already know what the value is or you want to default this as something that is going to be submitted with your form because if we click Submit it submits that user name value but if we change this to be placeholder for example instead and we click submit it does not submit the placeholder only the value another thing you'll notice is that we're able to submit a blank name and a blank password which in a login form you would want to throw some kind of error to the user telling them they can't submit blank information and luckily this is really easy to do there's an attribute which is called required and this is required attribute is or seeing the user to actually enter this information let's remove this placeholder so it's a little easier to see and if we save it and click Submit you'll see that we get an error that says please fill out this field and if we fill it out and click Submit now it'll let it go through so we want to add that required attribute to both our password and to our name field here so now they even if they enter just a name no password it's still going to give them that error until they enter that password as well now as I mentioned earlier in this video the input element here has many many different types that it can be so let's go through and analyze some of the different types that we have by starting with one of the most common types which is going to be the email type let's create another div here this Dib is going to be used to ask for the email so we're gonna have a label we're gonna use for email and in here we're just going to put email as the label and then we're gonna create another input and this is going to have a type here of email and this is going to verify email addresses for us by default let's make sure we set the name to email so we can use it when we submit it and we also need the ID here to match what we set for our for so we're going to use email in there and let's just make it required because we always want our user to send an email now if we say that you see our email field is showing up here and if we type in something for example I was typing everything and we click Submit you see that it says to please actually make sure that this is a valid email address so by default our browser is doing email validation for us now it's not the greatest email validation in the entire world but it's a whole lot better than having nothing and also when a users on a phone it's going to give them a keyboard which is actually specified for entering emails as opposed to just the generic text keyboard other than that though email is very similar to the text field that we've already covered now let's move on to a little bit more complicated of a field which is the number field so let's again enter another div in here with a label this is going to be for what we're going to put as our age because we want to ask the user for their age and we're going to create an input again for doing that and this is going to have a type here of a number and let's make sure we set a name which is going to say age and an ID which is going to be age and let's just not make this from a required because we don't think that they need to enter this and if we save you see we get aged and immediately you'll notice we have up and down arrows to be able to specify where our age is going as well as where you can use the arrow keys to modify this and that's because we're using the type of number when we specify this input also if I try to enter different characters that are not numbers it won't allow me to to them another really useful thing that we can do when specifying number elements as we can specify minimum and maximum so obviously we don't want our age to be below zero so we're going to set the minimum here to be one and we also don't want it to be above a certain number so we're gonna set the maximum to just say 200 no one's over 200 years old so now if we save that and come over here and we try to decrease this you see that one is the lowest we can go if for example I enter negative 10 make sure all the required fields are entered and hit submit let's make sure this is actually an email and now we click Submit you'll see that says the value must be greater than 10 but let's say we put 201 in here click Submit you'll see that it must be less than 200 so these validations are built into the browser another interesting thing we can do is what's called step and by default the step is going to be equal to 1 so that means when we click our up and down arrow keys it's going to increase and decrease by 1 well for example we could change us what if we wanted to be by 5 so if we save this now when I click up it's going to increase by 5 at a time as you can see the next input element we want to cover is going to be the date input element and again this is going to be just like all of our other input elements we're going to have a label which we're going to set up for to in our case we're going to say for date and we're just going to come in here and we're going to say this is going to be a birthdate for example so now let's go down here we're gonna create an input and this is going to have a type I just want to set this to date to specify it's a date I'm gonna make sure we set the name to date the ID to date so that we match our 4 for our label over here and we're just gonna close that off and now if we save you see that we get a date input which already has some defaults for us as well as a nice little date picker we can select what date we want inside of here just like with the number field we can for example specify a minimum and a maximum if we want so let's come in here and specify minimum which is going to be 2019 June 10th let's save that and come in here and if I try to select the date before that it won't let me but it will allow me to select the day after that and if I come in here and manually change this for example I want to change it to the first and I try to submit it after making sure all the other fields are submitted properly make sure all the required ones are click Submit and you'll see that the value must be greater than that date that I specified as the minimum and again we could do maximum if we want but we already did that with numbers so we're going to skip that now let's move on to the next type of input which is going to be completely different than all the we've covered so far this is going to be the checkbox element so let's create a div and inside of this div we're just going to let's apply a little bit of text this is going to be outside of a label and this is just going to be for favorite food because we want checkboxes for all of our different favorite foods and now inside of here we're going to put all of our different checkboxes we're gonna do each one of these inside of their own div so firstly if we're gonna have a label which we need for all of our different elements we have a four and this first option that we want to have is going to be banana make sure we close that off put in banana here and then we actually want to create the input for that so this input is going to be a type here of checkbox we're going to specify here our name which is just going to be banana and we're going to specify lastly the ID which is again going to be banana close it off and save it you see we get a checkbox here for banana now let's say we want to add another favorite food let's just copy this div so that we can do the exact same thing but we just want to change this so we're going to change this to be Apple change the text to the Apple click and spell properly and make sure of course we update our name and our ID to be properly set now if we say that you see that we have banana and apple and we can check box both of this if we want or just one or none of them but what if we only want to be able to allow a user to check one box at a time instead of all of the boxes because with check boxes you can check as many or as little the boxes as you want but if you want to allow them only to specify one favorite food we need to use what's called a radio button so let's go down here and we're going to create another div and inside this one we're going to ask the user for gender because they can only have one gender and we're going to use a radio button for that so let's close this off here we're gonna create our div get a label inside of that and this label is going to be for our first one which is going to be male and we can just say male and then we need to create our input so the input is going to have a type here which is going to be radio and now you would be thinking that the name here should be male that's actually incorrect because these radio buttons all need to share the exact same name which is how we know that there can only be one selected so in our case this is actually going to be gender for our name and we want to also put in here our ID which is male which again corresponds with our for element for our label now I say that and you see we get a radio button for a male let's add the exact same thing for a female what's copied this down make sure that everything's indented properly and this is going to be female female and lastly our ID is going to be a female now if we say that and we click male that's all good but if we click female you see it unselect male and selects female for us and that's because we share the exact same name of gender between both our male label and our female label inputs down here you see they have the exact same name which means that we can only select one of them at a single time as opposed to be almost like multiple of that one thing that you need to do additionally with radio buttons though is actually specify a value so when you submit it to your form you know what you're getting back so in our case we want to put a value here which is going to be male and for female we want to put a value which is going to be female now I've saved that and actually enter in some information for our form so that we have some valid information and let's select male and we click Submit and you'll see we get gender here set to male which corresponds with the value that we selected here for our radio button now the next element that we want to look at is actually not an input element it's actually a select element but it works very similarly to the other input element let's go down here a little ways before our password and we want to come in here with our div and inside of this instead of an input like I said we're going to be using a select and of course we still want to label our select so we're going to make sure our label is specified here and inside of our select we're gonna select eye color so we can just say here our eye color and we want our label to say that eye color and inside of the select what we're going to do is we're actually going to put options inside of here so to do that we come down here we type an option and our option is going to have a value whoops a value so in our case we're going to put green as the value and it's also going to have that in here as the actual text so we can just put that here you could also use what's called the labels section and specify green here so we'll do that on another option was copy this down we're gonna do a red option so we'll say red but instead of putting our value inside the option like that we'll just say our label here is going to be red and also on our select we need to of course make sure we have a name here which we're just going to set to eye color and again our ID which is going to correspond with that label for that we have so ID here is going to be eye color now let's save that and you can see we have our selector which decides green and red as are two different values that we can select from and again we have green specified inside the option for the label or we can use the label attribute of our option either way allows us to set the actual value that we have seen inside of the select here now by default a select only allows you to select one option but you can come in here and you can use the attribute which is called multiple and if we say that we can now select multiple values by just holding down ctrl and clicking on them like this and now we have both of our values selected and if we fill in everything else on our form just so we can see what this looks like and makes our passwords there and we submit you see that has eye color showing up twice both for green and for red because we selected both of those values from our previous form now if we go back to our form you may notice that we don't have any form elements that allow us to specify lots of text and text with new lines in them and etc so in order to do that we're going to use another element wrap it inside of a div here and this one is called a text area and this again is not actually from an input it's its own element called text area and this is one of the few elements that has an actual closing tag because the value actually goes inside of the text area here as opposed to on a value attribute so now it's first before we get carried away put a label which is going to have four here and this is going to be a file for our user and we can just say bio and again we want to make sure we have an ID on here which is going to match the four from our label and a name so we can actually use this inside of our form and now let's put a bio inside of here so we're going to say my name is Kyle and if we save that you see that we have a bunch of extra space being added into our element here and that's because this text area converts all of the white space so all this white space before the my name is Kyle in this new line that we have here all that's being added in so if you have a default value for your text area you want to make sure there's no white space between the opening and closing tags now if we save this you said is properly not adding extra space force which is what we want but let's just remove that default value for now and we save that you see we can enter in our value as we want but we can also hit enter and do that and enter in multiple lines of text very easily and we can even expand this if we need to to make it larger to work with now select and text area are the only two anomaly type of elements that don't actually use the input for their element so now let's go back to the in to talk about another really interesting element which is called the hidden input element we don't even need to create a div for this because it's actually just completely hidden we won't even need a label we just need an input and you specify the type of hidden and that's it we're gonna give it a name so let's just say this is going to be called hidden and we're going to give it here a value and we're just going to set the value to high now if we say that you see nothing actually shows up on our form but if we do submit this form so let's make sure we submit it with all of our different required values and click Submit you see we get that hidden it attribute being passed along with the value we specified inside of our HTML but it doesn't actually show up on our page which is why it's a hidden input and users are not able to interact at all with hidden inputs which is exactly what they're used for they're really great when you're trying to do some fancy manipulation in JavaScript or you want to send something down from your server but if you're just creating a generic HTML form like this the hidden attribute is almost never going to be useful unless you're doing something fancy in JavaScript or on your server the next interesting element that we have to take a look at is actually going to be the file input so let's create a div so we can wrap this in here let's create a label for it first this is just going to be for what we'll just call file and we can just specify it as file then we're going to have our input tag we want to say that this is going to be an ID of file just so it has the same as our label the type here is it going to be a file type and again we're just going to give it a name a file so we can know what it's actually looking for when we submit our form and now you can see down here we can actually choose a file to submit to our browser but the first thing we need to do to make it so that when we submit this to a server that it's actually useful for our server we need to specify a new attribute on our form here and this is going to be called the E&C type just like this and inside of here what we want is multi-part form data and what this essentially says as files are very large we can't send them all at once it's going to send that file in multiple parts so we need to tell our server that we're sending in multi parts our form data into multiple different sections so that it knows to look for multiple sections of an upload as opposed to just one single form upload and this will actually allow us though can submit our files to our servers so now let's test that out let's come in here choose a file we'll just choose one of my channel arts type this in here make sure we have all the different information for our form submitted and if we click Submit you'll see our file is showing up as our channel art 1 PNG which is what we selected when we uploaded our file next let's kind of try to rapid-fire here through some of the lesser used input elements let's make sure we create our div and inside of this div we want to make sure we have our label and this is going to be for a phone we're gonna ask our user for their phone number so we'll say for phone gonna say phone is the label and we just want an input and the actual type of this is going to be tell te L just like this stands for telephone name here is going to be phone whoops phone cannot type today this is bed phone and an ID which is going to match our four of phone close that off and there we have our phone field and the really great thing about this phone field is that if a user is on a phone entering this information it'll give them a nice keypad which is specifically meant for entering phone numbers and not just for entering generic text next we're gonna have another input here which is going to be for URLs so let's create our div create our label for it which is going to say for URL close this off URL and we want to make sure we have our input which is going to have a type here of URL a name of URL and it's going to have an ID of URL close that off oops there we go and you can see we get our URL entering down here and another great thing about this again on mobile phones it's going to give them a special keypad but specifically meant for entering URLs lastly I want to cover just a kind of fun input element here which you probably won't ever see anywhere but it's just fun to use every once in a while this was going to be for color so we're gonna say here for color make sure it says color here and again as you guessed it this is going to be an input which is going to have a type of color whoops type color a name which is going to be color and it's going to have an ID which is color close this off and now you see here we have a color selector we can select any color that we want and click OK and it will actually select that color for us let's say we want to have this blue color click OK and it changes it to blue and finally after that long video we've covered everything you need to know about HTML forms make sure to click over here for more where I simplify the web for you and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 879,660

Keywords: webdevsimplified, html forms, html forms tutorial, html form, html form tutorial, html form validation, html form tag, html input, html input tutorial, html input tag, html input tag tutorial, html registration form, html registration form tutorial, html form attributes, html input types, html checkbox, html radio button, html label, html button, html for beginners, html beginner, html form beginner, learn html forms in 25 minutes, html forms easy

Id: fNcJuPIZ2WE

Length: 24min 55sec (1495 seconds)

Published: Sat Jun 08 2019