Responding to user interaction

At its most basic level, we can manually update the progressbar in response to user interaction. For example, we could specify a wizard-style form, which has several steps to complete. In this example, we'll create a form as shown in the following screenshot:

During each step, we can increment the progressbar manually to let the user know how far through the process they are. In progressbar5.html, replace the progressbar container and buttons with the following code:

<div class="form-container ui-helper-clearfix ui-corner-all">
  <h1>Registration Form</h1>
  <p>Progress:</p>
  <div id="myProgressbar"></div>
  <label id="amount">0%</label>
  <form action="serverScript.php">>
    <div class="form-panel">
      <h2>Personal Details</h2>
      <fieldset class="ui-corner-all">
        <label for="name">Name:</label>
        <input id="name" type="text">
      ...