Login Form - Real Helper

Dev Teertha

1512

This is simple Login Form

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
  
<div id="sign-in" class="sign-in-form">
  <h3>Sign In Now</h3>
  <form">
    <input type="text" placeholder="Enter Your Email"/>
    <input type="password" placeholder="Enter Your password"/>
    <button class="btn btn-danger">Sign In</button>
    <p>Don't Have Any Account <a href="#" onclick="Register();">Register</a> </p>
  </form>
</div>

<div id="sign-up" class="sign-up-form">
  
  <form id="register">
    <h3>Registation Form</h3>  
    </form>
    <input type="text" placeholder="Enter Your First Name"/>
    <input type="text" placeholder="Enter Your Last Name"/>
    <input type="text" placeholder="Enter Your Email"/>
    <input type="password" placeholder="Enter Your password"/>
    <input type="password" placeholder="Retype Your password"/>
                                                             
    <div class="radio-btn">
    <input type="radio" value="Male" name="gender">
    <label for="male">Male</label>
    <input type="radio" value="Female" name="gender">
    <label for="female">Female</label>
    </div>
                       
    <div class="btn-group">
    <button onclick="BackBtn()" id="reg-btn1" class="btn btn-light">Back</button>
    <button id="reg-btn" class="btn btn-danger">Sign-Up</button>
    </div>
    
    
  </form>
</div>
</div>

Try it Yourself >>

.container{
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%; transform:translate(-50%,-50%);
  background-color: black;
  padding: 50px 5px;
  width: 300px;
}
h3{
  text-align: center;
  color:white;
}
input[type=text],input[type=password]{
  height: 40px;
  width: 100%;
  padding-left: 5px;
  margin-bottom: 10px;
  outline: none;
}
.radio-btn{
  width: 100%;
  text-align: center;
}
.radio-btn label{
  color:white;
}
.btn-group{
  width:100%;
}
button{
  width:100%;
}
#reg-btn1{
  margin-right: 10px;
}
p{
  text-align: center;
  color: white
}
.sign-up-form{
  display: none;
}

Try it Yourself >>

var signDisplay = document.getElementById('sign-in');
var regDisplay = document.getElementById('sign-up');
function Register(){
  signDisplay.style.display="none";
  regDisplay.style.display = "block";
}
function BackBtn(){
  signDisplay.style.display="block";
  regDisplay.style.display = "none";
}

Try it Yourself >>