分步式用戶注冊表單UI界面設計

2024-04-27 15:01:38

字體：大中小

來源：轉載

供稿：網友

這是一款效果非?？岬姆植绞接脩?a href="http://m.survivalescaperooms.com/article.asp?typeid=61">注冊表單UI界面設計效果。在這個設計中簡單的將用戶注冊分為3個步驟，用戶填寫完每一個步驟的信息后可以點擊“下一步”按鈕跳轉到下一個步驟，也可以通過“前一步”按鈕來查看前面的填寫內容。在切換步驟的時候還帶有非常炫酷的過渡動畫效果。

在線預覽源碼下載

制作方法

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>