這是一款效果非常酷的分步式用戶註冊表單UI界面設計效果。在這個設計中簡單的將用戶註冊分爲3個步驟，用戶填寫完每一個步驟的信息後可以點擊“下一步”按鈕跳轉到下一個步驟，也可以通過“前一步”按鈕來查看前面的填寫內容。在切換步驟的時候還帶有非常炫酷的過渡動畫效果。

分步式用戶註冊表單UI界面代碼解析/附源碼下載

HTML結構

該分步式註冊表單使用的HTML結構就是一個普通的<form>表單元素。每一個註冊步驟都使用一個<fieldset>元素來包裹。

<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">這是第一步</h3><input type="text" name="email" placeholder="Email地址" /><input type="password" name="pass" placeholder="密碼" /><input type="password" name="cpass" placeholder="重複密碼" /><input type="button" name="next" class="next action-button" value="Next" /></fieldset><fieldset><h2 class="fs-title">填寫社交賬號</h2><h3 class="fs-subtitle">填寫你的常用社交網絡賬號</h3><input type="text" name="x-weibo" placeholder="新浪微博" /><input type="text" name="t-weibo" placeholder="騰訊微博" /><input type="text" name="qq" placeholder="騰訊QQ" /><input type="button" name="previous" class="previous action-button" value="Previous" /><input type="button" name="next" class="next action-button" value="Next" /></fieldset><fieldset><h2 class="fs-title">個人詳細信息</h2><h3 class="fs-subtitle">個人詳細信息是保密的，不會被泄露</h3><input type="text" name="fname" placeholder="暱稱" /><input type="text" name="lname" placeholder="姓名" /><input type="text" name="phone" placeholder="電話號碼" /><textarea name="address" placeholder="家庭住址"></textarea><input type="button" name="previous" class="previous action-button" value="Previous" /><input type="submit" name="submit" class="submit action-button" value="Submit" /></fieldset></form>

CSS樣式

該分步式用戶註冊表單的CSS樣式非常簡單。首先是input元素和按鈕都被簡單的進行了一些美化：

/*inputs*/#msform input, #msform textarea {padding: 15px;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;width: 100%;box-sizing: border-box;font-family: "Microsoft YaHei