How to Create Registration Form Using HTML & CSS

hi guys the is rate so in this tutorial I'm gonna create this simple form so yeah my firm contains five input types and the first three are text input types and the last two are password input types and my firm also contains two radio buttons here to indicate the gender and one submit button so this is all I have in my form let us look at a layout for this so this is the layout of my form here in the top I have my form heading and and the five input types and two radio buttons and one submit button in this entire form element so now let's go to the text editor and write some code so this is the template how so if you don't know how these code works HTML so go to my HTML tutorial section and watch my head make HTML tutorials and learn all these things so now first I'm gonna create our sink exercise so I'm gonna create h1 heading for my form so my heading is simple form so also it's simple form so what is it so if we look at the browser heading simple form and now I am creating the form here form so in the form I have five input elements the first input is input element so and the type is text so copy this paste it for five times so say this and now see this in browser so refresh this so I have five input types so so if you say if you look at this form there is some name indicating what we enter here so first name last name email password showing some names so so for that purpose I am using placeholder for this place holder his first name and let's copy this shape this is last name this email and this is password and this is confirm password and I need to hear his email and this is password type is called password and this type is also password large to our passwords and the middle one is email and first to our text types so now save this and see this so first to our text types and the next one is email type and next to is password type so that is all we have right now so now we are going to create these radio buttons here so now I am going to create this radio button so for that purpose I'm creating a division so I am grading a division so in the division I am creating two input types for two radio buttons and four label uncle' I am also creating a label for that and creating input so in the input and an ID equal to mail and I am creating a label further and the label is for this is this level is for the label is male and this we are creating this label for this radio button so for here the ID value is male so I have to give male for that so that this label is links with this input tag so for the same thing I am doing the same thing for female also in Street the type is radio on must give female here female so sir this now see this so we have two of them if you see both are selecting same time now but we want only one should be selected at a time so now what I'm going to do is I am giving the name here name attribute is same so this is on gender supposing I am doing the same name here gender so the value of this name is same to both of these input types so now say this now look at the browser when so if you see only one is selecting so that is it and one final thing is we have to create a submit button I'm gonna create a submit button underneath this input so type equal to submit and I am giving name whatever the name have given here is appear on the button so I'm giving submit so see this now series in browser so we have a so submit button is there so no we have to style this form like this so now I'm gonna use some CSS here so take the new file and save this file as style dot C SS so my stylist so now you see this form I have a bluish black light bluish background for my body and so now I'm getting nice bluish background so element is body so I'm giving background color as hashtag e8 f 3 f 8 so this so if you want these colors simply go to color picker so color picker calm you can get all these core values color core values so you can so that you can use any color you want from here simply copy this color code copy this color code and simply paste it on your your code with hashtag so that is it so now so I have created body so no say this okay I have to link this stylesheet to this so father I'm giving link ohms link relation style relation stylesheet' type equal text and href that is style dot CSS now say this say this in browser oh yeah so I have my background so now I have my form head form title is blue color and and it is centered so now I have to do that now so my form is we're heading element is h1 so here I have written this form name here in h1 tag so that is why h1 so in h1 m text align I have darling its center so I'm going the value Center and the font size font size actually say Charlie found size so I mean 50 pixels and color for that is color I'm going steel blue you can also give some direct names column names here so so this so now yes so I have my form title in the center so now I have to edit these things so now I'm gonna add it so I am taking the form element here I'm making the form element so this is the form element I'm gonna style that form element but now so now I am giving the margins margin as 20 pixels and auto and with hanging the form with form it as 320 pixels and color is teal blue you can give any when you are creating so no waveform is 320 pixels and it is 20 pixels margin so that is all I have I know I'm gonna style input types input types I'm giving padding padding 10 pixels unfold size inherit what this inherit value does is it inhibits the parent properties so now say this insulation Baga so how my padding so you see the boxes is increased so so that is it and I'm going to use some pseudo classes here so actually when I'm making this form is it contains many pseudo classes so you can learn those pseudo classes by creating this form so now what it is I'm creating so if you look at this form this form contains a blue steel blue background water stay blue water so now I'm doing I'm creating that so I'm giving so I'm using some pseudo classes here so input input and braces so type equals text and display as box block sorry and margin margin bottom and 25 pixels and with I'm going with 100% and water to pixel solid steel blue steel blue so now say this and see this just so I have given the type text so that it it changes only the text input fields so that is why so I have given the type - so now I have to apply these same properties to input type password also so that I am copying this and pasting and I am giving this password so now say this and say this and also an email type so now I'm doing the same thing there I am copying this wasting it and type email so now that so now I have to style these radio buttons and subby button so so now I have to give some margins to this radio buttons now I am going to create those margins input time type equals so these are sort of classes one type of pseudo classes type equals radio and I am giving the margins 0 the top value is top margin is 0 all right a margin is 8 pixels and bottom value is 25 pixels on left left value is 18 pixels so that is it oops forgot to so and I have gone the margins nowadays so I got some margin here and so if it is if you see this radio buttons so this radio buttons are not aligning with these input types so in order to align those things I'm using a first first tail pseudo class so here so I am creating input type equals radio and pseudo-class prom is pseudo-class values first child the margin left is zero so now say this and say this in browser so now they are aligned perfectly so now I have to style this submit button so let's go to text editor on by so input type equals submit input type equal to text and you submit so in the submit I am giving the width width of the button is 344 pixels and height of the button as 45 pixels and border I'm going bottom nothing no badah badah as none and background background unleash teal blue and color of the text is white now say this and say this in browser so know the width the width of this button is 344 pixels and height of the button is 45 pixel the background button background color of the button is steel blue on color of the text is white so that is it and now we have some functioning in this form see there are some blue it is changing colors one we are focusing this element so it is changing color to white so we all know we are how to do that so I'm gonna create that but these forms so now what I'm going to do is so here in the input type equal to text I am giving another property that is background property background and in the color some yellowish color so now say this see this so these two I know I need to give those same background to these three fields also so now I'm copying this property and type called password I have to give the same thing to the password as well on same thing to email us so that is so now say this so this is how so now when I when I am focusing this so it is not turning to white so what should I do okay whatow code so now what I'm going to do is on the input input : focus so when it is in focused State I want my background color as background of the input as white background is white now say this and now so it is nothing when I refreshed see how it's changed so now my background is white and one thing another thing is see when I am checking this these general buttons it is so when I click in mail it is popping up under it is increasing the size and turning to bold so now I have to create those two things so now input type equals radio and check the when it is checked so what is in check digital plus label why should I have given the label because we have this this label and this input types are associated with each other this four is male that means this label is for this ID this input array so that is why how to repair how to mention those label as well so now we want the font weight font weight as bold and font size as I'm going 18 pixels now say this let's see this now I'm nothing when I refreshed see you can see some change now if you observe this this font family is different from this some see this this this heading is different from this from so what I'm going to give is I am giving the font size is 1 e m / font family is 1.5 sans serif this is the font family so now say this and say this yep yes so this is the form same as this form so that's pretty much it oops I forgotten another thing so when I click on the submit when I holding click so it is turning to white so how do I do that so it is turning to white on the bottom is blue steel blue water bold ship shield blue water so so for this form there is okay see if you see this turning to white and nothing happens so know how to give the view that functioning so now I am copying this same same properties Here I am pasting it but I am giving the state as forecaster strip forecaster know so this and see this in browser I'm refreshing it see when I clicking oops I forgot to change the values so the background color must be white here white and this color should be still blue still blue and the bar is solid steel blue still glow now say this and see this effect yes so we have made everything so that's pretty much it for this tutorial guys hope you like this tutorial and follow all my tutorials on HTML CSS JavaScript and PHP as well you want my HTML tutorials link so please check the description below I have given all my tutorials links so so that you can learn everything so I'm gonna upload more tutorials like this I'm gonna create some projects on form different different forms so these one of them so thanks for watching please subscribe my youtube channel and I'll see you in the next tutorial

Channel: Wonky Code

Views: 284,201

Keywords: css, cascading stylesheet, tutorials, web design, forms, build, simple, html&css

Id: aPzNeDrRJ8Y

Length: 25min 48sec (1548 seconds)

Published: Sun Mar 06 2016