武林網(www.49028c.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);
}