1 / 9
文档名称:

分步式用户注册表单UI界面设计制作方法.doc

格式:doc   大小:60KB   页数:9页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

分步式用户注册表单UI界面设计制作方法.doc

上传人:文库旗舰店 2019/9/29 文件大小:60 KB

下载得到文件列表

分步式用户注册表单UI界面设计制作方法.doc

文档介绍

文档介绍:分步式用户注册表单UI界面设计制作方法这是一款效果非常酷的分步式用户注册表单UI界面设计效果。在这个设计中简单的将用户注册分为3个步骤,用户填写完每一个步骤的信息后可以点击“下一步”按钮跳转到下一个步骤,也可以通过“前一步”按钮来查看前面的填写内容。在切换步骤的时候还带有非常炫酷的过渡动画效果。查看演示    下载插件制作方法HTML结构该分步式注册表单使用的HTML结构就是一个普通的<form>表单元素。每一个注册步骤都使用一个<fieldset>元素来包裹。1.<formid="msform">2.  <!--progressbar-->3.  <ulid="progressbar">4.  <li>账号设置</li>5.  <li>社交账号</li>6.  <li>个人详细信息</li>7.  </ul>8.  <!--fieldsets-->9.  <fieldset>10.  <h2>创建你的账号</h2>11.  <h3>这是第一步</h3>12.  <inputtype="text"name="email"placeholder="Email地址"/>13.  <inputtype="password"name="pass"placeholder="密码"/>14.  <inputtype="password"name="cpass"placeholder="重复密码"/>15.  <inputtype="button"name="next"value="Next"/>16.  </fieldset>17.  <fieldset>18.  <h2>填写社交账号</h2>19.  <h3>填写你的常用社交网络账号</h3>20.  <inputtype="text"name="x-weibo"placeholder="新浪微博"/>21.  <inputtype="text"name="t-weibo"placeholder="**"/>22.  <inputtype="text"name="qq"placeholder="腾讯QQ"/>23.  <inputtype="button"name="previous"value="Previous"/>24.  <inputtype="button"name="next"value="Next"/>25.  </fieldset>26.  <fieldset>27.  <h2>个人详细信息</h2>28.  <h3>个人详细信息是保密的,不会被泄露</h3>29.  <inputtype="text"name="fname"placeholder="昵称"/>30.  <inputtype="text"name="lname"placeholder="姓名"/>31.  <inputtype="text"name="phone"placeholder="电话号码"/>32.  <textareaname="address"placeholder="家庭住址"></textarea>33.  <inputtype="button"name="previous"value="Previous"/>34.  <inputtype="submit"name="submit"value="Submit