Today, I will teach you how to create a magical signup with jQuery and CSS. The features of this project contains a step by step registration of the web user in the form . This is the best way on how to enlarge the registration on a website with a small amoun of space to use.
I will use bootstrap template for the design of the form in the page.
Let’s Begin:
- Create a landing page. Name it “index.php“.
<!DOCTYPE html>
<html>
<head>
<title>Registration jQuery</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pnl2,
#pnl3,
#step2,
#step3{
display:none;
}
</style>
</head>
<body>
<div class='container' id="container">
<div>
<h3>Registration</h3>
</div>
<form action="" method="post" role="form" style="width:50%">
<!-- panel1 -->
<div class="panel panel-default" id="pnl1">
<div class="panel-heading">
step 1
</div><!-- panel body -->
<div class="panel-body">
<div class="form-group">
<label class="sr-only" for="form-Email">Email</label>
<input class="form-Email form-control" id="form-Email"
name="form-Email" placeholder="Email address..." type=
"email">
</div>
<div class="form-group">
<label class="sr-only" for=
"form-password">Password</label> <input class=
"form-password form-control" id="form-password" name=
"form-password" placeholder="Password..." type=
"password">
</div>
</div><!-- end panel body- -->
</div><!-- end panel 1 -->
<div>
<button class="btn btn-default buttons" id="step1" type=
"submit">Continue</button>
</div>
<div class="panel panel-primary" id="pnl2">
<div class="panel-heading">
step 2
</div><!-- panel body -->
<div class="panel-body">
<div class="form-group">
<label class="sr-only" for=
"form-firstname">Firstname</label> <input class=
"form-firstname form-control" id="form-firstname" name=
"form-firstname" placeholder="firstname..." type=
"text">
</div>
<div class="form-group">
<label class="sr-only" for=
"form-Lastname">Lastname</label> <input class=
"form-Lastname form-control" id="form-Lastname" name=
"form-Lastname" placeholder="Lastname..." type="text">
</div>
</div><!-- end panel body- -->
</div><!-- end panel 2 -->
<div>
<button class="btn btn-primary buttons" id="step2" type=
"submit">Continue</button>
</div>
<div class="panel panel-success" id="pnl3">
<div class="panel-heading">
step 3
</div><!-- panel body -->
<div class="panel-body">
<div class="form-group">
<label class="sr-only" for=
"form-Address">Address</label> <input class=
"form-Address form-control" id="form-Address" name=
"form-Address" placeholder="Address..." type="text">
</div>
<div class="form-group">
<label class="sr-only" for="form-Contact">Contact
No.</label> <input class="form-Contact form-control"
id="form-Contact" name="form-Contact" placeholder=
"Contact Number...." type="text">
</div>
</div><!-- end panel body- -->
</div><!-- end panel 3 -->
<div>
<button class="btn btn-success buttons" id="step3" type=
"submit" value=" Submit ">Submit</button>
</div>
</form>
</div>
<div class='container page-header' id="display"></div>
</body>
</html>- Create a method for changing the fields of a form.
<script type = "text/javascript" src = "jquery/jquery.min.js" > </script>
<script type="text/javascript">
$(function(){$(".buttons").click(function() {
$("#display ").html("<h1> You are now successfully registered. </h1>");
}
/ * disable the submitting of a form * /
return false;
});
});
</script>
For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt