myabundanceira Useful Updates
Hello frends, welcome to master arts question hub
Today we will learn how to create a registration form popup form in Html. To create a Hatmal form, I had taught you Codignitor, I create a simple form like that. but we will toggel it by using jQuery and bootstrap modal. We can also do this without a bootstrap model. If we are getting waste, then why write the code of jQuery. Friends, I will tell you both by doing an example with an example. Getting you easy is both useful.
So let’s start now. First you copy and put the bootstrap starter template. Then bootstrap’s input login form. Easy is not enough. Neither wrote any code.
login.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#loginform {
display:none;
}
#registerform {
display:none;
}
</style>
<title>Login Form</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Demo site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active pr-3">
<button class="btn btn-sm btn-outline-success" id="login">Login <span class="sr-only">(current)</span></button>
</li>
<li class="nav-item">
<button class="btn btn-sm btn-outline-success" id="register">Register</button>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function() {
$("#login").click(function() {
$("#loginform").toggle();
});
$("#register").click(function() {
$("#registerform").toggle();
});
});
</script>
<div class="container">
<!-- login form -->
<form id="loginform">
<div class="form-group row">
<div class="col-sm-10">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
<!-- Register form -->
<form id="registerform">
<div class="form-group row">
<div class="col-sm-10">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<label for="inputPassword3" class="col-sm-2 col-form-label">confirm Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="re enter Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Your form is ready. You can open it in your browser and see. Cucci Html file opens directly in your chrome.
Now we have to write jQuery for show and hide form. We have to give id to form first. You know how to do that? Easy friends just type inside form attribute id=”myform”. Now we can call this id by jQuery for show form or hide form. We have to set hide first on page load by default. by using css display none. you konw it na. When user click on register or login button form have to toggle down or pop up window will open right. Its to easy in jQuery just 3 4 line code you have to write after html or you can make .js file and include it on header. M written this code u use it as you want.
jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#login").click(function() {
$("#loginform").toggle();
});
$("#register").click(function() {
$("#registerform").toggle();
});
});
</script>
Just it friend. Its varry simple. M i right ? I will tell you now another varry simple way for creat this type form by using bootstrap modal. Nothing you have to do just copy and past bootstrap model. You can chek it out with example on bootstrap.com
Bootstrap modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
login
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- login form -->
<div class="form-group row">
<div class="col-sm-10">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
That’s it friens. Put this code insite body tag of Bootstrap starter tamplet. Then inside model body you put login form. Now choice is yours what you want do or which one you like do with your html login form. If any doubts you can write us comment we will definatly help you as soon as possible.
Happy coding