你的位置:首页 > Java教程

[Java教程]分步式用户注册表单UI界面设计


这是一款效果非常酷的分步式用户注册表单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>    

via:http://www.w2bc.com/article/css3-step-register-form