24: Forms In HTML and CSS | How To Create A Form | Learn HTML and CSS | HTML Tutorial | CSS Tutorial

today gonna create a form using HTML and it's sort of a weird thing when it comes to forms inside HTML because while we can create a form using HTML we can't actually use the forms for anything unless we know another programming language so just to sort of explain what I mean by that let's actually go and pretend we have a website that has a contact form at the bottom you know where you can write in your name your email address have message and then you can click send email and then Alexis send an email to whoever has the website now this is an example of a form inside a website another example could be if we had a login system at the top of let's say YouTube or Facebook now a login system was also created using forms by having a username input and a password input and then a login button which then submits the form and does something with the data inside the form so when it comes to HTML CSS we can create the actual visual part of the form so we can actually create the inputs and the buttons but once it comes to doing something with the data that we typed into the form we can't actually do anything with HTML and CSS now just to give some examples of some programming languages you could use Norah Tech to do something with the data we could use PHP JavaScript Python there's a lot of languages out there and you might be asking me well why should you learn how to create forms now instead of waiting until you actually need to learn another programming language well I have a couple of arguments to why you should learn it now instead of waiting the first reason being that it's very easy to go to Google or something and write how to create a HTML contact form or login system and then you will have some kind of tutorial that shows you everything step by step I for example have a tutor on my channel on how to create a contact for my login system for even beginners to understand and it's very easy just to sort of get the code and then copy pasted into your website and then get it working that way so you can still do something with forms and HTML even though you don't know other programming languages that's the way I did it when I learned HTML and CSS that's the way most people do it now my second argument for why sure learn it now is that one should you actually get to PHP or JavaScript of whatever language you might want to learn these languages tend to have a lot to do with input meaning that they have a lot to do with forms in HTML so it's a really good idea to not handicap yourself going into these languages not knowing how to create a form because you will need to learn it eventually so why not just learn it now okay so let's actually go and get into it here because I've been talking way too long and actually learn how to create a form so what I have here is a very basic index page it's very basic and inside the body tags I'm going to go ahead and create a form and we can do that by creating a set of form tags there's an opening and closing tag and as you can see because I used to shortcut inside my editor we do get a couple of attributes inside the form tag now I'm just gonna go and delete the class here even though it's probably a good idea to add a class to the form so you can style this specific form by targeting using CSS so inside this form him just gonna go and delete all the actions actually because we don't need to talk about these yet until the end so inside the form tags we insert the inputs that we need to use inside this form so I'm gonna go ahead and write out some examples so you can see some of the most popular inputs to be create inside forms you're not gonna do all them because there's actually quite a few so inside the form tag I'm going to create what is called an input so we're going to say opening tag input closing tag we don't need to actually close the input tag we just need to open and close the the opening tag inside the input tank we have a couple attributes that we need to have inside the input we need to have these and we cannot not have them okay so the first one is going to be a type attribute which tells the browser what type of input this is so I'm going to set this one to text then I'm going to set a second attribute which is going to be named and inside the name attribute we need to give this input some kind of name there's not a specific name we need to give it we just need to give it something that we can remember when we do actually to handle the data from this form so I could say let's say this is a input we write your email address then I could call this one email for example then we can go ahead and add a optional attribute which could either be a value or a placeholder again there's a lot of attributes inside these inputs I'm just gonna show the most popular ones so I'm going to create one called a placeholder now just to sort of explain what a placeholder is you know when you go to a website and you have let's say a login system inside the login system input you know where you type your username and password there's usually some kind of text that is sort of faded that gives you a hint to what you need to type in to these inputs and it's not texted you can actually edit it's just text that is going to be in the background of the input so a placeholder is that specific thing so what we could do is we could say write your email for example or we just say email doesn't really matter dot dot dot just to add something and this is going to be a basic input now let me actually go ahead and toggle self wrap so it goes down to the next line there we go and what I'm going to do now is I'm just going to copy paste because I want to show the the second optional parameter we could use instead of placeholder which is going to be something called value so I'm going to change the to value now value is not a faded background text of this input it's going to be actual text inserted inside this input here so it will have a value as a default when we load the browser now if I were to actually save and serve you guys how this looks like so you can actually see what I'm talking about you guys can see we have a couple inputs in the first one we have this sort of background color that's faded where when I click it we can write something and then the background goes away and that's the placeholder now the second one who does actually have text inside of it that we can edit so we do have a value in here as a default now the second input that I want to talk about at least the second type of input is something called a radial so I'm going to just copy/paste the input from up here with the placeholder paste it in and I'm going to change the type to radio now the radio is when we have the option to tick off a small circle where you can choose between a couple of different options inside let's say inside a survey or something so let me actually go ahead and show you a couple of examples here so we're going to delete the placeholder and instead I'm going to insert a value now the value could be let's say option 1 then we could also go ahead and just write just some text next to it so we do actually have some text next to it we could say option 1 like that : perhaps and then we're just going to go and copy and paste now one thing that's important here is that if these inputs belong together as a singular way of choosing a couple of different options then we need to make sure they have the same name inside the name attribute and if you don't understand what I mean I'm just going to show you in a second I'm gonna go ahead and call this one something like gender there we go and I'm going to set the value not as option 1 I'm actually gonna set this one as male then I'm gonna go down to the second one here now I'm also gonna go and call this one gender inside the name and I'm gonna set the second value as female then we're going to copy/paste a third option so we can actually say other because I guess there's another gender that's actually going to change the options here we could actually instead of saying options we could actually say male we could say female and then we could say other there we go so now what happens is that if I were to go inside the website here refresh you can see we get a couple of different options when we can actually tick off a you know some kind of value so we were to say male I can take that one off if it were to choose female you'll notice that it disappears from male because these are one singular option we can only choose one of these 3 because we have the same name as an attribute inside these options here so what we can do also if you want to have one ticked-off as a default we can actually go ahead and say check as an attribute for one of them so let's actually go ahead and say author should be checked I'm just gonna write checks without any kind of value we're just gonna write that and what you'll actually notice is once I do actually refresh the browser then other is selected as a default okay so we also have a third input type so I'm just gonna go ahead and create an input down here and instead of the type being text or radio we're gonna set this one to submit then we're going to set a name as submits and we're not gonna choose some kind of value we're just going to leave that because it's not necessary now we don't have to set a name attribute for this one okay but in most cases if you want to do something called error handling inside whatever programming language that's going to handle this data afterwards then it's a good idea to have a name attribute set as something like submit so you can actually get the input that will be the submit button so if we were to save this I can actually go ahead and refresh the browser and as you can see we now have a submit button so once I click this button it's actually going to submit this data from inside the form and send it to whatever document that has to handle the data using another programming language okay so forward should go back inside my form here we can go up inside the form tag and tell it what it needs to do with the data from inside the form so I could actually say we have an attribute called action and the action is going to tell the form where to send the data once we do actually click the submit button now in most cases at least when it comes to me because I like to use PHP code I would send this data to a PHP file that then takes the data and does something with it so what I'm going to do is I'm going to say we have perhaps a PHP file called contact form dot PHP perhaps then we're going to set a second attribute which is going to be called method which is going to set the method they want to use when we send the data now the method decides how we're going to send this data to contact form the PHP and we're two options here we can either set it to get a post now the general here is if you have sensitive data such as a password then you don't want to choose get because when you send the data using gets then inside the contact on the PHP page inside the browser you will be able to see all the data inside the URL of the website so if you typed in a password then we don't want to show it inside the URL so in this case you would actually choose post but because we don't have any passwords down here then we would choose get okay I should probably also note that get does have a limit of three thousand characters inside the URL whereas the post method has no limit inside the URL okay so we're just gonna go and set this one to get just to sort of show you guys what exactly does want me to actually submit this form they were creating here now before we do that though I would like to show you guys another input site because we just talked about it which is a password because we do actually have a password input type so if we were to go ahead and go down to the next line right before we have the submit button save them an input and I'm gonna set this one to password and I'm gonna go and set this name to PWD which is just a shorthand for password and I'm just gonna go ahead and set the value to nothing we could actually choose a placeholder that would be better so we can say pass word there we go so now just to sort of demonstrate what happens when we do actually go into the web site and write something and then submits the data I want to show you guys what happens inside the URL so we were to write an email we could write just something random we can write a second email because we apparently have to input for email we could do that I'm gonna choose mail because I'm a mail and the password you'll actually notice wants to start typing something we get these dots instead of the text that I just wrote and that's because it's a password and we don't want people to look over our shoulder and actually see what we type in then once we do actually click Submit you're gonna notice that we can't actually find contact from the PSP because I haven't actually created it yet so I click Submit but one thing you're gonna notice is that up inside the URL where we have our contact form the PSP page we're gonna get a question mark that says email is equal to blah blah blah then we have and email is equal to blah blah blah again because we had to email inputs then we get and gender is equal to mail and password is equal to blah blah blah and submit is equal to submit because that's we wrote inside the form now again the password we can actually see it inside the URL which is why we don't want to have a get method when we do access submit something with sensitive data inside of it so were to go back inside the form and change this one to a post method go back inside the website go back refresh just write something gibberish you save mail password submits then you'll actually notice that we don't have anything inside the URL so we can't actually see the data inside the top of the website which is better for sensitive data now I do Acts have three more HTML tags that I want to show you guys so right before the input that submits the form I'm going to insert a text area if I can actually spell that there we go and this one does actually have a opening and closing tag like so and inside the text area tag we're going to set a name attribute because we need to call something we call this one message because this might be the message of whatever I'm trying to write inside this form and as you may notice we did not include a type because as a default it takes there is going to be a text type so we don't need to set a type attribute inside the text area I do want to set a placeholder because we can do that I'm gonna set this one to write a message or something we could also write something inside the text area to actually have some text that's the same thing as using value just in case you wondered but we're not gonna go and do that so I'm just gonna go ahead and save it here go inside my browser refresh and actually go back to the proper page and now you're gonna notice we have a text area and we can actually resize this one and write a lot of text inside of it so if you want to have an input that has a lot more space inside of it to write more text because as you can see we're going to sort of continue but I can't actually click enter and go down to next line but we can do that inside a text area which is kind of nice now I will show you guys using CSS how we can actually limit the resize button because that's kind of annoying so at the end of this video I will show you guys a couple of CSS examples as well as how we can actually change the color of the text inside the placeholder because maybe you don't want to have a gray as the color and I'll also show you guys how to change the colored outline of the inputs because if you don't want blue to be the color then we can actually change it to something else okay so going back inside our form the next one I'm going to show you guys is going to be something called a selects so I'm going to right select and inside the Select tag we need to have at least a name so I'm going to set the name as let's say car and then we're going to give the user a couple of different options so I'm gonna say option and we're gonna set a value because we need to have one I'm gonna set this one to car one there's no need to use a Big C because it's just a value we're not actually gonna see this inside the website and then we could write something like a Ford it's the first car then I could actually copy the option paste it down two more times call the second one for Mercedes if that is felt correctly and then we can say Oh prune I don't know if that's a car in other countries it probably is but I don't know how to say that in English so I'm gonna go ahead and change the value so we have car one car two and card three and then I'm gonna go inside the website here refresh and now I gots to notice we get a drop-down option so gonna have to choose one of these now in most cases I will said something like none that's the first one because that makes sense because you don't want to already choose a car as a default so I'm gonna set this one to none I set the value to none okay I'm gonna refresh and now you guys can see we have none now the last one I want to show you is something that is going to replace our submit button down here so just gonna go and delete it because as you may notice we used an input type as our HTML tag and we do actually have something called button tag so I'm just gonna create the button tag now the type we're not going to set to button we do access set this one to submits just as with the input I'm gonna set the name to submit and then we can create some text inside the button here so we could say submit there we go then I can go inside the website refresh and you can notice we have the exact same button but the difference here is that we do X define that this is a button which you could argue is better because it actually tells the browser that this is in fact a button so what I usually do is I use a button for my submit buttons now the last thing I want to show you guys is how we can actually style some of the elements we have inside the form because there is some of them that can be a bit tricky so let's actually go and include a style sheet to our website here so I'm going to create a link to a style sheet I'm gonna call this one style the CSS and I did actually create the style sheet already so just go and create a style sheet and inside the style sheet here I'm going to actually set a styling for the form because I want to set a width to something like 300 pixels and I'm just gonna go and see how it looks like inside the browser because as you can see we now have 300 pixels now what I want to do as well as someone to change the width of the inputs so they go 100% so I'm gonna go inside copy the form tag I'm gonna change the to input and then I'm gonna go and set a width to 100% there we go go back inside the website refresh and now you guys can see we have something that looks slightly bigger now I'm actually kind of zoomed into the browser so it looks bigger than it does on your screen so what we want to do now is I would like to I'm not gonna make a beautiful form for you guys because I just want to show you guys the essentials that you might have troubles changing yourself because it's something that in most cases require that you go to google and figure out how to do it so I'm just going to show you guys here now the first thing I want to get rid of is the resize button down here so what I'm going to do is I'm going to go inside a stylesheet I'm gonna say text area some reason have a problem spelling out text area I'm gonna set resize to either vertical or horizontal or both unknown now if I set it to none go back inside the website refresh then you're gonna notice that we no longer contains the size of the text area box if were to change it to both which is the default then we can resize in both directions if I set it to vertical which is what I prefer then you can actually resize it but only up and down if I were to drag it to left and right you can see nothing happens and in some cases we don't want to be able to infinitely resize it so what I'm going to do here is I'm going to set a max - height and set it to something like 300 pixels if I go back refresh and then try to resize it you can see well that might actually be too long so let's actually go ahead and say hundred pixels refresh resize and as you can see I can't drag it further than 100 pixels now the next thing we're going to do is we're going to remove the annoying blue color that we get around the inputs because in some cases you might want to have a different color or you might want to remove them totally so what I'm going to do is I'm going to go inside the stylesheet and at the bottom here I'm going to be styling the input and text area in the same styling here so the way we can do that is passing input comma space text area curly brackets and now we're actually starting both the input and the text area so what I want to do is I want to set something called an outline and set it to none if I were to refresh the browser you guys can see that we don't get this outline that goes around the box we do actually disable it and if you want to change it into something that we want it to look like then we can go and do that in the following code to be right here now also going to go and change the border of these inputs because in some cases we might want to decide for ourselves what color should be so I'm going to go inside our styling down here and I'm going to the border to one pixel solid and then something like hashtag DDD which is a Gray's color kind of save it refresh and as you can see we get a lighter gray color now what I'm also gonna do here is I'm gonna go ahead and copy paste the styling down here and then inside after the input I'm going to say Col one focus and then I'm gonna do the same thing for the text area so right now what we're saying is that once we actually click on these inputs and we focus on them then we need to change something now if you're fine with the fact that nothing happens when you click on these inputs then you're done but in my case you might want to change it into some kind of red color that goes around it instead of blue so what we can do here is I'm going to just leave the border as is and I'm gonna go ahead and set something called a box shadow now what we need to define here because we haven't actually talked about box shadow before is a X and y-axis meaning that if you want to set up to go downwards then we need to set a Y value to something and then we wanted to go sideways we need to set an X value so I'm going to set this one to zero for the x axis and then SERO for the y axis because I don't want it to go down or sideways and then we're gonna set a blur value so I'm gonna set this one to something like 4 pixels and then the last value is going to be the color of the box shadow now because it's a shadow we might want it to be slightly transparent so in this case I don't want to use the hex color like with it here so instead I'm gonna use our TP a which means red green blue alpha meaning that we can also set a alpha value which is transparency and what I'm going to do is I'm going to set it to 255 comment zero comma zero comma and then the Alpha value which is going to be half so 0.5 and if were to go ahead and refresh the browser and then focus then you guys can see we get this red outline now if this is not red enough for you then you can also just go ahead and go copy the color here add it to the border just remove the out value because maybe don't want to have a transparent there we go so now we have a red border as well refresh the browser and as you can see we now have a red outline now the next thing we're going to change it's going to be to place holder color inside the inputs and again this is an optional thing so if you don't want to change it then you're just fine as is but what we're going to do here is some consequence of my stylesheet and I'm going to start something called a pseudo element meaning that if you want to style a part of a specific element then we can write coal on colon and define what kind of part of this element we want to style now because we want to style everything that has a placeholder we're not going to add anything in front of the colons if I wanted to just either inputs then we could write input colon colon but we're gonna go and style everything that has a placeholder so I'm going to say colon colon placeholder and then we're gonna say curly brackets and inside of here we're going to say they want to change the color to something like red just to test it out and then we can also set a opacity to one now this next part here is going to be something we haven't talked about yet which is the fact that we do have different browsers out there now because chrome and Microsoft ads and Firefox are not the same then in some cases we do need to have different stylings for each individual browser which is quite annoying but we need to do this so what we just did here is we went ahead and style all the major browsers or at least some of them the opacity we added in here something we need to have in order to make this look the same inside Firefox as well and if we want to apply this styling inside Internet Explorer or Microsoft ads then we do actually need to add some different styling to those specific browsers so if I were to copy paste and then paste again I'm going to go ahead and remove the first colon from inside the placeholder then I'm gonna say - MS - input - which is going to style for internet explorer okay and we only need to have to call in here then we're gonna do the same thing so I'm just going to go ahead the path here for the second one down here but in this example we do need to have two colons in front of it which means that we're going to style for Microsoft edge now in the future we might have support for this meaning that in the future this could also in fact style Microsoft edge or Internet Explorer in fact it could be that it actually does support today I don't know but from what I understand looking up online we do need to have these two if you want to style Microsoft edge and Internet Explorer so I'm going to go and save this go inside the browser refresh and as you can see we now have read inside these inputs and again this one is not going to be read because this is not placeholder text this is actually a values of Worsley did you guys can see we have no place hole inside the second input here but all the other inputs are in fact a different color now now the last thing I want to mention here is the fact that mail and the button next to it is not actually next to each other and the same goes for female in the button and the other end button and the reason for that is that we haven't actually placed these next to each other they do actually go on a new line each time we have text and then the input so we just need to sort of place these next to each other using flexbox or something in order to happen next to each other so that's not too difficult if you're confused about how to use flexbox i do have a tutorial on it actually a few episodes ago so you can go and go back and watch that one and then you can see how to place elements next to each other okay so this is all I want to say about forms because it's way over time this is going to be a long episode and it's not something I want to dive deeper into because I think you get the point of using forms so again if you want to create something using forms already now even though you might but no PHP or JavaScript or something else then I do have tutorials that I'm going to link to in the description of this video at least the ones that I do have right now I'm going to link to so you can watch these and try to create a contact form or login system or something using HTML and CSS and PSP so I hope you guys enjoyed I'll see you guys next time I'd like to say thank you to all the people supporting me on patreon events the next benefits such as lesson materials then go ahead and visit the link to do see on screen here and I'll see you guys next time [Music]

Channel: Dani Krossing

Views: 181,192

Rating: 4.8788314 out of 5

Keywords: Forms In HTML and CSS, how to create forms in html and css, how to create a form, how to create and style a form, html tutorial, css tutorial, html, css, mmtuts, html form, form in html, create a contact form, create a login form, how to create a login system, form, css form, learn about forms, create a html form, html tutorial for beginners, learn html, learn css

Id: E5MEzC0prd4

Length: 29min 8sec (1748 seconds)

Published: Sun Feb 04 2018