Form, Login Form, SignUp Form

login and signup form in HTML template free download

In this lesson, we are going to learn how to create a login and signup form using Html, CSS and javascript. In the last lesson, we learned how to create Login form in Html and CSS

When users visit a new website for the website then he/she is not a member of that website. For becoming a member of that website you need to create your account. For creating an account on any website you need to enter some credentials. That credentials may be email, username, password, number, address, etc. After entering all these credentials in the form you can create your account.

These credentials are required once for the signup form.

It means that after creating an account on any website you can log in again to your account once again. This time you need to enter a username or password for this login form. No need to enter all the credentials. By using this pattern of login, you can log in to your account.

We are going to create a login and signup form in one form and you can move from login to signup form. Both forms are connected with each other. This form is developed in HTML and CSS languages. Html and CSS are providing facilities to create any type of form or any type of design. It contains username, email, and password and confirms the password field.

A field is a part in which user can input their data. Then it has a checkbox to accept the terms and policies.If you don’t have an account then you need to click on the signup button but if you have an account already then you need to sign in.

Form (Source code)

For creating the signup and sign-in form you need to create three files in your editor. Name the file with the extension of .html

<!--Fantacy Design-->
<!--fantacydesign.com-->

<!DOCTYPE html>
<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">
  <link rel="stylesheet" href="style.css">
  <title>Sign in/sign up form</title>
</head>

<body>

  <div class="container">
    <div class="container-forms">
      <div class="container-info">
        <div class="info-item">
          <div class="table">
            <div class="table-cell">
              <p>
                Have an account?
              </p>
              <button class="info-btn">
                Log in
              </button>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="table">
            <div class="table-cell">
              <p>
                Don't have an account?
              </p>
              <button class="info-btn">
                Sign up
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="container-form">
        <div class="form-item log-in">
          <div class="table">
            <div class="table-cell">
              <input name="Username" placeholder="Username" type="text" />
              <input name="Password" placeholder="Password" type="Password" />
              <button class="btn">
                Log in
              </button>
            </div>
          </div>
        </div>
        <div class="form-item sign-up">
          <div class="table">
            <div class="table-cell">
              <input name="email" placeholder="Email" type="text" />
              <input name="fullName" placeholder="Full Name" type="text" />
              <input name="Username" placeholder="Username" type="text" />
              <input name="Password" placeholder="Password" type="Password" />
              <button class="btn">
                Sign up
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="form.js"></script>
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p>

Have an account?

</p>

</button>

</div>

<p>

Don't have an account?

</p>

</button>

</div>

</button>

</div>

</button>

</div>

</body>

</html>

CSS Code

Then create a file with the name of signup.CSS and paste the given below code. Save the file with the extension of .css

@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);
body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
  background-color: #262626;

  overflow: hidden;

}

.table {
  display: table;
  width: 100%;
  background-color: #262626;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  transition: all 0.5s;
}

.container {
  position: relative;
  width: 700px;
  margin: 30px auto 0;
  height: 420px;
  top: 40%;
  margin-top: -160px;
  transition: all 0.5s;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
background: #262626;
border:1px solid #fff;
-webkit-box-shadow: 0 10px 6px -6px #ddd;
     -moz-box-shadow: 0 10px 6px -6px #ddd;
          box-shadow: 0 10px 6px -6px #ddd;
}

.btn, .info-btn {
  display: block;
  border: none;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  background-color: #be9b7b;
}

.info-btn {
  padding:15px;
  background: #262626;
  border: 1px solid #fff;
  outline: none;

}
.btn:hover {
  opacity: 0.7;
}
.btn, input {
  padding: 10px 15px;
}
 input {
  margin: 0 auto 15px;
  display: block;
  width: 250px;
  background: #262626;
  outline: none;
  border:none;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-size: 16px;
}
.container-info {
  font-size: 0;
}
.info-item {
  text-align: center;
  width: 300px;
  height: 320px;
  display: inline-block;
  color: #fff;
}
.info-item p {
  font-size: 25px;
  font-family: arial;
  margin: 20px;
}
.info-item .btn {
  background-color: transparent;
  border: 1px solid #fff;
}
.info-item .table-cell {
  padding-right: 35px;
}
.info-item:nth-child(2) .table-cell {
  padding-left: 150px;
  padding-right: 0;
}
.container-form {
  overflow: hidden;
  position: absolute;
  left: 30px;
  top: -30px;
  width: 350px;
  height: 480px;
  background-color: #fff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.5s;
  border: 1px solid #fff;
}
.container-form .btn {
  margin-top: 30px;
  padding: 15px;
  border-radius: 10%;
  background-color: red;

}
.form-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: all 0.7s;
}
.form-item.sign-up {
  position: absolute;
  left: -100%;
  opacity: 0;
}
.container.log-in .container-form {
  left: 265px;
}
.container.log-in .container-form .form-item.sign-up {
  left: 0;
  opacity: 1;
}
.container.log-in .container-form .form-item.log-in {
  top: -100%;
  opacity: 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);

body {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

font-family: "Roboto", sans-serif;

background-color: #262626;

overflow: hidden;

}

.table {

display: table;

width: 100%;

background-color: #262626;

height: 100%;

}

.table-cell {

display: table-cell;

vertical-align: middle;

transition: all 0.5s;

}

.container {

position: relative;

width: 700px;

margin: 30px auto 0;

height: 420px;

top: 40%;

margin-top: -160px;

transition: all 0.5s;

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

background: #262626;

border:1px solid #fff;

-webkit-box-shadow: 0 10px 6px -6px #ddd;

-moz-box-shadow: 0 10px 6px -6px #ddd;

box-shadow: 0 10px 6px -6px #ddd;

}

.btn, .info-btn {

display: block;

border: none;

text-align: center;

margin: 0 auto;

color: #fff;

background-color: #be9b7b;

}

.info-btn {

padding:15px;

background: #262626;

border: 1px solid #fff;

outline: none;

}

.btn:hover {

opacity: 0.7;

}

.btn, input {

padding: 10px 15px;

}

input {

margin: 0 auto 15px;

display: block;

width: 250px;

background: #262626;

outline: none;

border:none;

border-bottom: 1px solid #fff;

color: #fff;

font-size: 16px;

}

.container-info {

font-size: 0;

}

.info-item {

text-align: center;

width: 300px;

height: 320px;

display: inline-block;

color: #fff;

}

.info-item p {

font-size: 25px;

font-family: arial;

margin: 20px;

}

.info-item .btn {

background-color: transparent;

border: 1px solid #fff;

}

.info-item .table-cell {

padding-right: 35px;

}

.info-item:nth-child(2) .table-cell {

padding-left: 150px;

padding-right: 0;

}

.container-form {

overflow: hidden;

position: absolute;

left: 30px;

top: -30px;

width: 350px;

height: 480px;

background-color: #fff;

box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);

transition: all 0.5s;

border: 1px solid #fff;

}

.container-form .btn {

margin-top: 30px;

padding: 15px;

border-radius: 10%;

background-color: red;

}

.form-item {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

opacity: 1;

transition: all 0.7s;

}

.form-item.sign-up {

position: absolute;

left: -100%;

opacity: 0;

}

.container.log-in .container-form {

left: 265px;

}

.container.log-in .container-form .form-item.sign-up {

left: 0;

opacity: 1;

}

.container.log-in .container-form .form-item.log-in {

top: -100%;

opacity: 0;

}

JS CODE:

Again create a file of signup.js and paste the given code in it. Save it with the extension of .js

const info_btn = document.getElementsByClassName("info-btn")
for (let i = 0; i < info_btn.length; i++) {
  info_btn[i].onclick = () => {
    document.querySelector(".container").classList.toggle("log-in");
  }; 
}

const info_btn = document.getElementsByClassName("info-btn")

for (let i = 0; i < info_btn.length; i++) {

info_btn[i].onclick = () => {

document.querySelector(".container").classList.toggle("log-in");

};

}

These extensions will help the browser to understand the type of file and execute it properly.

Congratulation! You have created your signup and login form successfully. If you find any type of error then comment below so that we can resolve your error.

If you like this post then like it, share it, and comment below.

But if you are facing errors then download the given below file. It is a zip file that contains Html, CSS, and javascript files. You just need to download it. After that extract the file and run the given file.

Download Source File