贝斯特bst2222

当前位置:贝斯特bst2222 >> 网页教程

DIV+CSS教程- HTML5和CSS3制作登录表单

发布时间:2012/9/10 20:31
 

这里做了一个基于HTML5和CSS3的登录表单。实例代码使用到HTML5提供的一些表单新特性,所以你需要使用支撑HTML5和CSS3的浏览器来查看。

HTML5代码:

<form id="login">
           <h1>用户登录</h1>
           <fieldset id="inputs">
                       <input id="username" type="text" placeholder="用户名" autofocus required>  
                       <input id="password" type="password" placeholder="密码" required>
           </fieldset>
           <fieldset id="actions">
                        <input type="submit" id="submit" value="登录">
                        <a href="">忘记密码?</a><a href="">注册</a>
           </fieldset>
</form>

下面是这里用到的几个HTML5属性在最新规范里的说明:
 

  • placeholder – 提供一种提示(hint),描述输入域所期待的值。(注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。)提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
  • required – 规定必须在提交之前填写输入域(不能为空)。(注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。)
  • autofocus – 当页面加载时,域自动地获得焦点
  • type=”password” – 定义密码字段。密码字段中的字符会被掩码(显示为星号或原点)。
     


CSS3代码:
这个demo里用到了CSS3的阴影渐变等效果。比如,下面的代码用来实现登录表单整个区块的box-shadow效果:
 

#login{
         box-shadow:
                      0 0 2px rgba(0, 0, 0, 0.2),
                      0 1px 1px rgba(0, 0, 0, .2),
                      0 3px 0 #fff,0 4px 0 rgba(0, 0, 0, .2),
                      0 6px 0 #fff,
                      0 7px 0 rgba(0, 0, 0, .2);
 

贝斯特bst2222 

 

文章由重庆满荣贝斯特bst2222/html/newslist-2600/编辑整理,转载请注明出处
相关资讯
qq tel code back_top
tencent

在线客服
点击交谈

手机:

18908313333

扫码马上微信咨询

XML 地图 | Sitemap 地图