Login/Register Form

Publish Your Code

<!DOCTYPE html>
<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>Webleb</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <div class="form">
    <ul class="tab-group">
      <li class="tab active"><a href="#signup" style="border-radius: 15px!important;margin-right:8x;">Sign Up</a></li>
      <li class="tab"><a href="#login" style="border-radius: 15px!important;margin-left:8px;">Log In</a></li>
    </ul>
    <div class="tab-content">
      <div id="signup">
        <h1>Register</h1>
        <form action="/" method="post">
          <div class="top-row">
            <div class="field-wrap">
              <input type="text" required placeholder="First Name" />
            </div>
            <div class="field-wrap">
              <input type="text" required placeholder="Last Name" />
            </div>
          </div>
          <div class="field-wrap">
            <input type="email" required placeholder="Email Address"/>
          </div>
          <div class="field-wrap">
            <input type="password" required placeholder="Password" />
          </div>
          <button type="submit" class="button button-block" />Sign Up</button>
        </form>
      </div>
      <div id="login">
        <h1>Welcome Back!</h1>
        <form action="/" method="post">
          <div class="field-wrap">
            <input type="email" required placeholder="Email" />
          </div>
          <div class="field-wrap">
            <input type="password" required placeholder="Password" />
          </div>
          <p class="forgot"><a href="https://www.web-leb.com/code">Forgot Password?</a></p>
          <button class="button button-block" />Login</button>
        </form>
      </div>
    </div>
  </div> 
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="/js/main.js"></script>
</body>
</html>

styles.css

@import url(https://fonts.googleapis.com/css?family=Poppins:300);
 *, *:before, *:after {
	 box-sizing: border-box;
}
 body {
  height: 100vh;
	 background: #01939c;
   overflow-y: hidden!important;
	 font-family: 'Poppins', sans-serif;
}
 a {
	 text-decoration: none;
	 color: #01939c;
	 transition: 0.5s ease;
}
 a:hover {
	 color: #179b77;
}
 .form {
	 background: #12141d;
	 padding: 40px;
	 max-width: 600px;
	 margin: 40px auto;
	 border-radius: 15px;
	 box-shadow: 0 4px 10px 4px rgba(19, 35, 47, .3);
}
 .tab-group {
	 list-style: none;
	 padding: 0;
	 margin: 0 0 40px 0;
}
 .tab-group:after {
	 content: "";
	 display: table;
	 clear: both;
}
 .tab-group li a {
	 display: block;
	 text-decoration: none;
	 padding: 15px;
	 background: rgba(160, 179, 176, .25);
	 color: #a0b3b0;
	 font-size: 20px;
	 float: left;
	 width: 48%;
	 text-align: center;
	 cursor: pointer;
	 transition: 0.5s ease;
}
 .tab-group li a:hover {
	 background: #01939c;
	 color: #fff;
}
 .tab-group .active a {
	 background: #01939c;
	 color: #fff;
}
 .tab-content > div:last-child {
	 display: none;
}
.tab-group{
  border-radius: 15px!important;
  margin: 20px;
}
 h1 {
	 text-align: center;
	 color: #fff;
	 font-weight: 300;
	 margin: 0 0 40px;
}
 input, textarea {
	 font-size: 17px;
	 display: block;
	 width: 100%;
	 height: 100%;
	 padding: 5px 10px;
	 background: none;
	 background-image: none;
	 border: 1px solid #01939c;
	 color: #fff;
	 border-radius: 6px;
	 transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
 textarea {
	 border: 2px solid #01939c;
	 resize: vertical;
}
 .field-wrap {
	 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: 15px;
	 padding: 15px 0;
	 font-size: 20px;
	 font-weight: 400;
	 letter-spacing: 0.1em;
	 background: #01939c;
   cursor: pointer;
	 color: #fff;
	 transition: all 0.5s ease;
	 -webkit-appearance: none;
}
 .button:hover, .button:focus {
	 background: #025c61;
}
 .button-block {
	 display: block;
	 width: 100%;
}
 .forgot {
	 margin-top: -20px;
	 text-align: right;
}

main.js

$('.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);
    
  });

Login/Register Form

Recommended

HTML Animated Login Form Example

form githup gmail

Modern Login Form V2

index.html

styles.css

main.js

Recommended

HTML Animated Login Form Example

form githup gmail

Modern Login Form V2

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js