Wizard form

Wizard form : form : Form Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Form Style » form »

Wizard form


 



<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Try it out</title>
    <style rel="stylesheet" type="text/css">
body {
  font-size: 12pt;
}

fieldset {
  font-size: 12px;
  font-weight: bold;
  padding: 10px;
  width: 500px;
}

td {
  font-size: 12px;
}

td.label {
  text-align: right;
  width: 175px;
}

td.form {
  width: 350px;
}

div.submit {
  width: 450px;
  text-align: right;
  padding-top: 15px;
}

span.small {
  font-size: 10px;
}

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

input {
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  background-color: #f2f2f2;
}

.steps {
  width: 500px;
}

td.stepOn,td.stepOff {
  width: 100px;;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  padding: 5px;
  font-size: 14px;
}

td.stepOff {
  background-color: #efefef;
}

.proceed {
  text-align: right;
}
</style>
  </head>
  <body>

<table class="steps">
  <tr>
    <td class="stepOff">Step One</td>
    <td class="stepOn">Step Two</td>
    <td class="stepOff">Step Three</td>
  </tr>
</table>

<form name="frmExample" action="" method="post">
<fieldset>
<legend>Contact details:</legend>

<table>
  <tr>
    <td class="label"><label for="address1">Address 1:</label></td>
    <td class="form"><input type="text" name="txtAddress1" id="address1" size="30" /></td>
  </tr>
  <tr>
    <td class="label"><label for="address2">Address 2:</label></td>
    <td class="form"><input type="text" name="txtAddress2" id="address2" size="30" /></td>
  </tr>
  <tr>
    <td class="label"><label for="town">Town/Suburb:</label></td>
    <td class="form"><input type="text" name="txtTown" id="town" size="12" /></td>
  </tr>
  <tr>
    <td class="label"><label for="city">City/State:</label></td>
    <td class="form"><input type="text" name="txtState" id="city" size="12" /></td>
  </tr>
  <tr>
    <td class="label"><label for="postcode">Postal/Zip Code:</label></td>
    <td class="form"><input type="text" name="txtPostCode" id="postcode" size="12" /></td>
  </tr>
</table>
<br />
<table class="steps">
  <tr>
    <td class="back"><input type="submit" value="Back" /></td>
    <td class="proceed"><input type="submit" value="Proceed" /></td>
  </tr>
</table>
</fieldset>
<br /><span class="required">*</span> = required
</form>

</body>
</html>