Scroll to top

How to create login and signup form in one box in html and css?

create login and signup form in one box

<html>
<head>
<style>
.col-2, label {
    width: 100%;
    float: left;
    font-size: 20px;
    margin-bottom: 3px;
}
.box {
    width: 24%;
    height: 362px;
    border: 1px solid black;
}
input[type=”text”],
input[type=”password”] {
    width: 100%;
    height: 40px;
    font-size: 20px;
}
.wrap{

width:80%;
margin:auto;


}

input[type=”submit”] {
    width: 82px;
    height: 40px;
    background-color: #61CE70;
    font-size: 15px;
    font-weight: 500;
    padding: 11px;
    margin-top: 2px;
}

p {
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 1px;
}

h4 {
    font-size: 24px;
    font-weight: 700;
    color: #61ce70;
cursor: pointer;
}
.link{

color:red;

}
.loginform{

display:none;


}
</style>
<script src=”<?php echo plugin_dir_url(__FILE__);?>/js/jquery.min.js”></script>
<script>

$(document).ready(function(){

  $(“#login”).click(function(){
 $(“.regform”).hide();
 $(“.loginform”).show();
});

 $(“#register”).click(function(){
 $(“.regform”).show();
 $(“.loginform”).hide();
});

});

</script>
</head>
<body>

<div class=”box”>
<div class=”wrap”>
<h4><span id=”register”> Register</span> / <span Id=”login”>Login</span></h4>
</div>
<div class=”wrap”>
<form action=”” method=”post” class=”regform”>
<div class=”col-2″>
<label>Phone</label>
<input type=”text” name=”phone” placeholder=”Phone” required>
</div>
<div  class=”col-2″>
<label>Password</label>
<input type=”password” name=”password” placeholder=”password” required>
</div>
<div  class=”col-2″>
<input type=”submit” name=”register” value=”Register”>
</div>
<p>Lost your Password?</p>
</div>
</form>

<form action=”” method=”post” class=”loginform”>
<div class=”wrap”>
<div class=”col-2″>
<label>Phone</label>
<input type=”text” name=”phone” placeholder=”Phone” required>
</div>
<div  class=”col-2″>
<label>Password</label>
<input type=”password” name=”password” placeholder=”password” required>
</div>
<div  class=”col-2″>
<input type=”submit” name=”login” value=”Login”>
</div>
<p>Lost your Password?</p>
</div>
</form>

</div>

</body>
</html>

Leave a Reply

Your email address will not be published.