《CSS3實戰》筆記--選擇器（二）

通過閱讀和學習書籍《CSS3實戰》總結
《CSS3實戰》/成林著.—北京機械工業出版社2011.

UI元素狀態僞類選擇器

  UI元素的狀態一般包括：可用、不可用、選中、未選中、獲取焦點、失去焦點、鎖定、待機等。

表單設計原則：

  UI設計的一個核心就是讓表單更可用、易用和好用。表單設計應該符合三層模型，即表單應該具有三種屬性：感知（頁面顯示的佈局）、對話（內容呈現的問題和回答）、關係（交互的任務結構）。

        

實戰體驗一：設計可用的表單

  設計並實現簡潔、美觀、可用性好、符合Web標準的表單，是Web設計師追求的目標。

      

特點：簡潔的線框、可愛的小圖標、使得登錄表單精巧宜人

• HTML：首先要設計合理的表單結構，離不開表單輔助元素的配合，其中label元素應該通過for屬性綁定到表單域上，for的屬性值應設置爲表單域的name屬性值。

<fieldset id="login">
    <legend>用戶登錄</legend>
    <form action="" method="POST" class="form">
        <label for="name">姓名
            <input name="name" type="text"  id="name" value="" />
        </label>
        <label for="password">密碼
            <input name="password" type="text" id="password" value="" />
        </label>
        <input type="image"  class="button" src="images/login1.gif" />
    </form>
</fieldset>

• CSS：設計文本框內左側的圖標需要一點技巧：通過左側補白擠出一點位置用來顯示背景，背景當然是精確定位和靜止平鋪的，同時還應該考慮文本框的高度和輸入文本居中等問題。

<style type="text/css">
    h1{ font-size:20px; }
    #login {
        width:400px;
        padding:1em 2em 0 2em;
        font-size:12px;
        }
label { /*表單項中標籤樣式*/
        line-height:26px;
        display:block; /*label是一個行內元素，增加該聲明，確保每個表單項獨立一行*/
        font-weight:bold;
        }
#name, #password { /*文本框公共樣式*/
        border:1px solid #ccc;
        width:160px;
        height:22px; /*固定高度*/
        padding-left:20px; /*擠出位置*/
        margin:6px 0;
        line-height:20px; /*讓輸出文本居中*/
        }
#name { background:url(images/name.gif) no-repeat 2px 2px; }
#password { background:url(images/password.gif) no-repeat 2px 2px; }
.button { margin:6px 0; }
</style>

• 不可用狀態（disabled=“disabled”）

當用戶登錄成功後，不妨通過腳本把文本框設置爲不可用狀態（disabled=“disabled”）狀態，通過E：disabled選擇器 讓文本框顯示爲灰色，以告訴用戶該文本框不可用了。

     

HTML：在文本框中補加disabled屬性

<fieldset id="login">
    <legend>用戶登錄</legend>
    <form action="" method="POST" class="form">
        <label for="name">姓名
            <input name="name" type="text"  id="name" value="" disabled="disabled" />
        </label>
        <label for="password">密碼
            <input name="password" type="text" id="password" value="" disabled="disabled" />
        </label>
        <input type="image"  class="button" src="images/login1.gif" />
    </form>
</fieldset>

CSS：在基礎樣式上添加如下樣式

#login input:disabled#name { /*姓名文本框處於不可用狀態時的樣式*/
    background:#ddd url(images/name1.gif) no-repeat 2px 2px;
    border:1px solid #fff;
}
#login input:disabled#password {  /*密碼域處於不可用狀態時的樣式*/
    background:#ddd url(images/password1.gif) no-repeat 2px 2px;
    border:1px solid #fff;
}

進一步美化：設計精美的表單能夠留住用戶的目光，甚至吸引用戶登錄。

     

• 設計思路：整體結構分爲四塊，分別構建表單的不同區域

• CSS樣式

<style type="text/css">
body {
    font-family: Helvetica, arial, sans-serif;
    margin: 0px 0px 0px 15px;
    font-size: 14px;
    background-color: #ffffff
}
/*設計文本框外框樣式*/
div.wrapper { 
    background-image:url(images/bg.gif);
    background-repeat:no-repeat;
    width:348px;
    height:384px; 
    margin-left:14px;
    padding-top:75px;
}
/*設計標題樣式*/
div.ribbon { 
    background-image:url(images/ribbon.png); 
    background-repeat:no-repeat;
    width:358px;
    height:45px;
    float:left;
    margin-top:25px;
    margin-left:10px;
    padding-left:25px;
    padding-top:5px;
    color:#ffffff;
    font-weight:bold;
}
/*設計Logo效果*/
div.logo { 
    background:url(images/logo.png) no-repeat;
    width:330px;
    height:115px;
}
div.loginwrapper { margin-left:40px; }
/*設計動態文本框效果*/
span.usertext {
    color:#478fab;
    font-weight:bold;
}
input.textbox {
    background:url(images/text_field.png) 0px -25px;
    width:264px;
    height:20px;
    border:0px;
    padding-top:5px;
    padding-left:4px;
}
input.textbox:hover {
    background:url(images/text_field.png) 0px 0px;
    border:0px;
}
div.bottomwrapper {
    margin-left:40px;
    margin-top:50px;
}
a:link, a:visited {
    color:#ffffff;
    text-decoration:none;
}
a:hover { color:#95ddf9; }
/*設計動態按鈕效果*/
input.button {
    background:url(images/login_btn.png) 0px 0px;
    width:92px;
    height:31px;
    border:0px;
    float:right;
    margin-right:20px;
    margin-top:5px;
}
input.button:hover { background:url(images/login_btn.png) 0px -31px; }
input.button:active { background:url(images/login_btn.png) 0px -62px; }
</style>

實戰體驗二：設計友好，易用的表單

不帶樣式表單

  HTML：

<form id="form1" name="form1" method="post" action="">
    <fieldset>
        <legend>學生信息登記表</legend>
        <p class="top">
            <label for="textfield" class="title">姓名：</label>
            <input type="text" name="textfield" id="textfield" />
        </p>
        <p>
            <label for="textarea" class="title">備註：</label>
            <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
        </p>
        <p><span class="title">興趣：</span>
            <label for="checkbox">文學</label>
            <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" />
            <label for="checkbox2">藝術</label>
            <input type="checkbox" name="checkbox2" class="checkbox" id="checkbox2" />
            <label for="checkbox3">體育</label>
            <input type="checkbox" name="checkbox3" class="checkbox" id="checkbox3" />
            <label for="checkbox4">其他</label>
            <input type="checkbox" name="checkbox4" class="checkbox" id="checkbox4" />
        </p>
        <p><span class="title">性別：</span> 女
            <input type="radio" name="radio" id="radio" value="radio" />
            男
            <input type="radio" name="radio" id="radio" value="radio2" />
        </p>
        <p>
            <label for="select" class="title">專業：</label>
            <select name="select" id="select">
                <option value="1">法律</option>
                <option value="2">英語</option>
                <option value="3">計算機</option>
                <option value="4">財會</option>
            </select>
        </p>
        <p class="center">
            <input type="submit" name="button" id="button" value="提交" />
            <input type="reset" name="button2" id="button2" value="重置" />
        </p>
    </fieldset>
</form>

樣式一

CSS樣式：

<style type="text/css">
h1 { font-size:20px; }
fieldset {
    width:615px;
    height:346px;
    background:url(images/bg7.png) no-repeat center;
    padding:12px;
    border:none;
}  /*表單框樣式*/
/*清除默認的圖注，以背景效果顯示會更好看*/
fieldset legend { display:none; }
/*以下是各類表單域樣式*/
#textfield {
    width:16em;
    border:solid 1px #aaa;
    position:relative;
    top:-3px;
}
#textarea {
    width:25em;
    height:3em;
    border:solid 1px #aaa;
}
.checkbox {
    border:solid 1px #d8bca9;
    position:relative;
    top:3px;
    left:-2px;
}
select { border:solid 1px #d8bca9; }
#radio {
    border:solid 1px #d8bca9;
    position:relative;
    top:3px;
    left:-1px;
}
/*以下是幾個輔助設計的樣式表*/
.title {
    width:160px;
    float:left;
    font-weight:bold;
    margin-left:20px;
}
.top { margin-top:80px; }
.center { text-align:center; }
</style>

樣式改進一：在title類樣式表中添加一個右對齊聲明，則標籤提示文本向右顯示，用戶的眼睛就不用再左右兩側跳轉了。

.title {
    width:100px;
    float:left;
    text-align:right;
    font-weight:bold;
    margin:0 40px;
}

樣式改進二：對於簡單的表單，如果避免使用兩列布局，也許會更好使用

  對於用戶來說，單行佈局會更友好，更好用。因爲它會降低用戶視線左右移動的頻率。

form {
    width:615px;
    height:450px;
    background:url(images/bg8.png) no-repeat center;
    padding:12px 0 12px 40px;
}
fieldset { border:none; }
fieldset legend { display:none; }
/*重設該樣式表，讓標籤文本塊狀顯示*/
.title {
    display:block;
    font-weight:bold;
}

樣式改進三：添加必填提示信息

CSS：

.red { 
    color:red;
    margin-left:-10px;
    padding-right:2px;
}

HTML：

<p class="top">
            <label for="textfield" class="title"><span class="red">*</span>姓名</label>
            <input type="text" name="textfield" id="textfield" />
        </p>

樣式改進四：友善的驗證反饋信息

HTML:

<p class="top">
            <label for="textfield" class="title"><span class="red">*</span>姓名</label>
            <input type="text" name="textfield" id="textfield" /><span class="error">請填寫真實姓名，不要輸入別名或者暱稱</span>
        </p>

CSS：

.error { 
    color:white;
    background:red;
    padding:2px;
    margin:0 4px;
}

樣式改進五：優化表單項的排列順序

樣式改進六：適當分組用戶體驗會更好

樣式改進七：表單設計要大氣，這樣用戶輸入更啊方便，也方便用戶檢查輸入的內容

小結：

  必填和選填信息應該標示清楚，避免用戶摸着石頭過河；讓驗證反饋信息在同一行中顯示，這樣用戶完成表單的速度會更快，成功率會更高；表單選項的排列也很講究，設計師應該遵循用戶的使用習慣。表單項的先後順序都有約定俗成的習慣。不遵循這個習慣，用戶在填寫信息時就會感覺不自然；當表單項目更多時，應該考慮對其進行歸類分組。

   表單設計應該大氣，不應捉襟見肘。好用的表單很注意留白藝術，讓文本框四周適應地留白，可以讓用戶操作時很放鬆，或者也可以通過調整CSS中的padding屬性來實現文本的留白。同時，文本框的寬度以及文本區域的高度，都應設計的寬鬆，大方，讓用戶看到自己輸入的文字，尤其是那些用戶可能輸入較長的文本框，都應該竟可能的留夠足夠的區域把它們都顯示出來，這樣便於用戶檢查輸入錯誤。

   另外，當我們在構建表單結構時，還應該注意表單屬性。

• 使用value屬性爲輸入型表單域設定默認值。

• 使用title屬性幫助屏幕閱讀器用戶獲得足夠的提示信息。

• 當標籤（label元素）沒有包含所關聯的表單域時，可使用for屬性來匹配和關聯表單域（綁定id值），這樣當用戶單擊標籤時，當前表單域會自動獲得焦點。

• 爲每個表單域設置tabindex屬性，方便用戶使用Tab鍵切換表單項。

• 對於複選框和單選按鈕來說，將標籤（label）置於表單域前面，可便於用戶先閱讀標籤說明，然後在執行操作。

• 使用optgroup元素來組織select列表框中的衆多選項，讓下拉列表項目一目瞭然。

• 爲表單域定義accesskey屬性，方便用戶使用快捷鍵快速訪問。

• 使用checked屬性，把常用的複選框和單選按鈕定義爲默認值，避免用戶重複操作。

• 使用selected屬性，在列表框中把常用選項定義爲默認值，同樣可以避免用戶重複操作。

最終網頁代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>設計友好、易用的表單</title>
<style type="text/css">
h1 { font-size:20px; }
form {
    width:615px;
    height:501px;
    background:url(images/bg10.png) no-repeat center;
    padding:12px 0 12px 40px;
}
fieldset { border:none; }
fieldset legend { display:none; }
#textfield {
    width:16em;
    border:solid 1px #aaa;
    position:relative;
    top:-3px;
}
#textarea {
    width:30em;
    height:6.4em;
    border:solid 1px #aaa;
}
.checkbox {
    border:solid 1px #d8bca9;
    position:relative;
    top:3px;
    left:-2px;
}
select { border:solid 1px #d8bca9; }
#radio {
    border:solid 1px #d8bca9;
    position:relative;
    top:3px;
    left:-1px;
}
.title {
    display:block;
    font-weight:bold;
}
.top { margin-top:70px; }
.top1 { margin-top:8px; }
.center { text-align:center; }
.red { 
    color:red;
    margin-left:-10px;
    padding-right:2px;
    display:none;
}
.error { 
    color:white;
    background:red;
    padding:2px;
    margin:0 4px;
}
.hide {
    display:none;
}
.tip {
    color:white;
    background:blue;
    padding:2px;
    margin:0 4px;   
}
h3 {
    color:#990;
    margin:3px 0;
}
p {
    margin:0;
    padding:4px 0;   
}
input {
    padding:4px;   
}
</style>
</head>
<body>
<h1>設計友好、易用的表單</h1>
<form id="form1" name="form1" method="post" action="">
    <fieldset>
        <legend>學生信息登記表</legend>
        <h3 class="top">必填信息</h3>
        <p>
            <label for="textfield" class="title"><span class="red">*</span>姓名</label>
            <input type="text" name="textfield" id="textfield" /><span class="tip hide">請填寫真實的漢字姓名</span>
        </p>
        <p><span class="title"><span class="red">*</span>性別</span>男
            <input type="radio" name="radio" id="radio" value="radio" checked="checked" />
            女
            <input type="radio" name="radio" id="radio" value="radio2" />
        </p>
        <p>
            <label for="select" class="title"><span class="red">*</span>專業</label>
            <select name="select" id="select">
                <option value="1">法律</option>
                <option value="2">英語</option>
                <option value="3">計算機</option>
                <option value="4">財會</option>
                <option value="5" selected="selected" >其他</option>
            </select>
        </p>
        <h3 class="top1">選填信息</h3>
        <p><span class="title">興趣</span>
            <label for="checkbox">文學</label>
            <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" />
            <label for="checkbox2">藝術</label>
            <input type="checkbox" name="checkbox2" class="checkbox" id="checkbox2" />
            <label for="checkbox3">體育</label>
            <input type="checkbox" name="checkbox3" class="checkbox" id="checkbox3" />
            <label for="checkbox4">其他</label>
            <input type="checkbox" name="checkbox4" class="checkbox" id="checkbox4" />
        </p>        
        <p>
            <label for="textarea" class="title">備註</label>
            <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
        </p>
        <p class="center">
            <input type="submit" name="button" id="button" value="提交" />
            <input type="reset" name="button2" id="button2" value="重置" />
        </p>
    </fieldset>
</form>
</body>
</html>