How to Build a Login & Sign Up Form with HTML, CSS & JavaScript - Web Development Tutorial

hey guys hey going my name is dom and in today's video we're going to be creating a login signup form using html css and javascript okay so this right here is going to be the finished product now as we can see it's a fairly straightforward login form but the most outstanding feature of this form is that if i was to press on this creates a counter button it's actually going to change the form itself to of course be a create account or sign up form okay so we can then go back and forth between each one of these forms and this right here is fairly easy to achieve using just a tiny bit of javascript okay so let's see a few more features which the form is going to support so for example if i was to enter in a username and a password right here we can see we get the message incorrect username slash password combination and this right here can also be a success message okay moving on to the creates accounts form each one of these input fields is going to have their own validation so for example if i was to say here a 5 character username and then try to submit we can see right there we get username must be at least 10 characters in length ok so you can add your own custom validation to each one of these input fields themselves okay so let's go inside this tab right here and begin from scratch to of course create what we just saw okay so going inside the text editor we can see right here i've got an index html page okay now inside here of course there's not much going on but i have included both here a main.css file and a main.js file and they are of course linked up right here in the stylesheet and the javascript right down here now i've also got a background image so this right here is going to be completely optional okay you don't need to have a background image if you don't want to you can simply just specify a background color instead of an image okay so now i'm just going to open up both the main.css and the main.js and then hide the the sidebar here just for of course more space to see what's actually going on so i'll just zoom in and we can start writing the html okay so for the html uh we can first create a new div right here called container okay so this right here is going to be the entire white block itself okay and now within here we can write a new form with a class of form and an id of login okay so this right here is gonna be the login form now if you want to submit your form using a traditional form post you can of course specify here something like posts but in my case this right here isn't required so i'm just going to remove this now i want to mention also that the actual form itself can quite easily be submitted using ajax you can simply prevent default and submit the form i've got a separate video on doing that if you want to check that one out okay so anyway i'll just uh go inside here now so um inside the login form so there's actually going to be two of these forms okay there's going to be one for login and one for sign up okay so for the login form itself we can then have a title we can say h1 with a class of form underscore underscore title inside here we can just say login okay now for the incorrect uh username password combination message we can achieve this using a div okay so we can say right here a new div with a class of form underscore underscore message and also a class of form underscore underscore message dash dash error okay inside here we can then say incorrect username password combination something like that now of course this right here is going to be rendered conditionally based on if the user actually you know submitted an incorrect username or password so of course when the page first loads up you don't want to have this filled out so it's going to be up to you to handle the existence of this text right here incorrect username password combination okay so we're just putting it here for now so we can actually style it using css okay now moving on to the actual inputs themselves we can create a new div right here called form underscore underscore input dash group okay so this right here is going to be the input group containing both the input itself and also the input error message okay so inside here we can just say for example inputs with a class of form underscore underscore input okay and inside here we can just put a place holder so we can say right here username or email okay as the actual prompt now also in the case of the login form we want the username or email input field right here to be automatically focused for the user so we can say autofocus right here to ensure it is focused on page load now if you want to have a a custom error message for the input field right here we can quite easily create a new div with a class of form underscore underscore inputs dash error dash message and inside here we can just say for example um let's just do um this is an error message okay so this right here is gonna make a lot more sense when it comes to the create account form but just so we can actually style up the form we're going to have this right here later on we can simply remove this message so i might just stop here and i want to refresh the browser and we get something like this okay so as we can see of course all the html is being rendered out to the screen okay now i want to go back inside here now and i want to talk about the naming convention of my classes so i'm using the block element modifier css naming convention which is why you're seeing all of these underscores and dashes and things like that i've got a separate video talking about bem if you want to check that out but if you don't like this naming convention right here you can of course you know choose to name your classes whatever you like okay but i recommend you use this structure right here so let's just let's just copy this right here for the actual password so we can say right here a type of password then we can say right here the password as the placeholder and we can simply remove this error message right here in the case of the password okay now we're going to also need a link to say you know forgot your password or don't have an account sign up things like that so we can make a new paragraph down here with a class of form underscore underscore text okay and inside here we can place a new link with a class of form underscore underscore link and inside here now we can make this an href of hash and we can say right here forgot your password as a question okay now of course you may want to link this this anchor tag to some sort of reset password page but in my case i'm going to keep it empty okay we can simply copy this code right here and do the exact same thing for the message which says of course don't have an account um creates accounts okay so saving this and refreshing gives us something like this okay so very shortly we're going to move on to the css but we just want to go back inside here now and add an id for the actual link right down here so for this one we can simply remove this href and we can say id and we can say link creates accounts okay so this link uh you know the the creates account link isn't going to have its own url okay this one needs to simply display the next form so with that being said we can skip out on the href attribute right here we can just copy this and paste it on this side you know what to be honest you can probably include an ahref if you want to so you can probably just say href and make this dot forward slash but the reality is it isn't actually required in this example so we can just leave that right there but of course this id is going to be important because in the javascript we need to reference this anchor tag right here now let's also create the actual login button okay so let's go right up here between the form input group and the actual paragraph and we can say button with a class of form underscore underscore button and right here we can give this button a type of submit okay cool then we can simply just say continue something like that so now saving this and refreshing we have this right here so now we are basically done with the html for the login for the login form we can move on to the css okay so let's go inside the main.css file now we're going to be starting here with the body okay so for the body itself we can define a couple of css properties or variables so we can say right here dash dash color dash primary is equal to the decode green color so we can say zero zero nine five seven nine we can now uh duplicate this and we can make a primary dash dark so this one right here is going to be a darker version of your primary color so we can say for example 0 0 7 f 6 7 okay let's make one more color or a few more colors so we can say here color dash secondary and for my secondary color i'm just going to say 2 5 2 c 6 a that is just a dark blue and we can make two more colors for for error and success so we can say right here color dash error is going to be double c and then four threes so of course cc three three and three three then for the color success we can simply just say um four bb five four four okay so the very last property here is going to be dash dash border radius and for this one we can just say 4px so um the purpose of these properties or these variables um is so we just define these these values once and then we can simply reference them multiple times throughout the style sheet in order to have a single source of truth for these values okay so we can move on to styling up the body a bit more so we can say right here setting a margin to be zero then we can say heights at 100 vertical height so 100 vh then we can say display and make this say flex with align items of center okay and i justify content of center so these three properties right here are going to vertically and horizontally center our actual container for both the forms okay we can set a base font size of 18 pixels right here so just stay slightly larger compared to the default of 16 and for the background in my case i'm going to say background set this to be a url at forward slash background.jpg now like i said earlier if you don't have a background you can simply say background and make this your primary color so for example you can instead say this right here you can do that then put inside here your primary color right there and of course not have this so that is if you don't want to i want a background image if though you have an image you can simply just of course place this right here to include your image now we can also say background size and make this to the cover that way the image is actually going to take up the entire width of the background okay so now saving this and refreshing we can see we get something like this so of course we can see the actual background is working and we can see the actual container right here is uh centered vertically now um i might go back inside here real quick and make sure okay so right here this should be justify content to be center so now let's save and refresh one more time we can see now of course the form is centered okay so everything's looking quite good some you know so far we can move on to styling up the actual container itself so for the container let's go back inside here we can target the class of container and we can say a width of 400 px and a maximum width of 400 px so essentially this right here is going to of course set the width but also it's going to make sure um you know when you get down to a smaller device the actual width is going to shrink down up so it's going to shrink down to whatever it needs to be okay so we're going to see that very shortly let's just continue here so we can say margin make this 1 rem then we can say padding at two rem so this right here is basically just saying one units of the base font size so essentially one um one rem is going to be 18 px and two rem is going to be 32 px of course 2 times 18 gives me 32 okay so let's go down here actually that gives me 36 my mistake but anyway we can now say box shadow and set this to be 0 0 40px then rgba 0 0 0 and then 0.2 okay we can also say border radius set this to be var then pass in here your variable for border radius we can also say background and make this just a white okay we can now save this and refresh and we see we get something like this okay cool so everything is slowly coming into place now i want to show you this width width situation so if i was to go on a mobile device right here we can see the width is going to shrink based on the mobile the mobile phone with okay so it's going to be able to be responsive right there and of course shrink down as it needs to okay so let's move on now to setting a font for all of this stuff okay so let's go inside here we can target the container then we can also target if i can just spell this correctly so we can target the container we can target the form underscore underscore input fields we can target the form underscore underscore button then we can say font and set this to be 500 one rem then quickstand sans serif so right here it's gonna of course be your own fonts whichever font you choose of course i'm just setting the font weight to be 500 i prefer a thicker font for the base font in many cases but of course having a normal front weight is perfectly fine here so if i was to save this and refresh we get something like this okay so i've actually got the quicksand font installed on my pc if you want to include your own custom font uh you can do so using fonts.google.com and you can simply go inside here you can choose a font i recommend choosing a sans serif font right here so once you choose the font so for example if i was to do let's just choose open sans okay you then want to select your font weights so in my case i want 500 right here so i want to say down here make sure i select the 500 version so unfortunately this font doesn't have that so let's just go back and choose something different so let's just choose latto okay this one is also not the one so let's just try roberto roberto has 500 right here so make sure you choose 500 and also maybe the base font so 400 and also maybe the bold right here so once you choose all of these font weights you can simply go inside here press embed and copy this link right here and paste it inside your html head and that is going to give you access to that font okay and it also tells you how to use it so for example right here we can say it's saying to use it like this fun family roberto then sans serif okay so let's go back inside here now and of course continue with the css so we can move on to now styling up the actual form itself okay so we can firstly just target form then we can say anything colon first trial so basically right here we're going to say margin top and set this to be zero okay we can do the exact same thing for the last child so right here this will be margin bottom and set this to be zero so the reason for this is because we have an h1 and a paragraph tag as the first and last child of the form so we don't want those extra margins to be visible okay so watch the top on the bottom here if i refresh we can see those get eliminated right there and everything is a lot more consistent now we have even space on the padding on the top and left side right and bottom okay so moving on now we can target the form message so this one right here so for this we can simply just go inside here and we can say form underscore underscore message and we can begin by saying our text align and let's make this in the center okay we can also say right here margin bottom set this to be 1 rem ok now for the two modifiers so essentially of course our message can be error or success so we can simply copy this class and we can say dash dash success so for this success error we can say color and make this var then pass through here color slash success let's do the exact same thing for the actual error so we can say message then pass through error we can say color dash error okay so now saving this and refreshing we can see right here we of course get the red error the reason for the red error is because of course we have both the four message right here and the four message error class okay so having these two classes is going to apply the font family sorry gonna apply the text align and the margin but also the color right there if i was to change this to be success it is now going to be green and we can see that happening right there so of course in your javascript or your server side rendering you want to of course output the correct error message style okay so going back inside here we can now move on to styling up the actual title so let's actually place the title up here we can say form underscore underscore title and for this one we can simply say margin bottom set this to be 2 rem and a text align of center okay saving this and refreshing we get something like this okay so now that we're actually done with the incorrect username password combination message we can simply go inside the html and we can just remove the content right here that way um the form is just going to be a little bit cleaner to work with okay so this right here so now let's move on to styling up the actual input fields themselves okay so for that one let's go back inside here we can target the form input group class so inside the css we can say form dash inputs sorry my mistake form underscore underscore input dash group and for this one we can simply say margin bottom and set this to be 1 rem that way there's going to be some space between each one of our input fields so let's refresh and we get this right here so just some space between of course the input fields and the continue button right down there okay so moving on let's style the actual input fields themselves so let's target the form sorry my mistake i'm just a bit um got a bit of a sore throat right now but that's all right so form input we can target this and we can say display and set this to be block okay we can also say width and make this 100 okay then we can say some padding the padding can just simply be 0.75 rem a box sizing of border box okay we can also say border radius make this bar then pass through here border radius okay let's set the border to be 1px solid then just a light gray we can set the outline to be none um the background can be also a light gray but um a lighter gray compared to the border right here now we can also say transition and set this to be background at 0.2 seconds and also the border color at 0.2 seconds so basically as the input fields gain focus we're going to be animating or having a transition on the background color which we're going to see very shortly so just saving this and refreshing we get this right here okay so fairly straightforward as we can see also if i refresh we can see right there of course the username has automatic focus due to our autofocus attribute right here okay so speaking of focus let's go inside here and we can say form input colon focus and for this one we can just say border color set the border color to be your primary color so of course right here passing through var then color primary we can also say background and set the background to be just white okay so now saving this and refreshing we can see we get a nice transition for the actual background and of course the border color on the input fields themselves okay so now we can style one last thing on the actual input fields themselves and that is going to be the states of an error so basically when you have validation errors so let's go inside here we can target the class for form underscore underscore input dash dash error so for this one we can just say color or sorry yeah color the color can be var then pass through here color dash error okay now we can also say border color and set the border color to also be color dash error so this right here is obviously showing the advantage of having your css variables so of course if i want to change the error color i can i can quite simply go inside here and i can change it once and it's going to change for of course both of these properties okay but anyway now that the actual class for error has been set up we can go inside the index.html and we can say for example let's add the form input dash dash error to of course the password so now saving this and refreshing we can see we have the error properties being applied to the password if i was to type in here an error we can see of course the text color is red okay so later on we're going to be learning how to use javascript in order to present these errors and of course toggle this state but for now we have the styles ready okay so let's go back inside here and just remove this form input error class from the actual input field itself okay so moving on now let's go back inside here we can we can style up the actual error messages for the individual form sorry input field okay so for example let's go inside here and we can say our form underscore underscore input dash error message so for this one we can simply just say a margin top of 0.5 rem we can give a font size so the font size can just simply be 0.85 rem okay and a color of once again bar referencing our color for the error okay so now saving this and refreshing we get right here these styles being applied to of course the error message right there so um the very last thing or the few last things to style is going to be of course the button and these two links right there so let's go inside the css i might just go inside here once again and just remove the text for the error message just so it looks a bit cleaner okay and we can style up the form text class right here actually you know what let's start with the button okay so with the button we can target the form underscore underscore button class and we can say a width of 100 percent okay we're going to be setting the padding to be one rem top and bottom and two rem left and right we can say a font weight set this to be bold and we can also say a font size of 1.1 rm so just a slightly larger font size compared to the base we can also say color set this to be just triple white or just white we can say border set this to be none a border radius of once again referencing our border radius property we can say outline make this none a cursor of pointer and lastly we can say background and set this to be our primary color right here being of course var then primary color okay now when the actual form gets hovered over or sorry the button gets hovered over we can just target that right now so we can say form button colon hover and for this one we can just say background make this var then using our primary color but the dark version right here okay so now saving this and refreshing we get this right here of course the styled form button now what about when i actually press on the button i want something to happen so let's go back inside here we can target the form button and we can say colon active so right here of course these styles are going to be applied when you of course have active on the actual button so basically when you click on the button we can say transform set the transform property to be scale at 0.98 so basically we're just reducing the size of the form button by two percent when you press on it so now saving this and refreshing we get this right here if i was to click on the button we get that right there okay cool so now let's move on to the actual text and the links so back inside here it's all going to be very straightforward we can simply target the form underscore understood our text class and we can say text align and make this center okay quite straightforward and we can move on now to the link so we can say form underscore underscore link and for the links we can say color we can make this our secondary color so we can say color secondary right there we can say text decoration and set this to be none okay and we can say cursor and make this pointer now when you hover over the links we can say colon hover right down here so upon hovering over the links themselves we can simply say text decoration and make this underline as the default so now saving this and refreshing we get right here of course these styles applied to the links themselves so we are now done with all of the css we can move on to designing the sign up or the creates account form and also the javascript okay but first i want to go inside the css and do one last thing so up here where the form is we can say right here form dash dash hidden okay so essentially this right here is going to say display and then none so we're going to be toggling the existence of the form hidden class between the login and the sign up form depending on what the user selected so basically if i was to add the form hidden class to the login form so right up here if i say form-hidden save this and refresh we can see of course the form becomes hidden so in this case i want the sign up form to now be visible okay so to do that we can go back inside here and we can simply uh make a copy of this entire form right here okay and this one can simply be id of create accounts okay but also it's not going to have this form hidden so now that one is going to be visible so now we can simply say inside here creates account okay and we can leave this message that's perfectly fine for the input fields we can simply change those to be let's just do a username okay so we can just copy all of this then we can say email address okay then we can say password once again then we can also say confirm password right here okay in the case of the sign up form or the creates account form i don't want the forgot your password so let's get rid of this and we're going to change this anchor down here to instead be already having account then you can sign in just like that now also this id needs to be linked then we can just do link login okay so now we can just save this and we can refresh and we get this right here okay so now let's move on to the javascript which is going to toggle the existence of this form hidden class on each one of these forms when we actually press on these links down here so let's go inside the javascript right up here and we're going to begin by saying uh document dot add event listener and we can listen for the dom content loaded event so right here this is basically going to say once the document is ready to be worked with we can run this function and inside here we can get a reference to both the forms so we can say const login form is equal to document.queryselector then pass through here hash and then login okay we can do the exact same thing for the signup form or the or the create account form so we can say create account form equal to right here then pass through create account as the id okay so now we can we can go we can grab a reference to both the uh the link creates accounts and the link login so we can say it right up here document dot query selector then pass through here link creates account so basically we can then say add event listener so when you click on the create account link we can quite simply go inside here and we can say in this case i want to hide the login form so we can say login form dot class list dot add and we can add the form dash dash hidden class to that form in the case of the create account form this one needs to be visible so we can say right here create account form then pass through remove form hidden so right there is our toggle okay when you click on the creates account we're going to hide the login form and we're going to remove the hidden class therefore showing the create account form okay let's do the exact same thing this time the opposite way around we can say when you press on the link login so for the you know login link we can remove the form hidden from here and we can add it to this one down here so now saving this and refreshing we can see upon clicking on the sign in we get the sign-in form right there now unfortunately um there is there is one more thing to do and that is to just prevent the default behavior of the link itself so inside here we need to grab a reference to the uh elements or the event sorry so we can pass through here e in both of these and we can simply say e dot prevents default so obviously when you click on a link it is going to go to the actual page in the href so by doing prevent default it is going to prevent that default behavior so in this case by having this right here it is not going to redirect uh via the atrium so now refreshing and clicking on the link once again we can see we don't get that redirect and of course it is working in both ways okay cool so let's move on now to seeing how we can essentially set those errors on the form okay so we're going to start with actually setting the error for the login form the username password incorrect message so for this one i just want to go back inside the html and i just want to make the login form visible by default so let's remove this hidden class and instead add it to the the creates account form so we can say form dash dash hidden okay so when it comes to setting the contents of this message right here we can quite simply go inside the javascript and we can define a new function so we can say right up here function set form let's do set form message okay so right up here this will take in the form element itself so basically one of these two right here it's also going to take through the type so either success or error and it's going to take through lastly the actual message so right here we can simply then say uh const let's just do message element is equal to form element dot query selector we're going to be selecting the form underscore underscore message element inside our given form so of course in the case where you call this function and you pass through the login form it is going to select right here the message within the the login form right here in this case being this one right here okay so we can say now we can say message element dot text content is equal to the message right there okay and we can also say right here message elements dot class list and we can simply remove we can remove both uh the the form underscore underscore message dash dash success and the error so let's go inside here copy this and paste it so basically right here we're just resetting the styles on the actual message itself so now we can simply say message element dot class list then dot add and we can add um the form underscore underscore a message dash dash then pass through here the type provided by the actual parameter so now if i was to call you know set for message pass through login form then pass through success like this then i say you know you're logged in something like that it is of course going to then add the form message success class and of course also set the message as the text content okay so that being said let's go down here and we can say document actually we're going to say login form so we can say login form okay dot add event listener and we can say submit right here so basically upon submitting the login form we can simply then grab the event object right here and in this case right here if you were to you know submit the form using ajax or fetch right here you probably want to say e dot prevents defaults okay that is going to prevent the form from being submitted through a traditional page refresh or submission and now right here you can say you know perform uh perform your ajax login or whatever you're doing so ajax fetch login okay and then depending on the the return value if it was success or failure you can simply then just say you know set for message you can pass through here log in for once again you can say error and you can say invalid username password combination so something like that let's save this and refresh and try to submit the login form we can see now upon submitting we get right here incorrect username password combination so that is how to set um your error messages if you want to you know or if you are submitting it through a traditional page reload using php or something like that you can probably render out your message using the server side in php but of course this option is also available okay so what about setting the messages on the individual input fields themselves so for that one we can make a new function called sets input error and we can say right here input elements okay so taking in the actual input field itself then we can take through the message so for this one we can simply say input element dot class list dot add we're going to be adding the class of form underscore underscore inputs dash dash error and that right there as defined in the css right down here somewhere it is going to make the color and the border to be red so for that one we can set that class but also we need to then say input element dot parent elements okay so grabbing the actual parent input group then we can say query selector and we can select uh the form underscore underscore input dash error dash message elements then we can say text content equal to the message right there so basically we're starting with the input field itself so this one right here for example so let's just do username for this signup so we can say the input field itself we're going to go to the parent right up here and then we can select the input message element right here and set the text content so that is what is happening in this line right here so now let's quite simply go down here and we can say um let's do let's do document.query selector all so we're going to basically say right here selecting every single input element itself then we're going to say for each one of those elements okay we can grab the input element then we can say right down here when the input element um we can say add event listener so when the input element is blurred so basically when the user takes their focus off the actual input field we can simply say right here and we can check if we are editing a particular input field so for example if i was to go back inside here and i give the creates account username field and id of let's just do something like you know sign up then do username so sign up username as the id okay so in that case we can just copy this id let's go inside here and we can say if e dot target dot id is equal to then pass in here the sign up username so basically if the user is blurring or taking focus away from the username field and also e.target.value.link is more than zero so basically if they've actually put a value inside the username field and also e.target.value.length is less than let's just do 10 for example we can simply set the error so we can say set input error then pass through here the input element then we can say username must be at least 10 characters in length something like that so now saving this and refreshing we can see now upon going to the create accounts if i was to go inside here and put one character we get right here username must be at least 10 characters in length so right here with this block of code we're basically saying on every single input field when the user uh you know takes their focus away from so basically when they click out of the input field we can simply do a few checks so in this case we're just saying is that input field the actual username field if it is then we're checking the length and of course if it is not valid we're going to simply set that error message okay now the very last thing to cover is going to be when you want to remove the message right here so for example if i was to change this to be decode okay i want this message to go away so to achieve that let's go back inside here and define a new function so we can say right here function clear input error we can pass through here the input element just like that okay then we can say input elements.classlist dot remove and we can remove the form underscore underscore input dash dash error class right here so basically we're doing the exact opposite of what we did right up there so i can copy this and paste it down here and just clear out that message okay then back down here we can now check for the input elements at event listener this time listening for input so basically when the input element gets input from the user we can simply say e then we can say right here a clear input error then pass through here the input element itself so this right here is now going to by default clear any errors which are set against an input field when the user types inside of it so now saving this and refreshing we can now you know create this error right here for the short name then we can do c and we can see right there of course the message goes away when the user provides input okay so that right there is how to create a login signup form using html css and javascript i'll be leaving all of the code in a link below if you want to download it or check it out yourself okay thanks for watching guys and i'll see you later

Channel: dcode

Views: 174,559

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, web design, web app, app, application, html5, html, css, css3, styles, stylesheet, style sheet, login form, login, sign up form, sign up page, signup, create account, input fields, input, styling, switch, landing page, welcome page, register, registration form

Id: 3GsKEtBcGTk

Length: 47min 38sec (2858 seconds)

Published: Mon Aug 31 2020