CSS3+HTML5实例:HTML5和CSS3制作登录表单

武林网(www.vevb.com)文章简介：HTML5提供了一些新的元素可以让我们不用JS轻松实现实用的web表单，CSS3提供了很多新的特性，这些特性允许实现新的设计效果（比如动画、渐变等）.

 HTML5提供了一些新的元素可以让我们不用JS轻松实现实用的web表单，CSS3提供了很多新的特性，这些特性允许实现新的设计效果（比如动画、渐变等）。

这里做了一个基于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属性在最新规范里的解释：

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);
}