Multi Step Form Using HTML and JavaScript

Form is the important part in web design. Form is the primary interface to the user by which user is used to interact with the data in terms of fetching or submitting. A good look of the form is the essential part of web page. Good look in terms of of usability and functionality. The below code represents a multi step form using HTML and Java Script.Multi step form are found now a days in various websites.

We have done multi step form using HTML and java script

Multi step form example

<pre><script>// <![CDATA[
var count = 0; function validation(event) { var radio_check = document.getElementsByName(‘gender’); var input_field = document.getElementsByClassName(‘text_field’); var text_area = document.getElementsByTagName(‘textarea’); // Validating radio button. if (radio_check[0].checked == false && radio_check[1].checked == false) { var y = 0; } else { var y = 1; } // For loop to count blank inputs. for (var i = input_field.length; i > count; i–) {
if (input_field[i – 1].value == ” || text_area.value == ”) {
count = count + 1;
} else {
count = 0;
}
}
if (count != 0 || y == 0) {
alert(“*All Fields are mandatory*”); // Notifying validation
event.preventDefault();
} else {
return true;
}
}
/*———————————————————*/
// Function that executes on click of first next button.
function next_step1() {
document.getElementById(“first”).style.display = “none”;
document.getElementById(“second”).style.display = “block”;
document.getElementById(“active2”).style.color = “#f16000”;
}
// Function that executes on click of first previous button.
function prev_step1() {
document.getElementById(“first”).style.display = “block”;
document.getElementById(“second”).style.display = “none”;
document.getElementById(“active1”).style.color = “#f16000”;
document.getElementById(“active2”).style.color = “gray”;
}
// Function that executes on click of second next button.
function next_step2() {
document.getElementById(“second”).style.display = “none”;
document.getElementById(“third”).style.display = “block”;
document.getElementById(“active3”).style.color = “#f16000”;
}
// Function that executes on click of second previous button.
function prev_step2() {
document.getElementById(“third”).style.display = “none”;
document.getElementById(“second”).style.display = “block”;
document.getElementById(“active2”).style.color = “#f16000”;
document.getElementById(“active3”).style.color = “gray”;
}\
// ]]></script></pre>
<div><form class=””regform”” action=””#”” method=””get””>&lt;!– Progressbar –&gt;
<ul>
<ul>
<li id=””active1″”>Create Account</li>
</ul>
</ul>
&nbsp;
<ul>
<li id=””active2″”>Educational Profiles</li>
</ul>
&nbsp;

&nbsp;
<ul>
<li id=””active3″”>Personal Details</li>
</ul>
&nbsp;

&nbsp;

&lt;!– Fieldsets –&gt;
<fieldset id=””first””>
<h2 class=””title””>Create your account</h2>
&nbsp;
<p class=””subtitle””>Step 1</p>
<input class=””text_field”” name=””email”” type=””text”” value=”””” placeholder=””Email”” /> <input class=””text_field”” name=””pass”” type=””password”” value=”””” placeholder=””Password”” /> <input class=””text_field”” name=””cpass”” type=””password”” value=”””” placeholder=””Confirm” /> <input id=””next_btn1″” type=””button”” value=””Next”” /></fieldset>
&nbsp;
<fieldset id=””second””>
<h2 class=””title””>Educational Profiles</h2>
&nbsp;
<p class=””subtitle””>Step 2</p>
<select class=””options””>
<option>–Select Education–</option>
<option>Post Graduate</option>
<option>Graduate</option>
<option>HSC</option>
<option>SSC</option>
</select><input class=””text_field”” name=””marks”” type=””text”” value=”””” placeholder=””Marks” /> <input class=””text_field”” name=””pyear”” type=””text”” value=”””” placeholder=””Passing” /> <input class=””text_field”” name=””univ”” type=””text”” placeholder=””University”” /> <input id=””pre_btn1″” type=””button”” value=””Previous”” /> <input id=””next_btn2″” name=””next”” type=””button”” value=””Next”” /></fieldset>
&nbsp;
<fieldset id=””third””>
<h2 class=””title””>Personal Details</h2>
&nbsp;
<p class=””subtitle””>Step 3</p>
<input class=””text_field”” name=””fname”” type=””text”” placeholder=””First” /> <input class=””text_field”” name=””lname”” type=””text”” placeholder=””Last” /> <input class=””text_field”” name=””cont”” type=””text”” placeholder=””Contact”” /> <label>Gender</label> <input name=””gender”” type=””radio”” value=””Male”” />Male <input name=””gender”” type=””radio”” value=””Female”” />Female <textarea name=””address”” placeholder=””Address””>&lt;br /&gt;
</textarea> <input id=””pre_btn2″” type=””button”” value=””Previous”” /> <input class=””submit_btn”” type=””submit”” value=””Submit”” /></fieldset>
</form></div>