Skip to content

Instantly share code, notes, and snippets.

@arya-oss

arya-oss/login-signup-tabpane-popup.php

Created January 15, 2016 15:14
Show Gist options
  • Save arya-oss/2b16e76fa336cccf408f to your computer and use it in GitHub Desktop.
Save arya-oss/2b16e76fa336cccf408f to your computer and use it in GitHub Desktop.
Download ZIP
Login and Sign Up tabs
Raw
login-signup-tabpane-popup.php
<!DOCTYPE html>
<html>
<head>
<title>Modal Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<button class="btn btn-info" type="button" data-toggle="modal" data-target="#loginmodal">Login </button>
<div id="loginmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a href="#login" data-toggle="tab">Login</a></li>
<li><a href="#signup" data-toggle="tab">Sign Up</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="login">
<form class="form-horizontal" id="loginform" action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
<div class="form-group">
<div class="col-sm-12">
<label for="uname" class="control-label">Username</label>
<input type="text" name="uname" id="uname" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="pass" class="control-label">Password</label>
<input type="password" name="pass" id="pass" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-success" type="submit"> Login </button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="signup">
<form class="form-horizontal" id="signupform" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method='post'>
<div class="form-group">
<div class="col-sm-6">
<label for="fname" class="control-label">First Name</label>
<input class="form-control input-sm" name="fname" id="fname" placeholder="First Name">
</div>
<div class="col-sm-6">
<label for="lname" class="control-label">Last Name</label>
<input class="form-control input-sm" name="lname" id="lname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="uname" class="control-label">Username</label>
<input type="text" name="uname" id="uname" class="form-control input-sm" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label class="control-label" for="dob">Date of Birth </label>
<input name="dob" id="dob" class="form-control input-sm" editable='false'/>
</div>
<div class="col-sm-6">
<label for="gender" class="control-label">Sex</label>
<div class="radio">
<label><input type="radio" name="gender" id="gender" value="male" checked="checked" /> Male </label>
<label><input type="radio" name="gender" id="gender" value="female"/> Female</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="email" class="control-label">Email ID</label>
<input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="phone" class="control-label">Phone</label>
<input type="tel" name="phone" id="phone" class="form-control input-sm" placeholder="Phone Number">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="pass" class="control-label">Password</label>
<input type="password" name="pass" id="pass" class="form-control input-sm" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="passconf" class="control-label">Password Confirm</label>
<input type="password" name="passconf" id="passconf" class="form-control input-sm" placeholder="Password Confirm">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="agree"><input type="checkbox" name="agree" id="agree"> Do you agree with our <a href="#">Terms and Condition</a> and <a href="#">Privacy Policy.</a></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-success btn-sm" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal" type="button"> Close </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@modz2014
Copy link

modz2014 commented Mar 9, 2018

this doesnt work with https only http which is unsecure how to fix this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment