技巧延伸
在這個單元中,我們會先討論tabindex和accesskey屬性,看看它們?nèi)绾问贡韱巫兊酶尤菀诪g覽.我們也會研究能幫助組織表單區(qū)域的<fieldset>標簽,最后,我們會看一些CSS,因為它能把表單外觀修飾得更漂亮. 神奇的tabindex
我們能輕易加上的功能之一是tabindex屬性.加上tabindex,為它指定一個數(shù)值之后,使用者就能以鍵盤切換正在使用的表單元素(通常是Tab鍵).按下Tab就會依照我們所制定的順序跳到下一個表單元素.根據(jù)預(yù)設(shè)值,每個能互動的元素都隱含有tabindex,但使用tabindex能收回瀏覽器指派的順序,讓你完全掌握控制權(quán).
舉例來說,讓我們?yōu)橄惹暗氖纠?方法C)里面的表單元素加上tabindex屬性:

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<label for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</form>

現(xiàn)在,當使用者在表單內(nèi)切換輸入框的時候,我們能確定切換的順序與我們期望的順序完全相同:Name,Email,Remenber this info與submit按鈕.
在設(shè)計復雜,單一行有許多輸入框或者其他表單元素的表單時,使用tabindex設(shè)定切換順序的優(yōu)點就顯而易見了.

為何指定切換順序?
除了在我們表單上實施非常簡單之外,還能再次幫助到行動受限的使用者,使其能完全以鍵盤瀏覽表單內(nèi)容.他們不需要抓起鼠標點擊每個部分,只需要用Tab鍵就能依照正確的順序遍歷每個表單元素.請為那些無法同時使用雙手瀏覽網(wǎng)頁的人想想,這真的很有幫助. 為頻繁使用的表單指定快捷鍵
與tabindex類似的.accesskey屬性是另一個容易加上的功能,不僅能幫助行動受限的使用者,對其他人來說也是方便極了.
舉例來說,如果為表單內(nèi)包圍著Name:的<label>標簽上加上accesskey屬性,那么在使用者按下指定的按鍵時,光標就會自動跳到與說明文字相關(guān)的輸入框.
我們來看看達成這個效果所需要的代碼:

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name" accesskey="9" >Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<label for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</form>

使用者必須在按下9這個按鍵的時候同時按下Alt或Ctrl鍵,根據(jù)系統(tǒng)而定,之后光標就會立刻移到Name:的輸入框里頭.

容易使用的搜索框
在設(shè)計會經(jīng)常使用的表單時(比如搜索框,用戶登錄等等),加上accesskey屬性格外有用,使用者不必伸手去拿鼠標,就能使用鍵盤立刻切換到適合的位置,開始進行輸入.
有件事必須留意,雖然不是所有瀏覽器都支持accesskey,但是加上這個屬性對支持的瀏覽器使用這很有幫助,舉例來說,要是我們加上accesskey="9"的搜索位置時,windows使用者可以按Alt 9,而Mac使用者則能以Command 9直接切換到搜索輸入框內(nèi)了. 為表單加上樣式
現(xiàn)在有了結(jié)構(gòu)完善的表單,接著讓我們研究一些能夠用來自定顯示效果的CSS技巧吧! 設(shè)定文字輸入框的寬度
處理表單元素需要技巧,因為它們的寬度,高度與瀏覽器種類有關(guān).在表單示例中,我們沒有指定文字輸入框的寬度,讓瀏覽器自動使用預(yù)設(shè)值,一般來說,設(shè)計者或許會以size屬性為<input>元素指定寬度,像這樣:

<input type="text" id="name" name="name" tabindex="1" size="20" />

把大小指定為20代表將文字輸入框的寬度設(shè)置為20字元(而不是像素).根據(jù)瀏覽器的預(yù)設(shè)表單字體,實際的輸入框像素寬度可能會有差異.這使得精確指定表單排版變得有點困難.
如果需要的話,我們能借著CSS以像素為單位控制輸入框(以及其他表單元素)的寬度.舉例來說,讓我們把示例表單中的所有<input>元素寬度設(shè)定成200像素,我們會利用為表單指定id屬性,在這個示例中是thisform.

#thisform input {
width: 200px;
}

這時,所有在#thisform內(nèi)的<input>元素都會變成200像素寬.圖5-9是可視化瀏覽器的顯示效果.

圖5-9 把所有<input>元件寬度設(shè)置成200像素之后的效果
哦喔~多選框和submit按鈕也是<input>元素,因此得到了相同的設(shè)定值,讓我們改以id指定Name和Email輸入框,而不是一次設(shè)定所有的<input>元素的寬度:

#name, #email {
width: 200px;
}

圖5-10是以瀏覽器檢查修正后成果的效果,這時只有兩個文字輸入框是200像素寬的了.

圖5-10.只有文字輸入框是200像素寬的效果

使用<label>自定字體
我們有幾種不同的方法能夠調(diào)整表單內(nèi)文字的大小,字體與色彩,我們再度奉行"利用你使用的標簽"哲學,直接以<label>元素為文字設(shè)定樣式.
我喜歡以<label>元素指定文字樣式,主要是因為,在不少情況下,我們都會希望為說明文字指定獨特的樣式,使它們?nèi)菀着c表單內(nèi)可能出現(xiàn)的其他文字區(qū)分開來,舉例來說,我們可以為表單內(nèi)的所有段落標簽制定獨特的樣式:

#thisform p {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66000;
}

這會使表單內(nèi)的所有段落文字使用粗糙,酒紅色的Verdana 12像素大小的字體.但是同樣的結(jié)果也能借著為表單內(nèi)的<label>元素指定相同樣式來達成,像這樣:

#thisform label {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66000;
}

這個樣式的顯示效果見圖5-11.

圖5-11.為label指定樣式的效果
為什么我比較喜歡這個方法?假設(shè)除了說明文字之外,表單還有其他放在<p>當中的指示或文字內(nèi)容.那么在前一種方法內(nèi),這些文字就會使用和<p>相同的樣式設(shè)定了.
也能先為表單中的所有文字制定一種樣式,接著再為<label>特別指定樣式,以便做出獨特的表單元素顯示效果.
使用的CSS大概類似這樣:

#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}

#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}

不需要多余的代碼
或許你或發(fā)現(xiàn),在#thisform label 的定義中沒有重復font-size:12px;由于<label>元素包含在#thisform之內(nèi),因此他們會繼承這個屬性.在較高層級設(shè)定共享規(guī)則,接著在元素樹底層覆蓋有需要的設(shè)定值是個好習慣.這能節(jié)省不少代碼.除了顯而易見好處之外,也能讓往后的維護工作輕松不少.如果你想改變整個表單的font-family,那么只需要修改一條規(guī)則,而不必修改所有重復設(shè)定字體的規(guī)則.
想象你設(shè)計了一個網(wǎng)站,全部使用了Georgia字體,最初你在20個不同的規(guī)則中分別加上相同的font-face:Georgia,serif;規(guī)則,過了一星期后,老板跑來找你并且對你說"CEO現(xiàn)在討厭serif字體了,把網(wǎng)站內(nèi)容改用Verdana".這時你的鉆進這20條規(guī)則里,慢慢修改了.
或者是,你也能在更高層級設(shè)定一次這條規(guī)則,比如說指定在<body>元素里,此時整份文檔都匯繼承Georgia字體,除非以其他規(guī)則指定另外的設(shè)定值.現(xiàn)在,當老板要求你進行修改時,你就能回答"沒問題,兩分鐘之后搞定";或者是能把簡易性留給自己,告訴他這需要耗上兩個小時,然后用這些額外的時間上eBay標東西.
OK,當然,你應(yīng)該告訴老板真相,他們應(yīng)該知道你的價值,為公司節(jié)省時間并且善用你找到的新解法. 以<fieldset>制作表單元素群組
使用<fieldset>是個為表單元素分組的便利方法.除此之外,加上敘述用的<legend>則會在大多數(shù)瀏覽器內(nèi),為你做好的表單元素群組加上一個漂亮的邊框.我剛剛有說"漂亮"嗎?嗯,我的確喜歡這種邊框.而我們只需要用上一點CSS,就能使它變得更加迷人.
首先,來看看建立群組是需要哪些標簽.接著為示例表單加上一個群組:

<form action="/path/to/script" id="thisform" method="post">
<fieldset>
<legend>Sign In</legend>
<p><label for="name" accesskey="9" >Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<label for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</fieldset>
</form>

圖5-12是瀏覽器顯示這個群組的效果圖,包含剛加上的<fieldset>與<legend>標簽,以及剛為<label>設(shè)定的CSS樣式.或許你已發(fā)現(xiàn)有條漂亮的邊線圍繞在<fieldset>里面的所有表單元素之外,同時<legend>的內(nèi)容斷開了左上方的邊線.

圖5-12.加上<fieldset>與<legend>之后的表單
我說這個效果"漂亮"的原因是:完全不加上CSS,使用它們的預(yù)設(shè)樣式,它的顯示效果的確讓人相當感動.同時還能加上一些自定屬性,使它變得更有趣,我們馬上動手.
你應(yīng)該也能看出<fieldset>在為表單隔出不同區(qū)塊的時候十分有用,舉例來說,如果我們的示例是個大表單的第一部分,那么以<fieldset>從視覺上隔開這些區(qū)塊的話,不僅語義更清楚,還能使表單結(jié)構(gòu)更明顯,更容易閱讀使用.

為<fieldset>和<legend>加上樣式
我們能使用CSS改寫<fieldset>預(yù)設(shè)邊框與<legend>文字的樣式,與定義其他元素的樣式一樣簡單,首先,我們來修改邊框的顏色和寬度,接著再修改文字本身.
為了使<fieldset>的邊線變得更加細致,我們使用以下的CSS:

#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}

#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}

#thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}

接著為左右兩邊指定20像素的外補丁,并且去掉上下外補丁,為什么要去掉這些外補丁?因為我們的表單說明文字,表單元素都放在<p>標簽內(nèi),因此他們在上下方向上已經(jīng)留足了邊界空白.
圖5-13是指定這些樣式之后的表單顯示效果.

圖5-13.為<fieldset>指定樣式之后的效果

立體的<legend>
最后,為<legend>標簽指定一些樣式,做出立體的邊線效果,讓它看起來像是與<fieldset>元素的邊線連在一起.

#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}

#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}

#thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}

#thisform legend {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 90%;
color: #666;
background: #eee;
border: 1px solid #ccc;
border-bottom-color: #999;
border-right-color: #999;
padding: 4px 8px;
}

如你所見,這里做了幾件事,首先,調(diào)整了<legend>的字體,粗細與大小,接著產(chǎn)生了立體效果,把背景設(shè)為淺灰色,然后在整個<legend>的外面加上配合<fieldset>邊線顏色的單像素邊線,為了達成陰影效果,我們還把底部與右側(cè)的邊線顏色換成深一點的灰色.
字體大小百分比: 由于我們之前為整個#thisform 的字體設(shè)置為font-size:12px;因此要縮小<legend>文字時,我們直接用百分比,在較高層級指定字體大小,接著在底層使用百分比,能夠減輕未來的維護負擔.要調(diào)大整個網(wǎng)站的字體大小么?只要修改一個地方,所有百分比都會隨之改變.事實上,最理想的狀況下,我們可以設(shè)定<body>的初始字型大小,然后在其他所有地方使用百分比.然而在這個示例中,我們選擇在<form>層級指定字體大小.
然后調(diào)整內(nèi)部定,以便文字與邊線之間留下一點空間.就是這樣了!圖5-14顯示的是最后結(jié)果,加上本章內(nèi)的所有CSS代碼,同時仍然使用最簡潔,靈活的表單結(jié)構(gòu).

圖5-14 完成的表單示例,以CSS設(shè)定樣式. 結(jié)論
標記表單有許多方法,不管你使用表格,定義清單,還是最基本的段落標簽進行說明,表單元素的排版,都要記住,本章討論的易用性功能,可以輕易加到任何方法里面.
像是tabindex與accesskey這種屬性可以提升瀏覽效率,而<label>元素與對應(yīng)的id屬性能確保互助設(shè)備可以正確辨識你的表單內(nèi)容.
基礎(chǔ)短小簡介的修改,就能得到更好的結(jié)果.

上一頁 1 2 3 4下一頁閱讀全文

最新評論