Home Web Design HTML HTML Login and Signup Form With CSS JavaScript | Switch Between

HTML Login and Signup Form With CSS JavaScript | Switch Between

September 6, 2019

39621

How we can create a switchable form that contains login and signup both field? Solution: Check out this HTML Login and Signup Form With CSS JavaScript, Switch Between.

Previously I have shared some types of login forms, but this is a combo of login and sign up. Forms are everywhere, every type of blog websites use forms for multipurpose. HTML 5 form contains form elements like input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Today you will learn to create Switchable form field for switching sign up and log in. There is only a section with two forms, on the top you can see navigation for switch between the forms. There are placeholders that switch downside of input when it is active, like out input label animation program.

So, Today I am sharing HTML Login and Signup Form With CSS JavaScript. In there I have used jQuery, as you know jQuery is JS library that’s why I am calling this a JavaScript program. You can place this form on your website, and customization is so easy. Also, it has a responsive design because of its small size.

If you are thinking now how this login/signup form actually is, then see the preview given below.

Preview Of Switch Login/Signup

See this video preview to getting an idea of how this switchable form looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

HTML Login and Signup Form With CSS JavaScript Source Code

Before sharing source code, let’s talk about it. First I have created two different HTML forms inside a div, and put another two divs for two forms. Inside the form I have used many types of inputs like text, email, password, submit, etc (info). And also placed labels for showing info and as a placeholder also.

Now using CSS, I have placed all the element on the right place. I have done so many works using CSS, like margin, padding, height, width, font, etc. For fonts, I have used a google font and placed its link in HTML file. All CSS codes are basics, there are not any tough code, and for the small screen, I have reduced the padding, margin, font-size using CSS @keyframe.

As you know I am using jQuery for easy and fast work. Basically there I have created some class and their values in the CSS file, JS just adds and removes those class according to action. And also its help to switch between two forms, also there its remove the and active a class inside the elements.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Sign-Up/Login Form</title>
  <link href="https://fonts.googleapis.com/css?family=Manjari&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="form">
      
      <ul class="top-area">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>
      
      <div class="tab-content">
        <div id="signup">   
          <h1>Sign Up for Free</h1>
          
          <form action="/" method="post">
          
          <div class="top-row">
            <div class="label-field">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>
        
            <div class="label-field">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>

          <div class="label-field">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
          
          <div class="label-field">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
          
          <button type="submit" class="button button-block"/>Get Started</button>
          
          </form>

        </div>
        
        <div id="login">   
          <h1>Welcome Back!</h1>
          
          <form action="/" method="post">
          
            <div class="label-field">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
          
          <div class="label-field">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
          
          <p class="forgot"><a href="#">Forgot Password?</a></p>
          
          <button class="button button-block">Log In</button>
          
          </form>

        </div>
        
      </div>  
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Sign-Up/Login Form</title>

</head>

<body>

</ul>

<label>

First Name<span class="req">*</span>

</label>

</div>

<label>

Last Name<span class="req">*</span>

</label>

</div>

<label>

Email Address<span class="req">*</span>

</label>

</div>

<label>

Set A Password<span class="req">*</span>

</label>

</div>

<button type="submit" class="button button-block"/>Get Started</button>

</form>

</div>

<h1>Welcome Back!</h1>

<label>

Email Address<span class="req">*</span>

</label>

</div>

<label>

Password<span class="req">*</span>

</label>

</div>

<p class="forgot"><a href="#">Forgot Password?</a></p>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
*, *:before, *:after {
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
}
body {
  background: #f3f3f3;
  font-family: 'Manjari', sans-serif;
}
a {
  text-decoration: none;
  color: #1da1f2;
  transition: .5s ease;
}
a:hover {
  color: #0080ff;
}
.form {
  background: rgb(22,19,54, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
.top-area {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.top-area:after {
  content: "";
  display: table;
  clear: both;
}
.top-area li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}
.top-area li a:hover {
  background: #0080ff;
  color: #ffffff;
}
.top-area .active a {
  background: #1da1f2;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}
label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1da1f2;
}
label.active {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}
label.highlight {
  color: #ffffff;
}
input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1da1f2;
}
textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}
.label-field {
  position: relative;
  margin-bottom: 40px;
}
.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}
.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1da1f2;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #0080ff;
}
.button-block {
  display: block;
  width: 100%;
}
.forgot {
  margin-top: -20px;
  text-align: right;
}
@media (max-width: 765px) {
    label {
      left: 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

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

/* Code By Webdevtrick ( https://webdevtrick.com ) */

*, *:before, *:after {

box-sizing: border-box;

}

html {

overflow-y: scroll;

}

body {

background: #f3f3f3;

font-family: 'Manjari', sans-serif;

}

a {

text-decoration: none;

color: #1da1f2;

transition: .5s ease;

}

a:hover {

color: #0080ff;

}

.form {

background: rgb(22,19,54, 0.9);

padding: 40px;

max-width: 600px;

margin: 40px auto;

border-radius: 4px;

box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);

}

.top-area {

list-style: none;

padding: 0;

margin: 0 0 40px 0;

}

.top-area:after {

content: "";

display: table;

clear: both;

}

.top-area li a {

display: block;

text-decoration: none;

padding: 15px;

background: rgba(160, 179, 176, 0.25);

color: #a0b3b0;

font-size: 20px;

float: left;

width: 50%;

text-align: center;

cursor: pointer;

transition: .5s ease;

}

.top-area li a:hover {

background: #0080ff;

color: #ffffff;

}

.top-area .active a {

background: #1da1f2;

color: #ffffff;

}

.tab-content > div:last-child {

display: none;

}

h1 {

text-align: center;

color: #ffffff;

font-weight: 300;

margin: 0 0 40px;

}

label {

position: absolute;

-webkit-transform: translateY(6px);

transform: translateY(6px);

left: 13px;

color: rgba(255, 255, 255, 0.5);

transition: all 0.25s ease;

-webkit-backface-visibility: hidden;

pointer-events: none;

font-size: 22px;

}

label .req {

margin: 2px;

color: #1da1f2;

}

label.active {

-webkit-transform: translateY(50px);

transform: translateY(50px);

left: 2px;

font-size: 14px;

}

label.active .req {

opacity: 0;

}

label.highlight {

color: #ffffff;

}

input, textarea {

font-size: 22px;

display: block;

width: 100%;

height: 100%;

background: none;

background-image: none;

border: 1px solid #a0b3b0;

color: #ffffff;

border-radius: 0;

transition: border-color .25s ease, box-shadow .25s ease;

}

input:focus, textarea:focus {

outline: 0;

border-color: #1da1f2;

}

textarea {

border: 2px solid #a0b3b0;

resize: vertical;

}

.label-field {

position: relative;

margin-bottom: 40px;

}

.top-row:after {

content: "";

display: table;

clear: both;

}

.top-row > div {

float: left;

width: 48%;

margin-right: 4%;

}

.top-row > div:last-child {

margin: 0;

}

.button {

border: 0;

outline: none;

border-radius: 0;

padding: 15px 0;

font-size: 2rem;

font-weight: 600;

text-transform: uppercase;

letter-spacing: .1em;

background: #1da1f2;

color: #ffffff;

transition: all 0.5s ease;

-webkit-appearance: none;

}

.button:hover, .button:focus {

background: #0080ff;

}

.button-block {

display: block;

width: 100%;

}

.forgot {

margin-top: -20px;

text-align: right;

}

@media (max-width: 765px) {

label {

left: 0;

} }

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
  
  var $this = $(this),
      label = $this.prev('label');

	  if (e.type === 'keyup') {
			if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
    	if( $this.val() === '' ) {
    		label.removeClass('active highlight'); 
			} else {
		    label.removeClass('highlight');   
			}   
    } else if (e.type === 'focus') {
      
      if( $this.val() === '' ) {
    		label.removeClass('highlight'); 
			} 
      else if( $this.val() !== '' ) {
		    label.addClass('highlight');
			}
    }

});

$('.tab a').on('click', function (e) {
  
  e.preventDefault();
  
  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');
  
  target = $(this).attr('href');

  $('.tab-content > div').not(target).hide();
  
  $(target).fadeIn(600);
  
});

// Code By Webdevtrick ( https://webdevtrick.com )

$('.form').find('input, textarea').on('keyup blur focus', function (e) {

var $this = $(this),

label = $this.prev('label');

if (e.type === 'keyup') {

if ($this.val() === '') {

label.removeClass('active highlight');

} else {

label.addClass('active highlight');

}

} else if (e.type === 'blur') {

if( $this.val() === '' ) {

label.removeClass('active highlight');

} else {

label.removeClass('highlight');

}

} else if (e.type === 'focus') {

if( $this.val() === '' ) {

label.removeClass('highlight');

}

else if( $this.val() !== '' ) {

label.addClass('highlight');

}

});

$('.tab a').on('click', function (e) {

e.preventDefault();

$(this).parent().addClass('active');

$(this).parent().siblings().removeClass('active');

target = $(this).attr('href');

$('.tab-content > div').not(target).hide();

$(target).fadeIn(600);

});

That’s It. Now you have successfully created HTML Login and Signup Form With CSS JavaScript, Switch Between Two Forms. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.