DIV CSS 佈局教程網

 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屬性在最新規范裡的解釋：

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