Responsive Bootstrap Login and Registraion form
<![CDATA[
<!--DOCTYPE html-->
<html lang="en">
<head>
<title>Registration form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
background: #a8ff78; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #78ffd6, #a8ff78); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #78ffd6, #a8ff78); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ulink{
width:50%;
background-color:#fff;
}
</style>
</head>
<body>
<br>
<div class="container">
<h2 class="text-center">Registration and Login Form</h2>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<ul class="nav nav-tabs">
<li class="active ulink"><a data-toggle="tab" href="#home">Register Form</a></li>
<li class="ulink"><a data-toggle="tab" href="#menu1">Login Form</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!--=======Form=======--->
<div class="panel panel-default">
<div class="panel-body">
<!-- =============== -->
<form method="GET" action="">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<input type="email" name="num" class="form-control" placeholder="Enter your Email">
</div>
<div class="form-group">
<input type="password" name="pass" class="form-control" placeholder="********">
</div>
<div class="form-group">
<select class="form-control" name="country">
<option value="India">Inida</option>
<option value="pakistan">Pakistan</option>
</select>
</div>
<div class="form-group">
<input type="text" name="" class="form-control" list="country" placeholder="Select country">
<datalist id="country">
<option>Inida</option>
<option>Inida</option>
<option>Pakistan</option>
<option>Panducheri</option>
</datalist>
</div>
<div class="form-group">
<input type="submit" class="form-control btn btn-success">
</div>
</form>
<!-- ============== -->
</div>
</div>
<!--=======Form close=======--->
</div>
<!--=====================-->
<div id="menu1" class="tab-pane fade">
<!--==========[form]=========-->
<div class="panel panel-default">
<div class="panel-body">
<!-- =============== -->
<form method="GET" action="">
<div class="form-group">
<input type="email" name="num" class="form-control" placeholder="Enter your Email">
</div>
<div class="form-group">
<input type="password" name="pass" class="form-control" placeholder="********">
</div>
<div class="form-group">
<input type="submit" class="form-control btn btn-success">
</div>
</form>
</div>
<!--===================-->
</div>
</div>
</body>
</html>
]]>
agyanadda
Author & Editor
Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.
0 $type={blogger}:
Post a Comment