请选择 进入手机版 | 继续访问电脑版

HTML5星空

[HTML5教程] HTML5 Form表单,仿Twitter注册页面

[复制链接]
发表于 2013-10-31 19:13:42 | 显示全部楼层 |阅读模式
用HTML5 form表单功能,制作的仿Twitter注册页面,大家可以参考一下,共同学习。

HTML5 Form表单

HTML5 Form表单



html5 form表单关键代码:
  1. <form action="" method="post">
  2.        <div id='name' class='outerDiv'>
  3.           <label for="name">Full name:</label>
  4.            <input type=text  name="name" required  />
  5.           <div class='message' id='nameDiv'> Enter your first and last name. </div>
  6.         </div>
  7.           <div class='clearfix'></div>
  8.         <div id='username' class='outerDiv'>
  9.           <label for="number">Username:</label>
  10.            <input type=text name="username" required  />
  11.           <div class='message' id='usernameDiv'> Pick a unique name on Twitter. </div>
  12.          </div>
  13.             <div class='clearfix'></div>
  14.                <div id='password' class='outerDiv'>
  15.                <label for="password">Password:</label>
  16.                <input type="password" name="password" required />
  17.                <div class='message' id='websiteDiv'> 6 characters or more (be tricky!). </div>
  18.             </div>
  19.             <div class='clearfix'></div>
  20.            <div id='email' class='outerDiv'>
  21.                <label for="email">Email:</label>
  22.                <input type="emai" name="email" required />
  23.              <div class='message' id='emailDiv'> We'll send you a confirmation. </div>
  24.              </div>
  25.               <div class='clearfix'></div>
  26.                  <div id='submit' class='outerDiv'>
  27.                     <input type="submit" value="Create my account" />
  28.                </div>
  29.                <div class='clearfix'></div>
  30.             </form>
复制代码
在线演示:http://www.html5star.com/demo/form/html5twitter/



回复

使用道具 举报

发表于 2013-11-1 16:35:26 | 显示全部楼层

回帖奖励 +1

强大的HTML5表单,支持楼主
回复 支持 反对

使用道具 举报

发表于 2014-10-21 13:47:31 | 显示全部楼层
怎么上传代码并预览呢?
回复 支持 反对

使用道具 举报

发表于 2014-10-21 19:25:39 | 显示全部楼层
本帖最后由 test 于 2014-10-21 19:27 编辑

可以添加代码,或上传文件。点击红框标注的图标即可。
QQ截图20141021192633.png


回复 支持 反对

使用道具 举报

发表于 2014-10-21 19:53:24 | 显示全部楼层
这东西我收了!谢谢楼主!HTML5星空网真好!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号-1

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2021-11-29 13:23 , Processed in 0.085537 second(s), 39 queries .

快速回复 返回顶部 返回列表