- Login and Registration Form in HTML and CSS With Source Code
- Step1: Login And Registration Form In Html Code
- Step2: Style Login And Registration Form Using CSS Code
- Create A Login Page Form Using HTML And CSS — With Source Code
- What will our login page look like?
- Login Page HTML Structure
- Explanation Of Our HTML Code
- Login Page CSS Code
Login and Registration Form in HTML and CSS With Source Code
Dear programmers!! In this tutorial, we’ll demonstrate how to make a Login and Registration Form in HTML and CSS With Source Code. A basic understanding of HTML forms is all that is needed for this beginner-level project. We will discuss our project step by step even if you don’t have a concept yet. In this project, you can register and log in on the same form. It is controlled by two different buttons. The login form is displayed when you click the login button. The signup form is opened by clicking the register button. It is turned on thanks to the HTML checkbox. First name, last name, email, password, and other information must be entered on the registration form. Only the email address and password are required to be entered on the login page If you haven’t seen the popup login form that we’ve learned click the link below. I hope you must have got an idea about the project. So, let’s get started on the Signup & Login form Project source codes. First, we’re going to use HTML Code.
Step1: Login And Registration Form In Html Code
Forgot Password? The information for the registration and login forms has been added to the HTML code in the sections below. The codes listed below are copied, and they are then added directly to your HTML file. To start, we’ll add a «login-wrap» class to a div tag, which will wrap our signup and login forms. Now that we have created an input box with the type «radio,» we can use the radio button to switch between the signup and signin forms. We will now create our login form. To do that, we will design a label that requests a username and, beneath it, a text-only input box for the username. We’re going to make a «password» input box now, along with a «checkbox» input box that says «keep me logged in.» Now using hr tag we will make a horizontal rule to which we used to divide our form
Now we will create a forgot password link using the anchor tag. Now we will be creating the structure of our signup form. Using the div tag we will create a container for our singup form. First, we’ll construct a label for our username and an input type for the username called «text.»Then, two input fields of the type «password» will be created. A label asking for the user’s email address will now be created, along with an input box with the type «email» address. we build an input type that serves as a button for signing them up. If the user has already registered on another website, we also create a link for our login page. So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code. Before we can style our page, we must add external styling links to the head section of our html.
Step2: Style Login And Registration Form Using CSS Code
body < margin: 0; color: #6a6f8c; background: #c8c8c8; font: 600 16px/18px "Open Sans", sans-serif; >*, :after, :before < box-sizing: border-box; >.clearfix:after, .clearfix:before < content: ""; display: table; >.clearfix:after < clear: both; display: block; >a < color: inherit; text-decoration: none; >.login-wrap < width: 100%; margin: auto; max-width: 525px; min-height: 670px; position: relative; background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); >.login-html < width: 100%; height: 100%; position: absolute; padding: 90px 70px 50px 70px; background: rgba(40, 57, 101, 0.9); >.login-html .sign-in-htm, .login-html .sign-up-htm < top: 0; left: 0; right: 0; bottom: 0; position: absolute; transform: rotateY(180deg); backface-visibility: hidden; transition: all 0.4s linear; >.login-html .sign-in, .login-html .sign-up, .login-form .group .check < display: none; >.login-html .tab, .login-form .group .label, .login-form .group .button < text-transform: uppercase; >.login-html .tab < font-size: 22px; margin-right: 15px; cursor: pointer; padding-bottom: 5px; margin: 0 15px 10px 0; display: inline-block; border-bottom: 2px solid transparent; >.login-html .sign-in:checked + .tab, .login-html .sign-up:checked + .tab < color: #fff; border-color: #1161ee; cursor: pointer; >.login-form < min-height: 345px; position: relative; perspective: 1000px; transform-style: preserve-3d; >.login-form .group < margin-bottom: 15px; >.login-form .group .label, .login-form .group .input, .login-form .group .button < width: 100%; color: #fff; display: block; >.login-form .group .input, .login-form .group .button < border: none; padding: 15px 20px; border-radius: 25px; background: rgba(255, 255, 255, 0.1); >.login-form .group input[data-type="password"] < -webkit-text-security: circle; >.login-form .group .label < color: #aaa; font-size: 12px; >.login-form .group .button < background: #1161ee; cursor: pointer; >.login-form .group .button:hover < background:#1454c4; cursor: pointer; >.login-form .group label .icon < width: 15px; height: 15px; border-radius: 2px; position: relative; display: inline-block; background: rgba(255, 255, 255, 0.1); >.login-form .group label .icon:before, .login-form .group label .icon:after < content: ""; width: 10px; height: 2px; background: #fff; position: absolute; transition: all 0.2s ease-in-out 0s; >.login-form .group label .icon:before < left: 3px; width: 5px; bottom: 6px; transform: scale(0) rotate(0); >.login-form .group label .icon:after < top: 6px; right: 0; transform: scale(0) rotate(0); >.login-form .group .check:checked + label < color: #fff; >.login-form .group .check:checked + label .icon < background: #1161ee; >.login-form .group .check:checked + label .icon:before < transform: scale(1) rotate(45deg); >.login-form .group .check:checked + label .icon:after < transform: scale(1) rotate(-45deg); >.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm < transform: rotate(0); >.login-html .sign-up:checked + .tab + .login-form .sign-up-htm < transform: rotate(0); >.hr < height: 2px; margin: 60px 0 50px 0; background: rgba(255, 255, 255, 0.2); >.foot-lnk
Now that we’ve included our CSS code in our article, let’s go over it step by step. Step1: We’ve now set the margin and padding on our webpage to «zero» using the body tag. «Open Sans» is the family of fonts. «Light Grey» is the backdrop colour setting. The font size was also changed to «dark-grey.» Using the universal selector (*) we will set the box-sizing of our webpage as «border-box». If any of the items overflow, the clearfix attribute will cause them to be automatically set to the height.
body < margin: 0; color: #6a6f8c; background: #c8c8c8; font: 600 16px/18px "Open Sans", sans-serif; >*, :after, :before < box-sizing: border-box; >.clearfix:after, .clearfix:before < content: ""; display: table; >.clearfix:after
Step 2: We will now set its width to «100%» using the (.login-wrap) class. The margin is set to auto, meaning that it will change depending on the content. Additionally, we specified «525 px» for the maximum width and «670 px» for the minimum height. To give our login form a little more flair, we also include a backdrop image. To style our login form, we will use the «.login-html» class. We have set the width to «100%» and the position to absolute. Additionally, we added additional space and made the backdrop of our login form a dark blue color.
Step3: We will set the top, left, right, and bottom space to «zero» and the position to «absolute» using the (.sign-in-htm and.sign-up-htm) files. Our login and signup forms will be rotated 180 degrees by adding some transform properties. We’ll now style the sign-in button. The font size was set to «22 px,» the margin to the right was set to «15 px,» the cursor was set to «pointer,» and the padding to the bottom was set to «5 px.» Additionally, we gave our button a 2-px bottom border. In the similar way we will style our signup form . you will easily understand the code just go through our css code once.
.login-html .tab < font-size: 22px; margin-right: 15px; cursor: pointer; padding-bottom: 5px; margin: 0 15px 10px 0; display: inline-block; border-bottom: 2px solid transparent; >.login-html .sign-in:checked + .tab, .login-html .sign-up:checked + .tab < color: #fff; border-color: #1161ee; cursor: pointer; >.login-form < min-height: 345px; position: relative; perspective: 1000px; transform-style: preserve-3d; >.login-form .group < margin-bottom: 15px; >.login-form .group .label, .login-form .group .input, .login-form .group .button < width: 100%; color: #fff; display: block; >.login-form .group .input, .login-form .group .button < border: none; padding: 15px 20px; border-radius: 25px; background: rgba(255, 255, 255, 0.1); >.login-form .group input[data-type="password"] < -webkit-text-security: circle; >.login-form .group .label < color: #aaa; font-size: 12px; >.login-form .group .button < background: #1161ee; cursor: pointer; >.login-form .group .button:hover < background:#1454c4; cursor: pointer; >.login-form .group label .icon < width: 15px; height: 15px; border-radius: 2px; position: relative; display: inline-block; background: rgba(255, 255, 255, 0.1); >.login-form .group label .icon:before, .login-form .group label .icon:after < content: ""; width: 10px; height: 2px; background: #fff; position: absolute; transition: all 0.2s ease-in-out 0s; >.login-form .group label .icon:before < left: 3px; width: 5px; bottom: 6px; transform: scale(0) rotate(0); >.login-form .group label .icon:after
Step4: Now, we will switch between our sign-in and sign-up forms utilising the checked attribute. Now, utilising the checked property, if we select the signup button, it will display a blue border along the bottom, and if you select signin, the checked property signin form will appear.
.login-form .group .check:checked + label < color: #fff; >.login-form .group .check:checked + label .icon < background: #1161ee; >.login-form .group .check:checked + label .icon:before < transform: scale(1) rotate(45deg); >.login-form .group .check:checked + label .icon:after < transform: scale(1) rotate(-45deg); >.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm < transform: rotate(0); >.login-html .sign-up:checked + .tab + .login-form .sign-up-htm
The project is now finished, we have completed Popup Login form using HTML and CSS. Now look at the live preview. Final Output Login And Registration Form In Html Css: Now We have Successfully created the Login and Registration Form using HTML and CSS . You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page. follow : codewithrandom
Code by : Arun
Create A Login Page Form Using HTML And CSS — With Source Code
An integral part of any website is its login functionality. No matter what web technology you use, users go through the process of logging in to your website and interacting with the login page the most number of times.
Having a fancy responsive login page is a must these days as the demand for mobile web pages has far increased that of desktop ones.
Having a beautiful login page is essential. Users have to instantaneously like your login page to give that best first impression.
In today’s blog post, we will create a beautiful yet simple login web page using HTML and CSS only and I will also leave the source code so you can use it for your website.
What will our login page look like?
We will be building this simple yet beautiful login page by just writing some HTML and CSS.
This login page will be centered on the screen vertically and horizontally.
It will have two input text fields, username, and password.
It will also have a remember me checkbox, just if the developer wants to remember their login details.
Then there will be a full-width login button.
Users who don’t yet have a username and password on this website can go to the sign-up link. This will be provided just below the login button.
We will also have an option of signing in using social links like Facebook and Google.
Now that we know what we are building, let’s go ahead and understand how, step by step.
Login Page HTML Structure
I am using visual studio code as my code editor and I will start by creating two files in the folder.
After creating these two files, we will create the structure for our index.html page. We are using the Emmet extension inside visual studio code to create the basic structure for the HTML page.
This is what the HTML structure looks like.
I have linked my style.css fie in the link tag.
I am using Fontawesome Icons to add icons to my website. They are super simple to use and very versatile. They provide a brilliant aesthetic to websites.
I will signup to Fontawesome and then use the script tag to add the icons to our Login HTML page.
Now, we will add the HTML structure to our login page.
As you can see in the image below, I have added some HTML elements for our login page, we will now go line by line and understand what’s happening in our HTML code.
Explanation Of Our HTML Code
In the body tag of our HTML page, we start by creating a div element with a class of container. This will be the white box that you see in our first image.
Then we add a div with a class of login-box. This will be our actual login container.
This login box will have four main components.
On the top it will have an icon, then the login elements such as inputs, checkbox, and button, then we will have the separator for the social links and finally, we will have the buttons for social login.
The code is very clean and easy to understand. You can find the source code at the end of this post.
Login Page CSS Code
Once we have created the HTML structure, it’s now time to make things beautiful by adding some styles to our elements.
We will first start by adding a Google font to our website and then define the body and html tags.
Then we add the styles for the containers that we created.
Now, if you go to the initial image, we have the login icon on the top.
We are giving the icon the full width of the login box and placing the icon right in the middle.
At this point, our login page looks something like the below:
Now, let’s style the input controls.
The only thing that is now left on our login page is the social links and the separator and the CSS code for these is really simple.
That’s it! With all that HTML and CSS code, we can achieve a beautiful-looking login page that your visitors like.