How To Create Login & Registration Form Using HTML CSS And JavaScript

hi guys welcome back to another video of easy tutorials today in this video we are going to create the sign up and sign in form here on my computer screen you can see one sign up form with the name input field then email ID and password and here we have two buttons one is sign up and the second button is sign in if I click on the sign in button you can see we will come to the sign in form where you have only two input field which is email and password and if they will go for sign up form they will have to enter the name also email ID and password this transformation from sign up form to sign in form looks very smooth same email and password field will be there and if you will move to the sign in form this name field will be hidden and if we will move to the sign up form then it will display the name input field with smooth animation this looks very beautiful and you can see we have the smooth transition in the background of this button also so we will create this sign in and sign up form using HTML CSS and very simple JavaScript so keep watching this video till the end but before starting this video please hit the like button and subscribe to my channel easy tutorials now let's start the video here in this folder I have one HTML file one CSS file and one image that I will be using on the website background now I will open these files with my code iterator which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file in this HTML file I have added this link tag that will connect the HTML and CSS file next we will add some content in the body tag that will be displayed on our web page so in this body we have to add a image on the full screen so here we will add one div with the class name container next we will add the image in this container so add this class name here in this CSS file and here we will add the width and height then we will add the background image and over the background image there will be one dark layer in the blue color so here we will add linear gradient and then two color code so this is the first color code add a comma and enter the second color code after that we will add comma and URL and in this URL we have to add the file path of the image so in the folder we have added a image called background dot PNG so we will add the file name after writing this we will add the background position background Position will be centered and background size will be covered and let's add the position relative after adding this we will come back to the folder and open this HTML file with any web browser so you will see this image on the complete web page and there is a dark blue layer on the image let me close this browser and I'm going to open this browser with the visual studio code extension called live server so that it will refresh the website automatically whenever we will add any changes in the code file so you can see the same web page again but this URL has been changed so after adding this we have to add one box in the center of the webpage where we will add the text and other input Fields so let's come back and within this container let's add one div with the class name form box in this one there will be one title so write title in H1 let's add the title sign up after this title there will be form so write the form tag in this form there will be some input Fields with the icon and buttons so here we will add one div with the class name input group after that we will create another div with the class name input field and in this input field there will be one icon and input box so here we will add one icon for that we will come to the font awesome website open this website create an account here for free then go to kids and click here then you will get one line of a script just copy it and come back to the HTML file and place it here just above the closing head tag like this after adding this again come back to the same website and click on icons and here you can search for different icon that you want to use on your website so here we will search for user let's click on this free so we will get the free icons now I will click on this one the first icon and here we will get this one line of code just copy it and place it here where you want to display the icon so right this icon here and after this icon there will be one input box so write input input type will be text and the placeholder will be name so it is the name input field like this now again duplicate this input field just copy this one and paste it again so in this second one we will add another icon and now we will change the input input type will be email and placeholder will be email like this now again we have the another input field so here the input type will be password and placeholder also password after that we have to update this icons after adding this again come back to the website you can see the text here sign up then we have the icon and input field another icon and email input field then another icon and password input field so we have to move all these things in the center of the web page so just come back and here you can see we have added the div with the class name form box so we will add the CSS for this phone box just come to the CSS file and add this class name here and here we have to add the width width will be 90 percent and the maximum width will be 450 pixel then Position will be absolute top 50 percent left 50 percent then transform Translate minus 50 and minus 50 so that it will be in the center of the webpage and here we will add background triple F which is white then we will add the padding it will be 50 pixel from top 60 pixel from left and right side and 70 pixel at the bottom and the text align will be centered we have to add minus 50. minus 50 and minus 50 percent now it is in the perfect Center next we have to add the CSS for the title which is sign up so it is written in the H1 tag so come to the CSS file we will add the class name form box then H1 so for this H1 we have to increase the font size so the font size will be 30 pixel and after that we will add the margin at the bottom so margin bottom will be 60 pixel and we will change its color then Position will be relative after adding this you can see this title here and we have some space below this title now we have to add one underline in this title so just come back and here again write this form box H1 and then we will add the pseudo element after let's add the content it will be empty then width and height border radius will be 3 pixel and background will be absolute at bottom minus 12 pixel left 50 percent and transform translate x minus 50 percent after adding this again come back and you can see one line just below the title which is sign up after that we have to add the CSS for the icons and input box so just come back and here you can see we have the class name called input field so just copy this class name write it here in the CSS file and in this input field we will add background after that we will add the margin margin will be 15 pixel and 0. then border radius very small 3 pixel and display will be Flex so that icons and input box will be in the same horizontal line display Flex align items Center after adding this again come back and you can see we have this color here it is in the full width but this input box is not in the full bit so just come back and here we will add input and for this input field we will add width hundred percent and background will be transparent then border will be zero and outline also zero let's add the padding that will be a space inside the input box now this input box looks good we have to add the CSS for the icon in the icon we need a space in the left side and we have to change its color so here you can see we have the icons with the tag name I so let's come back and here we will add input field I so the margin left it will be 15 pixel then color so it looks good after that we have to add a message in the bottom so just come back and in this HTML file after this div here we will add one message in P tag so we will add the P tag here and let's add last password and in this one there will be one link so we will add the a tag and the link text will be click here after adding this come back and you can see this link here so we have to add this CSS for this one so just come back and come to the CSS file here we will add form p te text align will be left so it will be in the left side and we will change the font size it will be 13 pixel and in this one we have added the link with the a tag so we'll add a also and for this a text decoration will be none then color okay now this link looks good after that we have to create two buttons so just come back to the HTML file and after closing of this div and above this closing of form tag here we will add one div with the class name BTN field because we have two buttons so we have to align them so in this vtn field we will add two buttons so let's add the button button type will be button and write the button text sign up duplicate this one and here we will add sign in so we have two buttons after adding this button come back to the web page you can see these buttons here which is very small sign up and sign in so we have to design this one just come back and come to the HTML file copy this class name BTN field write it here in this CSS file width with 100 then display Flex and justify content space between and in this one we have added buttons so right button tag let's add the flex basis it will be 48 percent let's add the background for the buttons so here we have added the background then color this will be the text color of the button then height and Border radius then border 0 outline 0 cursor pointer here we have added transition background once again so it will take one second when we will change the background so after adding this you can see these button looks good we need a space between the form and button so just come back you can see we have the class name here input group let's copy this one and come to the CSS file for this input group we will add height so the height will be 280 pixel now we have a space between the input fields and button next we have to change the color of the second button that will look like a disabled button for that just come back and come to the HTML file and in the second button we will add one class name so let's add a class name disable after adding this come back to the CSS file here we will add BTN field button Dot disable for this disabled button we will add background so here we will add the different background color and color that will be the button text color so you can see change in the second button which is sign in so we have designed everything next we have to add the function if we'll click on the sign in button it should display the sign in page where we will get two input Fields only and this title will also change from sign up to sign in for that just come back we have to add the click feature on these buttons so on these buttons we will add one ID sign up vtn and in the second one we will add one ID sign in vtn and we have to display and hide the input field which is text input field so in this text input field we will add one ID you can see the class name input field so here we will add one ID name field this will be for the name input field and we have to update the text in this title also so in this title we will add another ID title we have added four IDs title name field and sign up vtn and sign in vtn next just come to the bottom Above This closing body tag here we will add a script tag a script open and closing tab here we'll add the variables for all the element where we have added the ID so here let's add sine of vtn equal to document dot get element by ID and in this ID write this sign up vtn now duplicate this line and it will be sign in vtn and this also sign in vtn now the third one will be name field here also name field and the fourth one will be title and here also title so we have added four variables next we have to add the click function on the buttons which is sign in vtn and sign up button so here we will add sign in vtn dot on click equal to function so whenever we will click on the sign in BTN it should display the sign in form it means it will hide the name field and it will change the title so to hide the name field here we will add name field dot Style Dot Max height it will be 0. so when the max height is 0 it will be hidden but in the CSS we have to add one more thing let's come here and here we have the input field so in this input field we will add the max height let's add Max height 65 pixel then we will add the transition Max height zero point five seconds and overflow hidden like this and after applying this come back and if I click on this sign in button you can see this name field is hidden let's refresh the website and it is visible and if I click on the sign in button you can see it is hidden but if I click on this sign up it is not getting visible so we have to add that one also so just come back come to the HTML file so after clicking on this button it is hiding that field so after that we have to add the different title also so right title Dot inner HTML equal to sign in so it will change the title and after that we have to change the button color so right now we will add sign up vtn Dot classlist Dot add so whenever you click here it will add the class name disabled so it will change the color duplicate this one and here we will add remove and sign in so in the sign in button it will remove the class name disable so you will get the colored button after adding this comeback and if I click on the sign in button this button will be colored you can see this button in the color background and we have updated the title also which is sign in next we will add the click feature on the sign up button so just come back and duplicate this complete function now just replace this one it will be sign up vtn dot on click equal to function then here we will add 60 pixel it will be sign up and here update remove and add that's it after updating this come back to the website again and you can see if I click on the sign in button it is displaying the sign in form with the title sign in we have two input field email and password and if I click on the sign up button you can see it will display the signup form with the sign up title name input field email input field and password and the color of this button is also changing if I click here it becomes colorful and if I click here this button becomes colorful this name input field appears and disappeared with smooth transition so finally we have completed this sign in and sign up form with some animation I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials thank you so much for watching this video

Channel: GreatStack

Views: 424,235

Keywords: Login Form, Sign Up Form, Sing In Form, Registration Form, Web Development, HTML and CSS, Login and Registration for website, web design, html from, html login form, login form design, website UI design, HTML, CSS, JavaScript

Id: LTPGyaEyTI4

Length: 24min 38sec (1478 seconds)

Published: Tue Nov 15 2022