Sign Up Form HTML CSS | Create a Sign Up Form with Animated Input Fields

in this video i'm going to show you how to create the sign up form completely from scratch let's get [Music] started so to get started i'm opening up a codepen project right now in the html i just have a head tag with a link to the font family i'm going to use for this project and then beneath that i have body tags which are empty so to get started i'm going to go inside of the body tags of the html and to start off i'm going to create a form and i'm going to give it a class of form i'm going to place all the content within this form element and so first i'm going to include an h1 tag with a class of form title to be the title for the form next i'm going to include a description for the form so i'm going to include a paragraph tag with a class of form description i'm following the bem model for the naming convention here that's why i have the class form here and then i have form underscore underscore title here so that's the way i'm going to organize my classes beneath these two elements i'm actually going to begin the form design so each form element will include an input and a label and i want them to behave in the same manner so beneath this i'm going to start by creating a div with a class of form group and so that form group will hold the input and the label so then within that group i'm going to contain those two elements so first i'm going to include an input and this input will have an id of email because it will be the email field i'm going to give it a class of form input because that is how we're going to apply styling to it within the css i'm going to give it a placeholder of an empty string and i'm going to set the autocomplete to off so we can actually see that first input field in the document and then beneath that i'm going to create the label for that input so i'm going to create a label it will be for that email field i'm going to give it a class a form label and i actually want this label to be visible on the page so i'm going to give it the content of email so now we have an input and we have a label and so i want the password field to behave in the same way so i'm going to copy and paste this group but change its content to be appropriate for a password so for the input type of text instead i'm going to change this to password i'm going to modify the id as well as the label and i actually don't need to set the autocomplete off here so i'm going to delete that so beneath these two form groups i'm actually going to want to add a button to the page so here i'm going to add a button with a class of form button and i'm going to add text to this button of sign up so this is the entire structure for the html and the last thing i'm going to do is actually add content for the h1 tag and for that description tag so here i'm just going to add sign up as the h1 and then i'm also going to add a description to the paragraph tag so now that we have all the html written for this project we can jump inside of the css to start applying styling now within the css i added scss as a preprocessor which allows me to nest css elements and also declare variables so you can add a css to your codepen project by clicking on this little gear icon and then under css preprocessor you can select it there are various other kinds of preprocessors that you can add but i like scss so that's what i'm using for this project so first i like to declare variables for the project so that way i have all of my colors defined at the beginning of the project so i'm just going to add some color variables first and then beneath that i always like to add some basic styling like setting the box sizing set to border box and a margin and padding set to zero so then i'm going to add that so now with all of my setup defined i can actually start applying styling to the project so first i'm going to add styles for the body so i'm going to reference the body tag and first i'm just going to set the font family and the font weight for the project and then i want to add a really cool linear gradient to the background so i'm just going to add a linear gradient here and then i'm also going to set the height of it to 100 of the viewport height and i'm going to set the display of this to grid now if you're brand new to grid i have an entire crash course video that goes over all the basics so if you're interested in watching that video i'll link it in the description below and so with that display set to grid i'm going to justify the content and align the items in the center and then i'm going to set the text color for the project to a particular variable that i already declared so that's all the basic body styling and then beneath that i can apply styling to the actual form now remember in the html i have this form which holds all these elements on the page and so within that form i have a title a description two form groups and a submit button so to begin i'm going to add some basic styling to the form and then to each of the elements so for this form i'm going to set the width of it to 24 rem and i'm going to set some padding to 2 rem i'm also going to add a border radius of a variable that i already declared and i'm going to set the background color to white next i'm going to apply styling for the title so again in my html i added form underscore underscore and then title so within my scss i can just write and underscore underscore title to reference this element so that's exactly what i'm going to do so for this title i'm just going to add a margin bottom of 0.5 rem then i'm going to follow a very similar procedure for the description so here i'm going to write and description and i'm also going to add a margin bottom here so that adds some breathing room to the page the next thing i'm going to do is work on each form group so here i'm going to write and group and i'm going to set the position of this element to relative and it's because i'm going to set the position of the label to absolute later on and it needs something to grab onto so that's why i'm setting the position relative here i'm also going to define the height of this element as 3 rem and i'm going to add a margin bottom next i'm going to work on the input so here i'm going to write and input and for this element i'm going to define the height and width to 100 of the parent element i'm going to add a 2 pixel border and also a border radius now if i were to type inside of this input field we can see that it doesn't have the same text style applied to it as the rest of the page so here i'm going to set the font family and the font weight to inherit i'm also going to set the color to inherit the outline to none and i'm also going to add a specific padding i'm also going to set the background to none so now if i were to type inside of this input field we can actually see that correct font family applied to the project next i'm going to work on some hover and focus dates so beneath this i'm going to write and hover and i'm going to add a border color and i'm going to do a very similar thing for the focus state as well so now if i were to hover on this input field we can see that the border changes color and if i were to tap inside of it it changes to a different color as well next i'm going to apply style for the actual label so for this label i want full control over its position on the page so here i'm going to set the position of it to absolute i'm going to define the left and top placement i'm going to add some padding of 0 and then 0.5 rem i'm going to define the background color as white and then i know i'm going to want this to animate upwards in the design so i'm going to apply a transition here for the top left and font size and for each of these values i'm going to set it to 200 milliseconds with an ease in so we will define this transition later on beneath this i'm going to apply styling for the button so i'm going to set the display of it to block and i'm going to set the margin left to auto so that way it's pushed to the right side of the page i'm going to add some padding and i'm going to add a background color this also doesn't have the correct font applied to it so i'm going to set the font family and font weight to inherit i'm going to add a border radius and then i'm going to set the outline to none the border to none and then the cursor to pointer and i also want this element to have a transition effect as well i want to modify the background color so here i'm going to set the transition to the background color in 200 milliseconds with an ease in and then beneath this i'm going to add a hover state for the background color and i'm going to set it to a different color so now if i hover over it there's a transition effect from the primary to the primary dark color cool so this is looking really good so far so the last thing i want to do is apply transition effects for this label so if i were to tap inside of this input field and start typing this label stays in its position and therefore it doesn't have the desired behavior that i would like it to so i'm going to add a transition effect for this label so beneath this i'm going to reference the form input and when that form input is in the focus state i wanted to transform a sibling element and that sibling i want to change is the form label so this is saying that when that input is in the focus state i'm going to change the label so when the user taps inside of this input field i want this label to move upward and i want it to reduce its font size so here i'm going to modify the top left and the font size values so now i'm expecting that when i tap on this input field i will see this label transition so i click into it and we can see that it actually moves upwards great so now i'm actually going to type in content in this input field and when i click away from it it returns back to its original state and that's because we don't have focus on this element anymore but if there's actually content within here i actually don't want the form label to go back to its original position i want it to stay like this so i have to add another state to the css so i'm going to add a comma and i'm going to say that when that form input is not showing the placeholder which means that there's actually some content within it and the form input is not in the focus state anymore i still want that form label to be in this state so if this is a brand new concept to you i have an entire video dedicated to this specific topic so i'll link that video in the description below so what this is basically saying is that when that form input is not showing the placeholder meaning that someone typed in content here and the element is no longer in the focus state i still want that form label to have these properties so i have content in the email field if i tap away it still retains that label positioning same with the password field so if i were to go inside the password field i'm going to write some text and i'm going to click away it still retains that label positioning so there you go that's how i created the sign up form completely from scratch please let me know if you have any questions on the topic and subscribe to stay up to date with my latest content thanks for watching [Music]

Channel: Angela Delise

Views: 2,661

Keywords: sign up form, sign up html css, sign up form html css, sign in form html css, html css for beginners, login page html css, log in page html css, login html css, log in html css, css grid form, grid form, input label animation, input form animation, input label material transition, input label transition, input form transition, form animation, form transition, input box animation, input box transition, input box html css, input animation html css, input transition html css

Id: pfwEz3Zo4mA

Length: 12min 34sec (754 seconds)

Published: Mon Feb 08 2021