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“.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
