Government of Canada / Gouvernement du Canada

Search

Steps Form

Unstable feature

To be used at your own risk. This feature described below can be removed in any subsequent minor/major release

Learn more about the design decision around provisional features.

Check other provisional features available.

Purpose

Provides the ability to split a form into steps (without/with generic validation).

Example

Client Information
Contact Information
Ethics Questionnaire

For each of the following examples, indicate whether or not you feel that there is an ethical issue.

Ethics 1: You pay $10.00 bucks for a purchase, but receive change for $20.00 bucks. Would you keep the extra money?
       
Ethics 2: You need a software, but can't wait for office to make a decision. Against license restrictions would you download it?
       
View code
  1. Create a <div> element with class wb-steps (you can also add class wb-frmvld for validation). 
    <div class="wb-frmvld wb-steps"></div>
  2. Within previous the <div> element add a <form> element. 
    <form action="#" method="get" id="steps-example"></form>
  3. Within previous the <form> element add your <fieldset> element which will need an <legend> and <div>. These will become your steps 
    <fieldset>
    <legend>Client Information</legend>
    <div>(Any content in the div will be hidden.)</div>
    </fieldset>

Page details

Date modified: