Create Login and Signup Form with HTML
CSS and JavaScript
Login and Information exchange Structure are the part where clients need to fill in subtleties to abundance the site page or application. A login structure is utilized to put the client login and secret phrase that the client has proactively made and the information exchange structure is the page where client can make their login subtleties by filling in their own information as the structure requires.
Have a brief glance at the given picture of our venture [Log in and Information exchange Form], On the left side, you can see a login structure that contains two info fields where the client needs to put their email and secret phrase, lower part of that there is failed to remember secret phrase connect, login button. From the get go, when you enter the secret key, it will show up straightaway structure to see the secret phrase character you need to tap on the eye symbol that is accessible on the secret key field.
Under the login button, you can see an information exchange interface, really, when you click on the information exchange button the information exchange structure which is on the right side will show up and login structure will vanish. I have given a few media buttons to making and marking in both login and information exchange structures.
Video Tutorial of Login and Signup Form
Login and Signup Form [Source Codes]
To Create Login and Signup Form with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title> Responsive Login and Signup Form </title>
- <link rel="stylesheet" href="style.css">
- <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
- </head>
- <body>
- <section class="container forms">
- <div class="form login">
- <div class="form-content">
- <header>Login or Signup</header>
- <form action="#">
- <div class="field input-field">
- <input type="email" placeholder="Enter Your Email Address" class="input">
- </div>
-
- <div class="field input-field">
- <input type="password" placeholder="Enter Your Password" class="password">
- <i class='bx bx-hide eye-icon'></i>
- </div>
-
- <div class="form-link">
- <a href="#" class="forgot-pass">Forgot password?</a>
- </div>
-
- <div class="field button-field">
- <button>Login</button>
- </div>
- </form>
-
- <div class="form-link">
- <span>Don't have an account? <a href="#" class="link signup-link">Signup</a></span>
- </div>
- </div>
-
- <div class="line"></div>
-
- <div class="media-options">
- <a href="#" class="field facebook">
- <i class='bx bxl-facebook facebook-icon'></i>
- <span>Login with Facebook</span>
- </a>
- </div>
-
- <div class="media-options">
- <a href="#" class="field google">
- <img src="image/google.png" alt="" class="google-img">
- <span>Signup with Google</span>
- </a>
- </div>
- </div>
- </section>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Open Sans", sans-serif;
- }
- .container{
- height: 100vh;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #282A35;
- column-gap: 30px;
- }
- .form{
- position: absolute;
- max-width: 500px;
- width: 100%;
- padding: 30px;
- border-radius: 6px;
- background: #f2f2f2;
- }
- .form.signup{
- opacity: 0;
- pointer-events: none;
- }
- .forms.show-signup .form.signup{
- opacity: 1;
- pointer-events: auto;
- }
- .forms.show-signup .form.login{
- opacity: 0;
- pointer-events: none;
- }
- header{
- font-size: 30px;
- font-weight: 600;
- color: #000;
- text-align: center;
- }
- form{
- margin-top: 30px;
- }
- .form .field{
- position: relative;
- height: 55px;
- width: 100%;
- margin-top: 20px;
- border-radius: 8px;
- }
- .field input,
- .field button{
- height: 100%;
- width: 100%;
- border: none;
- font-size: 18px;
- font-weight: 400;
- border-radius: 6px;
- }
- .field input{
- outline: none;
- padding: 0 15px;
- border: 1px solid #CACACA;
- }
- .field input:focus{
- border-bottom-width: 2px;
- }
- .eye-icon{
- position: absolute;
- top: 50%;
- right: 10px;
- transform: translateY(-50%);
- font-size: 18px;
- color: #8b8b8b;
- cursor: pointer;
- padding: 5px;
- }
- .field button{
- color: #fff;
- background-color: #2098EE;
- transition: all 0.3s ease;
- cursor: pointer;
- }
- .field button:hover{
- background-color: #016dcb;
- }
- .form-link{
- text-align: center;
- margin-top: 10px;
- }
- .form-link span,
- .form-link a{
- font-size: 14px;
- font-weight: 400;
- color: #232836;
- }
- .form a{
- color: #2098EE;
- text-decoration: none;
- }
- .form-content a:hover{
- text-decoration: underline;
- }
- .line{
- position: relative;
- height: 1px;
- width: 100%;
- margin: 36px 0;
- background-color: #d4d4d4;
- }
- .line::before{
- content: 'Or';
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #FFF;
- color: #8b8b8b;
- padding: 0 15px;
- }
- .media-options a{
- display: flex;
- align-items: center;
- justify-content: center;
- }
- a.facebook{
- color: #fff;
- background-color: #4267b2;
- }
- a.facebook .facebook-icon{
- height: 28px;
- width: 28px;
- color: #0171d3;
- font-size: 20px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #fff;
- }
- .facebook-icon,
- img.google-img{
- position: absolute;
- top: 50%;
- left: 15px;
- transform: translateY(-50%);
- }
- img.google-img{
- height: 35px;
- width: 35px;
- object-fit: cover;
- }
- a.google{
- border: 1px solid #CACACA;
- }
- a.google span{
- font-weight: 500;
- opacity: 0.6;
- color: #232836;
- }
-
- @media screen and (max-width: 400px) {
- .form{
- padding: 20px 10px;
- }
-
- }
Now paste the following codes into your script.js file
- const forms = document.querySelector(".forms"),
- pwShowHide = document.querySelectorAll(".eye-icon"),
- links = document.querySelectorAll(".link");
-
- pwShowHide.forEach(eyeIcon => {
- eyeIcon.addEventListener("click", () => {
- let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
-
- pwFields.forEach(password => {
- if(password.type === "password"){
- password.type = "text";
- eyeIcon.classList.replace("bx-hide", "bx-show");
- return;
- }
- password.type = "password";
- eyeIcon.classList.replace("bx-show", "bx-hide");
- })
-
- })
- })
-
- links.forEach(link => {
- link.addEventListener("click", e => {
- e.preventDefault();
- forms.classList.toggle("show-signup");
- })
- })
If you face any difficulties while creating Login and Signup Form or your code is not working as expected, you can download the source code files by clicking download button.