Login Form Design – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 08:50:13 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Login & Registration Form in HTML CSS & JavaScript https://www.codingnepalweb.com/login-registration-form-html-css/ https://www.codingnepalweb.com/login-registration-form-html-css/#comments Sun, 15 Jan 2023 21:11:21 +0000 https://www.codingnepalweb.com/?p=4123 Login & Registration Form in HTML CSS & JavaScript

Creating a login and registration form is a common task for developers, as it is a fundamental aspect of many web applications. As a developer, learning to create these forms can help you become more proficient in developing & designing.

A login form is a type of form that allows users to enter their credentials (such as a username and password) to gain access to a protected area of a website or application. A registration form, also known as a sign-up form, is a type of form that allows users to create an account on a website or application.

Today in this blog you will learn how to create a responsive Login & Registration Form in HTML CSS & JavaScript. The blog will cover everything from the basics of creating a Login & Registration in HTML, to styling it with CSS and adding with JavaScript. Recently I have provided a blog on Button Click Animation, I hope you will find this blog helpful as well.

Video Tutorial of Login & Registration Form

If you would like to create this Login & Registration From step by step, the complete video demonstration of the demo is provided below. In this video tutorial, you will. Alternatively, you may continue reading this written guide on the same topic.

 

Steps to Create Login & Registration Form

We will create this Login & Registration Form in two steps:
  • File Structure of the Project
  • Creating Login & Registration From

1. File Structure of the Project

To build this Login & Registration Form, we’ll be using two separate files – index.html and style.css. These files will contain the HTML, CSS, and JavaScript code respectively needed to bring the Login & Registration Form. Let’s get started by setting up these files and adding the basic code.

Once you have made these files, you can proceed to the next step of creating your Button Click Animation.

2. Creating Button Click Animation

In the second step, we will design the user interface for our Login & Registration Form and style it using HTML and CSS. Once the user interface is complete, we will use JavaScript to animate these two forms on click.

In the index.html file, add the following HTML and JavaScript code to create the basic structure of the animated button.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Login & Signup Form</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="wrapper">
      <div class="form signup">
        <header>Signup</header>
        <form action="#">
          <input type="text" placeholder="Full name" required />
          <input type="text" placeholder="Email address" required />
          <input type="password" placeholder="Password" required />
          <div class="checkbox">
            <input type="checkbox" id="signupCheck" />
            <label for="signupCheck">I accept all terms & conditions</label>
          </div>
          <input type="submit" value="Signup" />
        </form>
      </div>

      <div class="form login">
        <header>Login</header>
        <form action="#">
          <input type="text" placeholder="Email address" required />
          <input type="password" placeholder="Password" required />
          <a href="#">Forgot password?</a>
          <input type="submit" value="Login" />
        </form>
      </div>

      <script>
        const wrapper = document.querySelector(".wrapper"),
          signupHeader = document.querySelector(".signup header"),
          loginHeader = document.querySelector(".login header");

        loginHeader.addEventListener("click", () => {
          wrapper.classList.add("active");
        });
        signupHeader.addEventListener("click", () => {
          wrapper.classList.remove("active");
        });
      </script>
    </section>
  </body>
</html>

In the style.css file, add the following CSS code to add styles and make the button and its bubbles. If you want, you can change the color, background, font, and size of the button in this code.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins",
    sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0faff;
}
.wrapper {
  position: relative;
  max-width: 470px;
  width: 100%;
  border-radius: 12px;
  padding: 20px
    30px
    120px;
  background: #4070f4;
  box-shadow: 0
    5px
    10px
    rgba(
      0,
      0,
      0,
      0.1
    );
  overflow: hidden;
}
.form.login {
  position: absolute;
  left: 50%;
  bottom: -86%;
  transform: translateX(
    -50%
  );
  width: calc(
    100% +
      220px
  );
  padding: 20px
    140px;
  border-radius: 50%;
  height: 100%;
  background: #fff;
  transition: all
    0.6s
    ease;
}
.wrapper.active
  .form.login {
  bottom: -15%;
  border-radius: 35%;
  box-shadow: 0 -5px
    10px rgba(0, 0, 0, 0.1);
}
.form
  header {
  font-size: 30px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.form.login
  header {
  color: #333;
  opacity: 0.6;
}
.wrapper.active
  .form.login
  header {
  opacity: 1;
}
.wrapper.active
  .signup
  header {
  opacity: 0.6;
}
.wrapper
  form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
form
  input {
  height: 60px;
  outline: none;
  border: none;
  padding: 0
    15px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  border-radius: 8px;
  background: #fff;
}
.form.login
  input {
  border: 1px
    solid
    #aaa;
}
.form.login
  input:focus {
  box-shadow: 0
    1px 0
    #ddd;
}
form
  .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkbox
  input[type="checkbox"] {
  height: 16px;
  width: 16px;
  accent-color: #fff;
  cursor: pointer;
}
form
  .checkbox
  label {
  cursor: pointer;
  color: #fff;
}
form a {
  color: #333;
  text-decoration: none;
}
form
  a:hover {
  text-decoration: underline;
}
form
  input[type="submit"] {
  margin-top: 15px;
  padding: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.form.login
  input[type="submit"] {
  background: #4070f4;
  color: #fff;
  border: none;
}

Conclusions and Final Words

By following the steps you have successfully created a Login & Registration Form. There are lots of Login and Signup Forms you can find on this website to enhance your skills in creating forms. If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!

If you face any difficulties while creating your Login and Registration Form or your code is not working as expected, you can download the source code files for this Login and Signup Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/login-registration-form-html-css/feed/ 1 Create Responsive Registration Form in HTML & CSS https://www.codingnepalweb.com/create-registration-form-html-css/ https://www.codingnepalweb.com/create-registration-form-html-css/#respond Tue, 06 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4133 Create Responsive Registration Form in HTML & CSS

If you are looking for the Registration Form with a responsive feature and want to create it using basic HTML and CSS code then this blog can fill your demand.

In this blog, you will learn How to Create a Responsive Registration Form in HTML & CSS. Even if you are a complete beginner and have basic knowledge of HTML and CSS then also you will be able to create this Registration Form.

A Registration Form is a section on the website or an application where the user needs to fill in their details as required. The user detail like name, email, address, and others.

Have a look at the Registration Form preview that you are going to learn in this blog. As you can see I have added important input fields that every Registration must-have. And, also you can see some radio buttons to choose from and a submit button as well.

If you want to watch out for the actual demo of this Registration Form and all the HTML and CSS codes that I have used to create this Responsive Registration Form then please have a look at the video tutorial that I have provided below.

Create Responsive Registration Form in HTML & CSS

As you have seen on the video tutorial of this Registration Form. There were lots of input fields to enter user details like name, number, email, birth date, gender, and others. As also shown you the responsiveness of this Registration Form.

I hope after watching the video tutorial on this Registration Form you are able to create this Registration Form easily. You can also take all the HTML and CSS code of this Registration Form that I have provided below.

You May Like This:

 Registration Form in HTML & CSS [Source Code]

To create a Registration Form in HTML & CSS, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script 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  Registration Form in HTML & CSS by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!---Coding By CodingLab | www.codinglabweb.com--->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--<title>Registration Form in HTML CSS</title>-->
    <!---Custom CSS File--->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="container">
      <header>Registration Form</header>
      <form action="#" class="form">
        <div class="input-box">
          <label>Full Name</label>
          <input type="text" placeholder="Enter full name" required />
        </div>

        <div class="input-box">
          <label>Email Address</label>
          <input type="text" placeholder="Enter email address" required />
        </div>

        <div class="column">
          <div class="input-box">
            <label>Phone Number</label>
            <input type="number" placeholder="Enter phone number" required />
          </div>
          <div class="input-box">
            <label>Birth Date</label>
            <input type="date" placeholder="Enter birth date" required />
          </div>
        </div>
        <div class="gender-box">
          <h3>Gender</h3>
          <div class="gender-option">
            <div class="gender">
              <input type="radio" id="check-male" name="gender" checked />
              <label for="check-male">male</label>
            </div>
            <div class="gender">
              <input type="radio" id="check-female" name="gender" />
              <label for="check-female">Female</label>
            </div>
            <div class="gender">
              <input type="radio" id="check-other" name="gender" />
              <label for="check-other">prefer not to say</label>
            </div>
          </div>
        </div>
        <div class="input-box address">
          <label>Address</label>
          <input type="text" placeholder="Enter street address" required />
          <input type="text" placeholder="Enter street address line 2" required />
          <div class="column">
            <div class="select-box">
              <select>
                <option hidden>Country</option>
                <option>America</option>
                <option>Japan</option>
                <option>India</option>
                <option>Nepal</option>
              </select>
            </div>
            <input type="text" placeholder="Enter your city" required />
          </div>
          <div class="column">
            <input type="text" placeholder="Enter your region" required />
            <input type="number" placeholder="Enter postal code" required />
          </div>
        </div>
        <button>Submit</button>
      </form>
    </section>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(130, 106, 251);
}
.container {
  position: relative;
  max-width: 700px;
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.container header {
  font-size: 1.5rem;
  color: #333;
  font-weight: 500;
  text-align: center;
}
.container .form {
  margin-top: 30px;
}
.form .input-box {
  width: 100%;
  margin-top: 20px;
}
.input-box label {
  color: #333;
}
.form :where(.input-box input, .select-box) {
  position: relative;
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 15px;
}
.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.form .column {
  display: flex;
  column-gap: 15px;
}
.form .gender-box {
  margin-top: 20px;
}
.gender-box h3 {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
}
.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}
.form .gender {
  column-gap: 5px;
}
.gender input {
  accent-color: rgb(130, 106, 251);
}
.form :where(.gender input, .gender label) {
  cursor: pointer;
}
.gender label {
  color: #707070;
}
.address :where(input, .select-box) {
  margin-top: 15px;
}
.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #707070;
  font-size: 1rem;
}
.form button {
  height: 55px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgb(130, 106, 251);
}
.form button:hover {
  background: rgb(88, 56, 250);
}
/*Responsive*/
@media screen and (max-width: 500px) {
  .form .column {
    flex-wrap: wrap;
  }
  .form :where(.gender-option, .gender) {
    row-gap: 15px;
  }
}

If you face any difficulties while creating your Registration Form or your code is not working as expected, you can download the source code files for this Registration Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/create-registration-form-html-css/feed/ 0 Responsive Login and Registration Form in HTML and CSS https://www.codingnepalweb.com/login-and-registration-form-in-html-css/ https://www.codingnepalweb.com/login-and-registration-form-in-html-css/#respond Fri, 25 Jun 2021 21:11:18 +0000 https://www.codingnepalweb.com/?p=4215 login-and-registration-form-in-html-css

Hello friends, today we are going to learn How to Create a Responsive Login and Registration Form Template in HTML and CSS. There are a lot of Forms Design that I have created before but, to date, I have not created login and registration forms together or on one page.

What is the Login and Registration Form

Login Form means the login page or section where users need to enter their login details like email, phone number, and password. Registration form is the process to register user details to make login details for entry in the particular page or website.

In the login form section, we can make two input fields one is for the user email address or phone number and another for password and this is mandatory and in the registration form we have to add some extra input fields like the input field of name, phone number, password and other.

Let’s have a look at the image of the Login and Registration Form Template. There you can see only Login Form but when you click on the Signup now the right side image smoothly flips into the left side then the Signup form appears and Login Form Hides.

I have made this Responsive Login and Registration Form in HTML and CSS only and I have not used any single code of javascript for building this Login and Registration Form. I promise that you can easily understand all the HTML CSS code that I have used to make this Form.

To see the real example of this Login and Registration, please do watch the video tutorial of this design. After watching the tutorial you will definitely understand that how HTML and CSS code is working to make this Login and Registration Page Perfectly.

Login and Registration Form in HTML and CSS | Video Tutorial

You will get this Login and Registration Form Template Free, I have provided all HTML and CSS source code of this template below. Before jumping into the source code, you nee to know some important points of this project.

As you have seen on the video tutorial of Responsive Login and Registration Form in HTML CSS. At first, we could see only the Login Form and Registration Form had hidden behind the image. When I clicked on the Signup link, that image smoothly flip to the left direction, and the Registration Form appears and the Login Form disappears.

I have used HTML input’s checkbox to make the Signup and Login link clickable, you can do this by using JavaScript code but for this simple thing, I had gone for HTML’s Checkbox. To make this Login and Registration Form responsive I have used a CSS media query.

Now I believe, you can build and this Login and Registration Form easily but if you are feeling difficulty creating this Form, I have provided all source code of this Login and Registration Form below, from there you can copy or download it all source code files.

You May Like This:

Login & Registration Form Template | Source Code

For taking the source code of this Login and Registration Form Template first, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.

<!DOCTYPE html>
<!-- Coding by CodingNepal | www.codingnepalweb.com-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Login and Registration Form in HTML & CSS | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="container">
    <input type="checkbox" id="flip">
    <div class="cover">
      <div class="front">
        <img src="images/frontImg.jpg" alt="">
        <div class="text">
          <span class="text-1">Every new friend is a <br> new adventure</span>
          <span class="text-2">Let's get connected</span>
        </div>
      </div>
      <div class="back">
        <!--<img class="backImg" src="images/backImg.jpg" alt="">-->
        <div class="text">
          <span class="text-1">Complete miles of journey <br> with one step</span>
          <span class="text-2">Let's get started</span>
        </div>
      </div>
    </div>
    <div class="forms">
        <div class="form-content">
          <div class="login-form">
            <div class="title">Login</div>
          <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Enter your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Enter your password" required>
              </div>
              <div class="text"><a href="#">Forgot password?</a></div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Don't have an account? <label for="flip">Sigup now</label></div>
            </div>
        </form>
      </div>
        <div class="signup-form">
          <div class="title">Signup</div>
        <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-user"></i>
                <input type="text" placeholder="Enter your name" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Enter your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Enter your password" required>
              </div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Already have an account? <label for="flip">Login now</label></div>
            </div>
      </form>
    </div>
    </div>
    </div>
  </div>
</body>
</html>
/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
  padding: 30px;
}
.container{
  position: relative;
  max-width: 850px;
  width: 100%;
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  perspective: 2700px;
}
.container .cover{
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: 98;
  transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
  transform: rotateY(-180deg);
}
 .container .cover .front,
 .container .cover .back{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cover .back{
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover::before,
.container .cover::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #7d2ae8;
  opacity: 0.5;
  z-index: 12;
}
.container .cover::after{
  opacity: 0.3;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 10;
}
.container .cover .text{
  position: absolute;
  z-index: 130;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2{
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.cover .text .text-2{
  font-size: 15px;
  font-weight: 500;
}
.container .forms{
  height: 100%;
  width: 100%;
  background: #fff;
}
.container .form-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form{
  width: calc(100% / 2 - 25px);
}
.forms .form-content .title{
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .title:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #7d2ae8;
}
.forms .signup-form  .title:before{
  width: 20px;
}
.forms .form-content .input-boxes{
  margin-top: 30px;
}
.forms .form-content .input-box{
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  position: relative;
}
.form-content .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid{
  border-color: #7d2ae8;
}
.form-content .input-box i{
  position: absolute;
  color: #7d2ae8;
  font-size: 17px;
}
.forms .form-content .text{
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .text a{
  text-decoration: none;
}
.forms .form-content .text a:hover{
  text-decoration: underline;
}
.forms .form-content .button{
  color: #fff;
  margin-top: 40px;
}
.forms .form-content .button input{
  color: #fff;
  background: #7d2ae8;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.forms .form-content .button input:hover{
  background: #5b13b9;
}
.forms .form-content label{
  color: #5b13b9;
  cursor: pointer;
}
.forms .form-content label:hover{
  text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text{
  text-align: center;
  margin-top: 25px;
}
.container #flip{
  display: none;
}
@media (max-width: 730px) {
  .container .cover{
    display: none;
  }
  .form-content .login-form,
  .form-content .signup-form{
    width: 100%;
  }
  .form-content .signup-form{
    display: none;
  }
  .container #flip:checked ~ .forms .signup-form{
    display: block;
  }
  .container #flip:checked ~ .forms .login-form{
    display: none;
  }
}

If you face any difficulties while creating your Responsive Login and Registration Form or your code is not working as expected, you can download the source code files for this Login and Signup Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/login-and-registration-form-in-html-css/feed/ 0 Cool Login Form in HTML CSS & JavaScript https://www.codingnepalweb.com/cool-login-form-in-html-css-javascript/ https://www.codingnepalweb.com/cool-login-form-in-html-css-javascript/#comments Thu, 14 May 2020 10:17:00 +0000 https://codingnepalweb.com/2020/05/14/cool-login-form-in-html-css-javascript/ Cool Login Form in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Cool Login Form with Password Show or Hide Option in HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Login Form but there is no password show hide option. Now, it’s time to create a Login Form with a password show or hide a Button.

A Login form is used to enter the authentication credentials of the user to access a restricted page or form. The login form includes a field for the username and another for the password.

This Login Form is created only for design purposes. There is no action when you submitted the form after entered credential details (Email & password). There is no backend integration because I used only HTML & CSS to create this form. So there is no backend role in this form.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Cool Login Form).

Video Tutorial of Cool Login Form  in HTML & CSS

 
If you like this program (Cool Login Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You can use this form in your websites, projects, and anywhere you want. If you’re a beginner and this video helped you to understand the codes behind creating a login form, then don’t forget to share it with your friends. You can also create this type of login form if you have basic knowledge of HTML & CSS.

You might like this:

Login Form Design in HTML & CSS [Source Codes]

To create this program (Cool Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Login Form</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
   </head>
   <body>
      <div class="center">
         <div class="header">
            Login Form
         </div>
         <form>
            <input type="text" placeholder="Email or Username">
            <i class="far fa-envelope"></i>
            <input id="pswrd" type="password" placeholder="Password">
            <i class="fas fa-lock" onclick="show()"></i>
            <input type="submit" value="Sign in">
            <a href="#">Forgot Password?</a>
         </form>
      </div>
      <script>
         function show(){
          var pswrd = document.getElementById('pswrd');
          var icon = document.querySelector('.fas');
          if (pswrd.type === "password") {
           pswrd.type = "text";
           pswrd.style.marginTop = "20px";
           icon.style.color = "#7f2092";
          }else{
           pswrd.type = "password";
           icon.style.color = "grey";
          }
         }
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{
 margin: 0;
 padding: 0;
 background: radial-gradient(#a429bc,#9225a7,#7f2092);
 height: 100vh;
 overflow: hidden;
 font-family: 'Noto Sans TC', sans-serif;
}
.center{
 width: 430px;
 margin: 130px auto;
 position: relative;
}
.center .header{
 font-size: 28px;
 font-weight: bold;
 color: white;
 padding: 25px 0 30px 25px;
 background: #5c1769;
 border-bottom: 1px solid #370e3f;
 border-radius: 5px 5px 0 0;
}
.center form{
 position: absolute;
 background: white;
 width: 100%;
 padding: 50px 10px 0 30px;
 box-sizing: border-box;
 border: 1px solid #6d1c7d;
 border-radius: 0 0 5px 5px;
}
form input{
 height: 50px;
 width: 90%;
 padding: 0 10px;
 border-radius: 3px;
 border: 1px solid silver;
 font-size: 18px;
 outline: none;
}
form input[type="password"]{
 margin-top: 20px;
}
form i{
 position: absolute;
 font-size: 25px;
 color: grey;
 margin: 15px 0 0 -45px;
}
i.fa-lock{
 margin-top: 35px;
}
form input[type="submit"]{
 margin-top: 40px;
 margin-bottom: 40px;
 width: 130px;
 height: 45px;
 color: white;
 cursor: pointer;
 line-height: 45px;
 border-radius: 45px;
 border-radius: 5px;
 background: #5c1769;
}
form input[type="submit"]:hover{
 background: #491254;
 transition: .5s;
}
form a{
 text-decoration: none;
 font-size: 18px;
 color: #7f2092;
 padding: 0 0 0 20px;
}

That’s all, now you’ve successfully created a Cool Login Form in HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/cool-login-form-in-html-css-javascript/feed/ 8 Animated Glowing Inputs Login Form in HTML & CSS https://www.codingnepalweb.com/animated-glowing-inputs-login-form/ https://www.codingnepalweb.com/animated-glowing-inputs-login-form/#comments Tue, 05 May 2020 09:03:00 +0000 https://codingnepalweb.com/2020/05/05/animated-glowing-inputs-login-form-in-html-css/ Animated Glowing Inputs Login Form in HTML and CSSHello readers, Today in this blog you’ll learn how to create an Animated Glowing Inputs Login Form UI Design using only HTML & CSS. Previously I have shared an Amazing Transparent Login Form with HTML CSS & Javascript, now it’s time to create an Animated Glowing Inputs Login Form.
 
As you know, A Login form is used to enter authentication credentials to enter a restricted page or form. The login form holds a field for the username and another for the password. You can see in the image, this is an Animated Login Form with Glowing Effects in Input Fields.
 
Those input fields are in the initial stage where there are no glowing effects on the border. But when you click on the input field to enter some details, the borders of the input field start to glow.
 
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Animated Glowing Inputs Login Form).

Video Tutorial of Login Form with Glowing Inputs Border

 
If you are a beginner and you have basic knowledge of HTML & CSS then you can also create this type of Login Form and effect. I believe you can take this Login Form at the next level with your creativity after getting the codes of this Form.

If you like this program (Animated Glowing Inputs Login Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Animated Login Form using only HTML & CSS [Source Codes]

To create this program (Animated Glowing Inputs Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Glowing Inputs Login Form UI</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="login-form">
         <div class="text">
            LOGIN
         </div>
         <form>
            <div class="field">
               <div class="fas fa-envelope"></div>
               <input type="text" placeholder="Email or Phone">
            </div>
            <div class="field">
               <div class="fas fa-lock"></div>
               <input type="password" placeholder="Password">
            </div>
            <button>LOGIN</button>
            <div class="link">
               Not a member?
               <a href="#">Signup now</a>
            </div>
         </form>
      </div>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins',sans-serif;
}
body{
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #151515;
}
.login-form{
  position: relative;
  width: 370px;
  height: auto;
  background: #1b1b1b;
  padding: 40px 35px 60px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
}
.text{
  font-size: 30px;
  color: #c7c7c7;
  font-weight: 600;
  letter-spacing: 2px;
}
form{
  margin-top: 40px;
}
form .field{
  margin-top: 20px;
  display: flex;
}
.field .fas{
  height: 50px;
  width: 60px;
  color: #868686;
  font-size: 20px;
  line-height: 50px;
  border: 1px solid #444;
  border-right: none;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(#333,#222);
}
.field input,form button{
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 19px;
  color: #868686;
  padding: 0 15px;
  border-radius: 0 5px 5px 0;
  border: 1px solid #444;
  caret-color: #339933;
  background: linear-gradient(#333,#222);
}
input:focus{
  color: #339933;
  box-shadow: 0 0 5px rgba(0,255,0,.2),
              inset 0 0 5px rgba(0,255,0,.1);
  background: linear-gradient(#333933,#222922);
  animation: glow .8s ease-out infinite alternate;
}
@keyframes glow {
   0%{
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0,255,0,.2),
                inset 0 0 5px rgba(0,0,0,.1);
  }
   100%{
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0,255,0,.6),
                inset 0 0 10px rgba(0,255,0,.4);
  }
}
button{
  margin-top: 30px;
  border-radius: 5px!important;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
button:hover{
  color: #339933;
  border: 1px solid #339933;
  box-shadow: 0 0 5px rgba(0,255,0,.3),
              0 0 10px rgba(0,255,0,.2),
              0 0 15px rgba(0,255,0,.1),
              0 2px 0 black;
}
.link{
  margin-top: 25px;
  color: #868686;
}
.link a{
  color: #339933;
  text-decoration: none;
}
.link a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created an Animated Glowing Inputs Login Form in HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/animated-glowing-inputs-login-form/feed/ 9 Transparent Login Form HTML CSS & JavaScript https://www.codingnepalweb.com/transparent-login-form-html-css-javascript/ https://www.codingnepalweb.com/transparent-login-form-html-css-javascript/#comments Sat, 25 Apr 2020 10:25:00 +0000 https://codingnepalweb.com/2020/04/25/amazing-transparent-login-form-using-html-css-javascript/ Transparent Login Form HTML CSS and JavaScriptHello friends, today in this blog you’ll learn how to create an Amazing Transparent Login Form using HTML CSS, and Javascript. In the previous blog, I have shared how to create a Login and Registration Form in HTML & CSS and now it’s time to create a simple but amazing transparent login form html css.

 
I’m sure you have seen many login form html template on many websites. Simply, A login form is a set of inputs used to authenticate or validate a user before access to the restricted page. The login form carries a field for the username and another for the password.

In this design [Login Form HTML CSS], as you can see in the image preview, this is an Amazing Transparent Login Form which is created using HTML CSS & JavaScript. Javascript is only used to toggle show or hide passwords. In this login form, there is an image, a form, some texts, and some social media icons. You can change this form according to your requirements if you have basic knowledge of html and css.

This is a Login Form that has no backend unification. You can use backend language like PHP to make this login form functional and dynamic. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial of this form [Login Form HTML CSS]

Video Tutorial of Transparent Login Form HTML CSS

 
I hope after watching this video you’ve understood the basic codes, concepts behind creating this login form. You can change the position of this form and image very easily, you need to change some position property values. If you like this login form and want to get the source codes of this form then don’t worry, you can easily copy from the given code boxes or easily download source code files from the given download button.

I’ve already shared many login form html templates and you’ve missed it then don’t worry click here to view all popular login form html template and I believe you’ll just love it

You might like this:

Transparent Login Form HTML CSS [Source Codes]

To create this form [Transparent Login Form HTML CSS]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the given codes in your files.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Transparent Login Form HTML CSS</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="bg-img">
         <div class="content">
            <header>Login Form</header>
            <form action="#">
               <div class="field">
                  <span class="fa fa-user"></span>
                  <input type="text" required placeholder="Email or Phone">
               </div>
               <div class="field space">
                  <span class="fa fa-lock"></span>
                  <input type="password" class="pass-key" required placeholder="Password">
                  <span class="show">SHOW</span>
               </div>
               <div class="pass">
                  <a href="#">Forgot Password?</a>
               </div>
               <div class="field">
                  <input type="submit" value="LOGIN">
               </div>
            </form>
            <div class="login">
               Or login with
            </div>
            <div class="links">
               <div class="facebook">
                  <i class="fab fa-facebook-f"><span>Facebook</span></i>
               </div>
               <div class="instagram">
                  <i class="fab fa-instagram"><span>Instagram</span></i>
               </div>
            </div>
            <div class="signup">
               Don't have account?
               <a href="#">Signup Now</a>
            </div>
         </div>
      </div>
      <script>
         const pass_field = document.querySelector('.pass-key');
         const showBtn = document.querySelector('.show');
         showBtn.addEventListener('click', function(){
          if(pass_field.type === "password"){
            pass_field.type = "text";
            showBtn.textContent = "HIDE";
            showBtn.style.color = "#3498db";
          }else{
            pass_field.type = "password";
            showBtn.textContent = "SHOW";
            showBtn.style.color = "#222";
          }
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
.bg-img{
  background: url('bg.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.bg-img:after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.7);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  text-align: center;
  padding: 60px 32px;
  width: 370px;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,0.04);
  box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
  color: white;
  font-size: 33px;
  font-weight: 600;
  margin: 0 0 35px 0;
  font-family: 'Montserrat',sans-serif;
}
.field{
  position: relative;
  height: 45px;
  width: 100%;
  display: flex;
  background: rgba(255,255,255,0.94);
}
.field span{
  color: #222;
  width: 40px;
  line-height: 45px;
}
.field input{
  height: 100%;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #222;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.space{
  margin-top: 16px;
}
.show{
  position: absolute;
  right: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: none;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
  display: block;
}
.pass{
  text-align: left;
  margin: 10px 0;
}
.pass a{
  color: white;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
}
.pass:hover a{
  text-decoration: underline;
}
.field input[type="submit"]{
  background: #3498db;
  border: 1px solid #2691d9;
  color: white;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
  background: #2691d9;
}
.login{
  color: white;
  margin: 20px 0;
  font-family: 'Poppins',sans-serif;
}
.links{
  display: flex;
  cursor: pointer;
  color: white;
  margin: 0 0 20px 0;
}
.facebook,.instagram{
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-left: 10px;
}
.facebook{
  margin-left: 0;
  background: #4267B2;
  border: 1px solid #3e61a8;
}
.instagram{
  background: #E1306C;
  border: 1px solid #df2060;
}
.facebook:hover{
  background: #3e61a8;
}
.instagram:hover{
  background: #df2060;
}
.links i{
  font-size: 17px;
}
i span{
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.signup{
  font-size: 15px;
  color: white;
  font-family: 'Poppins',sans-serif;
}
.signup a{
  color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created an Amazing Transparent Login Form using HTML CSS & Javascript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/transparent-login-form-html-css-javascript/feed/ 22