HTML Form How to - Wizard based registration form

Question

We would like to know how to wizard based registration form.
Answer


<!DOCTYPE html>
<html>
<head>
<style>
fieldset {<!-- w w w .j av a 2 s  . c  om-->
  padding: 10px;
  width: 550px;
}

label {
  width: 170px;
  float: left;
  text-align: right;
  clear: both;
  margin-bottom: 10px;
}

.input {
  width: 350px;
  float: left;
}

input {
  border-style: solid;
  border-color: #666666;
  border-width: 1px;
  background-color: #f2f2f2;
  font-size: 100%;
}

input:focus {
  border-style: solid;
  border-color: #333333;
  border-width: 1px;
  background-color: #ffffcc;
}

.submit {
  clear: both;
  margin-left: 170px;
}

.small {
  font-size: 10px;
}

.required {
  font-weight: bold;
  font-size: 20px;
  color: #ff0000;
}

.steps {
  list-style-type: none;
}

.steps li {
  display: inline;
  float: left;
  width: 100px;
  margin: 20px;
  padding: 5px;
  color: #ffffff;
  background-color: #000000;
  border: 1px solid #000000;
}

.steps .on {
  border: 1px solid #666666;
  background-color: #efefef;
  color: #000000;
  background-color: #ffffff;
}

.next {
  float: right;
}

.clear {
  clear: both;
  margin: 20px;
}
</style>
</head>
<body>


  <ul class="steps">
    <li>Step 1 of 3</li>
    <li class="on">Step 2 of 3</li>
    <li>Step 3 of 3</li>
  </ul>

  <br class="clear" />

  <form name="frmExample" action="" method="post">
    <fieldset>
      <legend>Your address:</legend>

      <label for="address1">Address 1: <span class="required">*</span></label>
      <div class="input">
        <input type="text" name="txtAddress1" id="address1" size="12" />
      </div>

      <label for="address2">Address 2: </label>
      <div class="input">
        <input type="text" name="txtAddress2" id="address2" size="12" />
      </div>

      <label for="town">Town / Suburb: </label>
      <div class="input">
        <input type="text" name="txtTown" id="town" size="12" />
      </div>

      <label for="city">City: <span class="required">*</span></label>
      <div class="input">
        <input type="text" name="txtCity" id="city" size="12" />
      </div>

      <label for="zip">ZIP Code: </label>
      <div class="input">
        <input type="text" name="txtZIP" id="zip" size="5" />
      </div>

      <br class="clear" /> <span class="back"><input type="submit"
        value="Back" /></span> <span class="next"><input type="submit"
        value="Proceed" /></span>


      <div class="clear">
        <span class="required">*</span> = required
      </div>

    </fieldset>

  </form>

</body>
</html>
The code above is rendered as follows: