Colt's Code Camp Day 4 - Forms & Inputs

hey everyone welcome today we're talking about forms a whole bunch of different elements in HTML including forms inputs text inputs email inputs password inputs we're gonna see radio buttons selects an option elements will talk about validations we'll talk a little bit about HTTP requests and query strings will cover buttons and checkboxes and my personal favorite the color picker input and I'm sure I'm already forgetting some stuff but there's a lot recovering Oh labels that's actually a very important one not the most exciting but a very important element as well so you can download the code for today in the description of this video it's just a link you can see the the end result code of what I type there's also a solution to the assignment from yesterday if you are following along with every day of the course one small announcement I am not feeling great starting started earlier today I'm fine but hey I was pretty short of breath and I was recording this and feverish so I don't know if I'm gonna get a video out for tomorrow we'll see how it goes if not I'll hopefully have it for Monday so I'm sorry if I sound a little bit out of breath in this video I tried to edit around it but well I was having trouble breathing oh is great anyway I hope all of you guys are staying healthy and safe and all of that alrighty so now we're gonna talk about forms in HTML but we're actually not going to talk about the form element first we're going to circle back and cover that because the form element on its own is kind of useless unless you have inputs or elements that go inside of a form so we're going to start with the various form inputs that we can use in HTML we're not going to cover all of them there are lots and lots of different types of inputs but I'm going to go over the important ones so there is an element called input input is super versatile it accepts an attribute called type and if we look at the type attribute here all the available options we've got button check box color date date/time local email file hit an image month number password radio range reset search submit tell text I'm you are a week and then an obsolete value date/time we are not going to go over all of these but you can see example of all of them here on the right side in this table there's another example of a table from yesterday so why don't we start with the simplest one which is a text input it looks like this right here it's just a text input you type text in there pretty straightforward let's go over to a new HTML file i've created called forms HTML it has nothing in it except an h1 and all add a little h2 that just says text input just so we can break up the different inputs and you can see what they are then we'll write an input element which does not have a closing tag it's just a single tag we don't put text inside of it instead we add in the attribute set or necessary including type so type equals text will give us a simple text input I'll refresh the page and there it is I can type in there I've got a text input there's more two inputs one of the most common attributes is the placeholder attribute placeholder allows me to pass in some placeholder text so something like username and placeholder text shows up when there is nothing in that input but then as soon as I start typing it goes away so it's just a way of providing some context or a hint as to what this input is for later on we'll talk about labels which are a better way of or another way providing additional information about particular inputs but placeholder text is really common so we can make a single input if we have another input you should know that they are inline elements so if I have another one let's see user name and what's another thing we could ask for city I'll refresh you can see they are inline elements not block level elements they sit nicely together let's take a look at a couple other input types we have an email input now an email inputs looks just like a text input and you won't really notice a difference until we put it in a form but I'll just throw one in here email input we have input type equals email this time and I'll add a placeholder email I'll refresh the page it looks the same you won't notice anything as you type but there is some validation behind the scenes once we hook this up inside of a form it will not let us submit the form unless we have a valid email pattern in here as you can see there it gives me a little note please include an app sign in the email add is missing an ad sign anyway next up we've got some others why don't we take a look at one of my favorites not very commonly used but a color input so let's try that let's add a h2 color input and then we add our input elements input type equals color no placeholder text for this one because it is not a text-based input what we're typing something in instead we click and we get a color input or a color picker now this is going to depend on the browser you're using the particular picker the system that you're on you'll see a different color picker most likely but it should let you pick a color and we haven't really talked about how colors are represented in the browser and CSS or JavaScript how do you actually you know take this exact shade of green versus that exact shade there are numeric codes behind the scenes so if I pick some color here how about a purpley color I close out there is a numeric value in that input and speaking of value there is an attribute I can add to every single input called value and this is how I can actually preload text into one of these inputs so instead of just having a placeholder text like City there I could actually put real text in there if let's say I was creating a form to edit something like to edit the title of a blog post and if I wanted the title to show up there instead of you having to type it from scratch I could do something like this value equals and then put some name in here let's see what's a city how about pinna city in Guatemala you can see that that text is actually there I can edit it it is not the placeholder text if I delete it now we go back to the placeholder text so we can do that for all of these inputs if you do it for a color input however and you try and set a value to be you know like hello it's not gonna be very meaningful but if you set it to a color code which is something we have not discussed but if I put some code in here like that color right there now it's set to default to that brown color so not something we're really gonna go into but yes you can set an initial value for a color input as well okay other types of inputs there's date inputs these are kind of obnoxious in my opinion there are nicer ways of getting a date picker where you can get like a pop-up calendar where you can select a date so most modern websites don't use these there are pre-made date pickers and calendar little widgets that you can include in your app once we get to JavaScript so for now yes there is a date input but I don't really like it we also have a month input we have a number input which wants you only to type numbers so I'm typing letters now it doesn't work we get those little buttons and I can increment the number let's try one of those h2 number inputs and then we'll add an input type equals number refresh and there it is so I can't type letters but I can type numbers we can do things like a min and a max also a step interval so that step will dictate how much we go up or down by with these arrows so I could do something like let's do an odd number picker so let's say min is 1 let's say max is 10 and step is 2 I'll refresh here we go I also notice it changes the size of the input based off of that Max and as I go up we hit 9 that's the max well 10 is but our step is 2 so that is min and Max and step next up a very important input the password type so we'll do one of those down here h2 password inputs and then add in an input type equals password refresh it looks like a regular text input but as I type in here my text is obscured so very important now that does not mean that the text is a secret it just means that it's not showing up so if someone's looking at my computer but I can still go get the value from this using JavaScript that information has to be sent somewhere when you submit the form so you're not hiding it from the computer you're just hiding it from prying eyes and it's always a good idea to include a placeholder placeholder equals password okay there it is and then you type and we get those little dots already so those are some basic input types there are many others we're going to come back and talk about checkboxes and radio buttons but first I'd like to talk about labels so in a form labels play a very important role and when I say labels I'm referring to the pieces of text that correspond to individual inputs not the placeholder text inside but an actual separate element it's called a label element and it plays two main roles first of all each label is associated with a particular input so if I click on that label it will focus me it will move my browsers or the cursors attention to that input and that can be useful I guess with a mouse but especially on touchscreen devices and smaller devices if you have fat fingers and you're trying to select something and you happen to miss it but you hit the label it's a much bigger target but the second reason to use labels is for accessibility purposes for making your websites accessible to people in your forms accessible to people who are relying on screen readers a screen reader when it gets to a particular input will read out the corresponding label automatically so let's say that we were using a screen reader and we're focused on this input the placeholder text is not that informative we know it's an email you at example.com or it appears to be an email but the label text really contains the instructions and you could put this as a paragraph tag you could put I mean you could do whatever you want to try and structure your form and put some helper text but the label element is special because it gives us a way to associate the label with each particular input and it's also what screen reading software will be looking for automatically it will be expecting a label on each input so creating a label is pretty simple it's just a label tag opening and closing and then we can put some text like enter a strong password if we refresh yep we just get some inline text there as you can see right now they are not associated in any way so I'm clicking this label nothing's happening in order to associate the label with an input we have two main options one is to nest the input directly inside of the label the second option that's much more common is to use two particular attributes one on the label called for fo r and then the second attribute goes on an input and it's called ID now ID is something we will come back to when we get to CSS and styling IDs play a role outside of just labels but this is how you can set a label to correspond to an input so we give this input an ID of peas and this label a for attribute of peas which is matching that so we could do the same thing here ID equals password and then our label will have a four set to password matching that ID attribute so if we refresh we shouldn't notice a difference but if I click now I have a massive target to get into that input and if I were to use a screen reader and focus on that input like that it would automatically read out that label text and we will be doing one more lecture on HTML tomorrow when we cover semantic HTML and accessibility and I'm thinking I'm gonna actually use a screen reader and try and demonstrate some of this so we'll see how that goes let's do one more let's have another input just duplicate this a password input that will be to confirm your passwords who all had a label confirm password okay and then we just want to associate them and I'll change the placeholder to say confirm password as well and an ID for this one maybe we'll call this PW confirm or just confirm and then 4 equals confirm and there we go we now have helper text or label text for both of these inputs and they are correctly associated but make sure that you have those IDs matching ID matching for if I swap that for example if I set confirm as the for attribute on this first label and I refresh when I click here we end up focused over there so that ID and the for attribute do play an important role so now that we've seen a couple examples of inputs different types of inputs will actually see a few more but first we're going to cover the form element itself so there is a form elements in HTML it does not look like anything you won't see it on the page however we use it to create a form that will eventually submit data somewhere so these inputs on their own are just inputs which you can use once we get to JavaScript you can use JavaScript to read a value out of here or do something with the value but the traditional way that we set up a form in the browser is by using a form elements and the form elements has a couple special attributes that are going to take a little bit of explanation to understand so we'll start by just adding a basic form I'm just gonna do an example down here so we'll put in and just an HR to divide things up let's do a mmm what should I do here another H to form elements and then after that HR I'll actually put a form in and you'll see if I use that autocomplete in vs code it automatically adds in the attribute called action I'll just get rid of that for a moment let's refresh the page you don't see anything showing up down here so the form element is basically a container that will hold various inputs and then we can submit that form in one go which we haven't seen how to do yet but when we do we will submit that form all of the information from those inputs however many we have in there will be sent in a new HTTP request so very early on day one of this course I talked about how we generate a new request one option is just refreshing a page you know like that another is clicking a link and a third option is submitting a form so when we create a form elements we actually specify where this data should be submitted to so that is what the action attribute does and I'll just start by leaving this blank and I'm gonna put Matt or now maybe an input for a username in here so we'll do a placeholder equals username and then let's do a password as well so input type equals password and we don't need any of that for now type equals password placeholder equals password as well and if i refresh the page okay here is our form we don't see anything and I also don't have a way of submitting this form which is the last missing piece well one of the missing pieces we need to add in a button so to make a button in HTML there's two options in the context of a form one is an actual button element it looks just like this and we'll add some text in there like submit I'll refresh now we have a button and if I type some stuff in here username and password I click Submit right there I don't know if you caught that my page reloaded I'll try that again I'm just going to hit submit watch right there it reloaded if I change the action here to be I don't know candy and I submit I'll have to refresh the page first to get the new version of my form submit it now it takes us to slash candy if I replace this with WWE let's do HTTP colon slash slash www.google.com/mapmaker it takes me to Google so not something you would normally do but this demonstrates that we are just making an HTTP request when a form is submitted that action attribute specifies where the data should be sent so usually you will have if you once we get further along or if you're working with your own server or on an application you usually have some endpoint you have some place that you're submitting your data to right now we're just learning HTML we don't have anywhere to send it to so we're not really gonna do anything with it but I'll leave this as Google's just so you can see that it does indeed send data to Google although right now it's not actually sending anything it is sending a request but it's not sending any data what we now need to do is add in another important attribute to our inputs each input in a form should have a name attribute and name is the name of the piece of data it's kind of like a label for that piece of data when it is sent to a server so whatever you put in here I would just go with username and password will be used to label the data the actual value in here and the value in here when it's sent to a server somewhere or in this case it's submitted and a request is sent to google.com refresh the page we don't see a difference and I'll put something in the user name I'll submit and now you'll see something that we did not have before in the URL I'll copy this out just copy that whole URL paste it so we can take a closer look it has HTTP www.dent.umich.edu/license Ted of password and I just repeat that process one more time let's put something in there I'm just going to type gibberish you can see what we end up with that name change that we made impacted the actual request that was sent us are and pass anyway we're kind of getting a little bit further ahead than we need to because we're not going to be submitting our forms anywhere but you should know that forms do have this action attribute it specifies where the data goes so if we look at a more well a form that actually works that was not created by us like on reddit's there's a search form here and if I actually inspect that search form which we haven't really talked about inspecting things but if you right-click in chrome inspect it opens up the dev tools and shows you the corresponding HTML so we can see we have a text input in here or actually it's a search input it's very similar to a text input except it removes the NE enter keys and it returns and it's embedded or it's nested in a form element and that form has an action of slash search slash now this is important this is a reddit endpoint so it will be reddit com slash and then you'll say well let's just see what happens when I submit something in here the name of this input says queue for query it's kind of standard or pretty common for search inputs to use queue but you don't have to let's search for something we've got some geese here let's look for chicken so I'm gonna hit search or just hit enter here you'll see that we get a new request and pay attention to the URL this is what the URL looks like not quite the chicken results I was hoping for these are all cooked chickens I'd paste this URL in here you can see we ended up with slash search and then this thing at the end it's something called a query string where we have that question mark we're not gonna get bogged down in it all I want you to know is that whatever I typed into that input which was chicken was sent as part of this request under the name of Q and then reddit server is set up so that whenever it gets this request where Q is chicken it's going to find results that match chicken and build me a page a search results page and show it to me send it back so I could actually just search this way if I change that to I don't know geese and hit enter I don't need the form the form is just a convenient way to get here so I don't have to type stuff in the URL but it's just sending a request at the end of the day now technically there are different types of HTTP requests we're not getting into that if you want to learn more about that you can go onto the forum mdn page this is something we'll have to cover eventually but at the moment it's just kind of overkill since we can't really do anything with the data but you can set a method attributes that's all I'll say post and get requests those are worth looking into if you are curious but it doesn't really matter with what we're doing at the moment okay so one kind of fun thing that we can do is actually set up our own forum that will act as a reddit search form so if all that we need is to send data to reddit.com slash search and we want a query string to be their query string is this whole thing here question marks something or if we go back to my example this whole thing is the query string we have multiple pairs here user and pass they both have corresponding values all that we need to do to make this work is basically send a form request to this URL right there so we could make a new form form action is that and then we'll add an input type equals text and then we need to add a name and reddit is expecting the name of queue so I could add my own name here I could go with query instead I'll add a little H to that says reddit search form and then I'll add a button at the end to submits come back to my page here it is I'll refresh the page get my latest code I can search on reddit I'll type something in there submit but it's not quite going to work because I did not send the data under the correct name now this is not something you would normally do right you're not going to normally have a form that sends data to somebody else's or to it as some other server in fact a lot of servers don't let you do that in the first place but long story short it is telling me no results for empty string or empty quotes basically it thinks that I didn't send any data because on the server side it is looking for the value of something called queue not query as we saw the name is queue and so now if I send my data under queue I'll do a search for ducks it will take a moment and it takes me to reddit.com slash search slash and then this query string Q equals ducks and I can see ducks results now let's go back and talk about buttons so we saw that we can add a button element and that will submit a form however that actually isn't always the case depending on the browser you're in and how many buttons you have and the order that they are in some browsers will only let the buttons submit the form if it's the very last element in the form or if it's the last button at least in this case in Chrome I just tested it it actually worked fine I tried every possible way to show you that multiple buttons might confuse it or that you know only one of them is going to submit the form but actually I couldn't prove it but in other browsers I have had experiences in the past where if you have more than one button if it's not the last thing it will not submit the form so if you trust me when I say that there is an alternative way to submit a form there's actually another input type where the type is submit and this will submit the form it generates a button if I save that if i refresh you can see it right there and I can specify a value here since it's an input it's not a it doesn't have an opening and closing tag it's just a single tag and I don't have anywhere to put text like I do for a button between opening and closing tags so we add in a value refresh and now I can change that value and this will submit the form as well although I haven't actually typed anything in there okay so to recap what we've seen so far around forms a form element itself visually does not display as anything it acts as a container or a parent for inputs if you want to submit those inputs together you want to take the values or the information in a collection of inputs and submit the data to some common place in a single request it doesn't make a whole lot of sense for us right now since we don't have any way of working with data or implementing a server or really just any reason to send data anywhere but if you specify that action attribute that tells the form where to send the data to and then name is a very important attribute for each input in a form it specifies what the data should be sent under what will be the name for this one piece of data what will be the name for this one we also should have labels in here just it's best practice like we did up here so I'll make sure to add that in before you download this code or before I upload it so you can download it and then there are some other inputs that are slightly more advanced including checkboxes and radio buttons so radio buttons look like this at least by default in Chrome they look different in other browsers slightly different at least they are kind of like check boxes except generally the whole idea is that you can only have one selected or one chosen in a given group so with checkboxes we can have multiple in a group and I can check both of them or I can check one of them with radio buttons I'm toggling and just picking one at a time so in order for this to work we actually have to associate three radio buttons or if we have 10 in a group I need to associate 10 to make a single radio button it's pretty easy let's see where should I do this do it here another h2 radio buttons it is just input with type set to radio and if that's all you have you can see it right there there's a radio button so in order to give it some context or a label we use the label element so I'll do that here we'll add a label afterwards what will we be choosing let's do a little paragraph here pick a color sure and then we'll have red as the first one we'll give this an ID go with red 4 equals red so now I just have that radio button and I can click on the label and notice I can't undo it so that's how radio buttons work you don't toggle it off but if I have other radio buttons so I'm just gonna duplicate this and have an orange and a yellow so I'll just update that orange to take the text here make it Orange same thing here so we should now have three choices but they are completely independent I can have all of them selected the idea with radio buttons is that I make a group of them and to make a group of them I just used the name attribute and I give them the exact same name so I'm gonna select three cursors here by holding option down on each radio button input' and I'm gonna set name to be color that's what they represent the choice of color refresh my page and now I can only pick one because they have the same name okay so that's radio buttons however there's an important thing that we have not considered yet which is if you submit this data from a form if I had this radio button group in a form like this form right here I'll just copy this down there so you can see what it looks like put that in this form refresh if I type a username in I type a password and I select yellow I hit submit remember we're sending this to Google this is the data that was the URL that was generated so it has a username equals blah blah blah pass equals and then color which is the name equals on why is it saying on I want it to extract the value that I selected so red or orange or yellow the thing is I haven't actually added a value in here so that's the last piece for a radio button we add in a value and for each one we would have a different value so if you selected this radio button maybe your value is red this one would be orange and this one would be yellow this is just telling the browser when this input or when this radio button is the selected option send color as this value so color will be yellow or color will be orange so I'll refresh back on my page again I'll select orange submit up there we can see color is now orange so next up we have checkboxes which are very pretty straightforward to make you've set type to be checkbox it's an input element give it an ID so that we can label it otherwise without a label there's no way to specify text or any information about what you're checking and then what else is there a name that specifies what the data or the value will be sent under just like all the other names and then there is this one attribute a boolean attribute oh yes or no we don't set it to a value called checked so if that is present let me refresh this you can see it begins checked off so we'll add one of those in just very quickly here let's do that down here again h2 check boxes we have input type equals check box we'll give it an ID of likes dogs and then we'll give it a label afterwards or before it's up to you and the label text will be I like dogs and for matches this ID likes dogs I'll refresh my page one more time and we now have I like dogs as a checkbox I can check it or uncheck it I also can add in that attribute checked right there refresh the page and it starts off checks but I can still uncheck it alright so those are some of the other inputs now there are two things I'd like to mention that are not actual input elements but they are valid form elements so they are inputs in general in the sense that a user enters data with them but they are not actual input elements the input that we've been seeing for quite a while in this video and the first one is a text area it represents a multiple line plane text editing control so something like this where it's multiple lines you can grow it shrink it if you wanted to in the browser and again it is not a input elements and it's actually a opening and closing tags element it's not the right terminology but it has an opening and closing tag and then the value the text that is inside of it will be displayed so let's do one after checkboxes text area and then I'll add my text area just like that and you'll see that the vs code autocomplete already gave me columns and rows or calls and rows this allows me to specify the size of this text area so if I just do that and refresh there's our text area so this is in characters how many characters wide and how many characters tall so 10 we should have 10 rows there I already lost count but that should be ten characters tall so if I change that to be how about three how about 100 wide 100 columns there we go much wider we can leave it at that and then if I wanted to put some data in there I can just do lorem ipsum lorem tab in vs code gives me some random I think it's just random Latin and there we go it's in there now a user can always grow this or shrink this we're just giving it the initial starting size now the very last element we'll look at is the Select element which really is two different elements we need to consider so a select is going to give us a menu that we can pick an option from and it actually it consists of a bunch of option elements so a select on its own doesn't do a whole lot we have to add in options then you've probably seen a bunch of these before so let's try making one let's say that for this reddit example we actually go to Reddit and do a search again watch the URL up here I can actually sort by let's do sort by top and you'll see that there's a new parameter here sorts equals top so I could make a select to do that same thing on my reddit search whereas my select here it is so I'm going to go to this reddit forum down here and add in I'm going to get rid of that submit button add in a select and inside of this select if I just leave it as that and I refresh we get this empty selection I can't even click to open it so it exists but I can't do anything with it but if we add in some options I add in some text here like top sort by top and then we'll do sort by new and what else is reddit have comments I know there's something else in there relevance yeah okay relevance we'll do that one too okay so now I should have three options I can pick from however if I submit this form it's kind of let me zoom in a bit here if I submit this form if I look for chickens again I want new I do need to add in a name for my select and if we go back to Reddit that name that it's expecting is called sort so if I want to match reddit I'll go with sort so I'll try that again new we hit go what happens oh so close so we're missing one important piece if you notice here we have Q equals chickens that's supposed to be there and sorts equals but there's no value and that's because the text that we specify inside of the tube option tags is purely for display purposes we may want something much longer you know top posts or something like that when the actual value that we would need to store or send to a server might be different it might be just top which i think is what reddit is it just wants top their server wants new and relevance I believe will play around with it so now we have three options each with a separate value whichever option is chosen at the time that this form is submitted when the user hits the submit button sort will be the name used to store one of those values as its sent in the request so let's try it again let's go back refresh just in case let's look for tiger and does it work it looks like it sort by new and Q equals Tiger so the Select element is really a partnership between select and the option element we should add in a label and an ID so let's add a label very quickly it will just be sort by and then for I'll just call this sort ID will be sort here and then we should also add in another label for our query input we'll just do something like search term oops put that in the wrong spot that should be the inner text between the label tags and then this will have a ID of search and four will be searched okay there we go we have our label I can focus that's working correctly though maybe I'll format this ever so slightly differently I can use divs as one option for dividing up some of the space so if I want this to be on its own line and then I want this to be on its own line and then maybe the button on a third line we could just use a generic div there are other options that we'll learn tomorrow actually that are less generic but basically a div will just give us some spacing here and then thanks to CSS later on we can actually space things out nicer well it still doesn't look great but it's good enough we'll change the value here to be search and yeah now we have a couple forms really two forms I believe but then we also have a whole bunch of different inputs different types of those inputs text areas checkboxes we talked about selects we talked about radio buttons and how you can group them together there's a lot a lot that we talked about kind of nasty looking forms but these are the foundation of all nice-looking forms let's take a look at something like this right here this is to sign up for square that looks like a password input let's verify for sure is it I will inspect it input type equals password there we go what about this right here what is that let's inspect that it is a select full of a bunch of options as you can see there so stuff we've already seen just a little bit of makeup or face paint or something nice on top to make it look better than what we've done but the same elements behind the scenes one less topic around forms are validations client-side or browser validations basically checking to see that a certain field has not been left blank or that a number is between some range or that what else an email has to follow an email pattern those are things that we can do so I'll do a little validation demo form down below just call this an h2 again validation demo form will make a form we won't worry about the action we'll add in let's see why don't we just copy some of what we've already done let's add in at least an input for just a text input we'll give it a placeholder of username and we'll add a button to submit at the end so button submits okay right now you can submit this form no problem with No hmm it's kind of annoying that there's not much space at the bottom hopefully you can see this here with no username I can leave a blank the page still refreshes I know it's kind of hard to see that but we are refreshing which means the form is submitting but there is an attribute I can add called required required is a boolean attribute a yes or a no so if it's not there it's not there and if it is there it means something is required so we don't need to set it to required equals blah blah blah it's just required like checked for a checkbox if I try this again refresh and I submit now I get a warning it's well it's more than a warning it's asking me to please fill out the form before I submit the field so this is chrome specific validation I switched over to Safari and if I do the same thing it's close but it's not exactly the same so these are browser specific so that is making sure some elements cannot be blank or some input cannot be blank we also have some other validations so the simple act of setting type to email is going to validate based off of an email pattern so it's not going to check to see if an email is actually valid it's not going to send a request or something it's simply going to check to see if it has an @ sign and I think there's some other stuff so it's asking for user name I'll put that in there now in order to show you this I will need to make email required because right now it's not required so it doesn't matter that email is not a valid email but if I add required again I'll refresh this and put in a user name in there submit please fill out the email so I'll put something in there nope please include an @ sign so I don't have an ADD sign so I'll put an @ sign still no please enter our part following the @ sign so that is considered valid even though it's not at all a valid email it doesn't care it just wants something and then an @ sign and then something else but it's better than nothing now for all of these validations that we're writing right now all these simple things like required or type equals email once you get to JavaScript or once you learn a server-side language you can write much more rigorous validation so these validations that we're doing with HTML are very simplistic the last little bit of data validation I'll show you is setting a minimum and a maximum length for some input value so I'm trying to think of an example well for username actually often your user name will have a max length so you can't have like a you know 20 character username let's set it at 10 characters just to see how that works I'll refresh username is still required so I'll put something in there and if I try and go too far it just doesn't let me I'll submit and I get this issue here I need to fill out the email now I have max length I also have min length so let's say min length has to be 4 characters for a username if I type something in there and I try and submit it's gonna tell me please lengthen this text to four characters or more you're currently using two anyway those are some simple validations and at this point we've covered pretty much everything you need to know about forms the main takeaways are that we have our input element which is quite versatile with that type attribute you should always add labels so I didn't do that early on because we hadn't covered them yet but you should add labels and associate them with the four attributes and the ID attribute on a particular inputs we saw radio buttons checkboxes text areas which are a standalone separate element unlike these everything above is an input element then we also saw the Select element and option elements and then the form container element just a form that we wrap around various inputs and then submit which will send a request and send our data to some end point or to some URL and for now we're sending it to Reddit over sending our data to Google for no reason kind of useless but I just wanted to demonstrate that you can send data and that's really the point of a form all right well thank you for watching everyone I hope you learn to think about forms I hope you stay safe and healthy and I'll be back if not tomorrow then soon enough with the next video hopefully tomorrow though okay bye bye

Channel: Colt Steele

Views: 17,158

Keywords:

Id: sPStRhWqNMg

Length: 45min 38sec (2738 seconds)

Published: Thu Mar 26 2020