有的情況，提交表單需要多個步驟來完成，很多人是通過頁面轉換來是實現過程設計，其實，我們可以在一個頁面就完成這個功能，正如本文介紹的，jQuery和CSS3實現有進度條的多步注冊表單 。

實例介紹

此注冊表單分三個步驟完成，第一步是“創建賬號”，第二步是填寫“社交賬號”，第三步是填寫“個人資料”，然后提交表單。

三個表單均在同一頁面，上下步可以隨意切換。

上下步表單切換有過渡動畫效果。

表單頂部有一個進度條，顯示當前進程表單。

實例代碼

本實例需要引用兩個js文件。一個是 jquery-2-1-3.min.js 文件，因為前端程序使用jquery編寫；另一個是 jquery.easing.min.js ，這個文件實現表單切換的效果。

<script src='jquery-2-1-3.min.js'></script>
<script src='jquery.easing.min.js'></script>

CSS樣式表無須引用外部文件，這是值得欣慰的地方。

HTML代碼

<form id="msform">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">賬號設置</li>
    <li>社交賬號</li>
    <li>個人資料</li>
  </ul>
  <!-- fieldsets -->
  <fieldset>
    <h2 class="fs-title">創建賬號</h2>
    <h3 class="fs-subtitle">步驟 1</h3>
    <input type="text" name="email" placeholder="Email" />
    <input type="password" name="pass" placeholder="Password" />
    <input type="password" name="cpass" placeholder="Confirm Password" />
    <input type="button" name="next" class="next action-button" value="下一步" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">社交賬號</h2>
    <h3 class="fs-subtitle">你的社交賬號</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="上一步" />
    <input type="button" name="next" class="next action-button" value="下一步" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">個人資料</h2>
    <h3 class="fs-subtitle">請完善你的個人資料</h3>
    <input type="text" name="fname" placeholder="First Name" />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" name="phone" placeholder="Phone" />
    <textarea name="address" placeholder="Address"></textarea>
    <input type="button" name="previous" class="previous action-button" value="上一步" />
    <input type="submit" name="submit" class="submit action-button" value="提 交" />
  </fieldset>
</form>

代碼解釋

<ul id="progressbar">...</ul> 是進度條內容。class="active" 是表示已經完成的步驟。

<fieldset>...</fieldset> 是表單內容。

progressbar 和 fieldset 的樣式均在CSS里設置。

jQuery代碼

下面代碼可以設置表單切換時內容延時時間。

duration: 800,

如何把值設為0，那么表單切換就沒有了過渡效果。

demodownload

您可能對以下文章也感興趣

• CSS3+jQuery實現登錄表單與注冊表單同頁平滑切換
• 漂亮的注冊和登錄切換表單【html5和css3實現】
• 純css3實現漂亮的用戶注冊表單
• 純CSS3實現簡約又漂亮的用戶登錄框【演示/源碼下載】
• 純CSS：點擊輸入框時，標簽（占位符）浮動可見

標簽: 表單  多步表單  注冊表單