when we need to use steps form in html using asp.net , mvc , etc. we have to download jquery steps library from http://www.jquery-steps.com/
Now We write code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.steps.css">
<script src="../lib/jquery-1.9.1.min.js"></script>
<script src="../build/jquery.steps.js"></script>
</head>
<body>
<div style="width: 800px;">
<div class="content">
<script>
$(function () {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft"
});
});
</script><div id="wizard">
<h2>First Step</h2>
<section>
<fieldset>
<legend>Personal Information</legend>
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" class="required">
<label for="address-2">address </label>
<input id="address-2" name="Address" type="text" class="required">
<label for="Password-2">Password </label>
<input id="Password-2" name="Password" type="Password" class="required">
</fieldset></section>
<h2>Second Step</h2>
<section>
<fieldset>
<legend>Contact Information</legend><label for="Phone-2">Phone Number </label>
<input id="Text6" name="Phone" type="text" class="required">
<label for="Mobile-2">Mobile Number </label>
<input id="Text4" name="Mobile" type="text" class="required">
<label for="EmailID-2">EmailID Number </label>
<input id="Text5" name="EmailID" type="text" class="required">
</fieldset></section>
<h2>Third Step</h2>
<section>
<fieldset>
<legend>Account Information</legend>
<label for="accountName-2">Account Number </label>
<input id="Text1" name="accountName" type="text" class="required">
<label for="bankname-2">Bank Name </label>
<input id="Text2" name="bankName" type="text" class="required">
<label for="ifsccode-2">IFSC CODE </label>
<input id="Text3" name="ifscName" type="text" class="required">
</fieldset></section>
</div>
</div>
</div>
<style>
.wizard > .content > .body input {
display: block;
border: 1px solid #ccc;
width: 100%;
height: 30px;
margin-bottom: 20px;
}.wizard > .content > .body {
background-color: rgba(105, 182, 199, 0.72);
}
</style>
</body>
</html>
Now fill form and click to next button
click next button
now click to finish button complete your three steps form.
Total Post:341
Points:2389.NET ASP.Net JQuery
Ratings:
2972 View(s)
Rate this: