create login and signup form in one box
<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>
No comments:
Post a Comment