卡卡網(wǎng)

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

實(shí)例介紹

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

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

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

表單頂部有一個進(jìn)度條，顯示當(dāng)前進(jìn)程表單。

實(shí)例代碼

本實(shí)例需要引用兩個js文件。一個是 jquery-2-1-3.min.js 文件，因?yàn)榍岸顺绦蚴褂胘query編寫；另一個是 jquery.easing.min.js ，這個文件實(shí)現(xiàn)表單切換的效果。

<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">賬號設(shè)置</li>
    <li>社交賬號</li>
    <li>個人資料</li>
  </ul>
  <!-- fieldsets -->
  <fieldset>
    <h2 class="fs-title">創(chuàng)建賬號</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> 是進(jìn)度條內(nèi)容。class="active" 是表示已經(jīng)完成的步驟。

<fieldset>...</fieldset> 是表單內(nèi)容。

progressbar 和 fieldset 的樣式均在CSS里設(shè)置。

jQuery代碼

下面代碼可以設(shè)置表單切換時內(nèi)容延時時間。

duration: 800,

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

demodownload

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

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

標(biāo)簽: 表單  多步表單  注冊表單