不需要多余的代碼
或許你或發(fā)現(xiàn),在#thisform label 的定義中沒有重復(fù)font-size:12px;由于<label>元素包含在#thisform之內(nèi),因此他們會(huì)繼承這個(gè)屬性.在較高層級(jí)設(shè)定共享規(guī)則,接著在元素樹底層覆蓋有需要的設(shè)定值是個(gè)好習(xí)慣.這能節(jié)省不少代碼.除了顯而易見好處之外,也能讓往后的維護(hù)工作輕松不少.如果你想改變整個(gè)表單的font-family,那么只需要修改一條規(guī)則,而不必修改所有重復(fù)設(shè)定字體的規(guī)則.
想象你設(shè)計(jì)了一個(gè)網(wǎng)站,全部使用了Georgia字體,最初你在20個(gè)不同的規(guī)則中分別加上相同的font-face:Georgia,serif;規(guī)則,過了一星期后,老板跑來找你并且對(duì)你說"CEO現(xiàn)在討厭serif字體了,把網(wǎng)站內(nèi)容改用Verdana".這時(shí)你的鉆進(jìn)這20條規(guī)則里,慢慢修改了.
或者是,你也能在更高層級(jí)設(shè)定一次這條規(guī)則,比如說指定在<body>元素里,此時(shí)整份文檔都匯繼承Georgia字體,除非以其他規(guī)則指定另外的設(shè)定值.現(xiàn)在,當(dāng)老板要求你進(jìn)行修改時(shí),你就能回答"沒問題,兩分鐘之后搞定";或者是能把簡(jiǎn)易性留給自己,告訴他這需要耗上兩個(gè)小時(shí),然后用這些額外的時(shí)間上eBay標(biāo)東西.
OK,當(dāng)然,你應(yīng)該告訴老板真相,他們應(yīng)該知道你的價(jià)值,為公司節(jié)省時(shí)間并且善用你找到的新解法.
以<fieldset>制作表單元素群組
使用<fieldset>是個(gè)為表單元素分組的便利方法.除此之外,加上敘述用的<legend>則會(huì)在大多數(shù)瀏覽器內(nèi),為你做好的表單元素群組加上一個(gè)漂亮的邊框.我剛剛有說"漂亮"嗎?嗯,我的確喜歡這種邊框.而我們只需要用上一點(diǎn)CSS,就能使它變得更加迷人.
首先,來看看建立群組是需要哪些標(biāo)簽.接著為示例表單加上一個(gè)群組:
<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是瀏覽器顯示這個(gè)群組的效果圖,包含剛加上的<fieldset>與<legend>標(biāo)簽,以及剛為<label>設(shè)定的CSS樣式.或許你已發(fā)現(xiàn)有條漂亮的邊線圍繞在<fieldset>里面的所有表單元素之外,同時(shí)<legend>的內(nèi)容斷開了左上方的邊線.
圖5-12.加上<fieldset>與<legend>之后的表單
我說這個(gè)效果"漂亮"的原因是:完全不加上CSS,使用它們的預(yù)設(shè)樣式,它的顯示效果的確讓人相當(dāng)感動(dòng).同時(shí)還能加上一些自定屬性,使它變得更有趣,我們馬上動(dòng)手.
你應(yīng)該也能看出<fieldset>在為表單隔出不同區(qū)塊的時(shí)候十分有用,舉例來說,如果我們的示例是個(gè)大表單的第一部分,那么以<fieldset>從視覺上隔開這些區(qū)塊的話,不僅語義更清楚,還能使表單結(jié)構(gòu)更明顯,更容易閱讀使用.
為<fieldset>和<legend>加上樣式
我們能使用CSS改寫<fieldset>預(yù)設(shè)邊框與<legend>文字的樣式,與定義其他元素的樣式一樣簡(jiǎn)單,首先,我們來修改邊框的顏色和寬度,接著再修改文字本身.
為了使<fieldset>的邊線變得更加細(xì)致,我們使用以下的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像素的外補(bǔ)丁,并且去掉上下外補(bǔ)丁,為什么要去掉這些外補(bǔ)丁?因?yàn)槲覀兊谋韱握f明文字,表單元素都放在<p>標(biāo)簽內(nèi),因此他們?cè)谏舷路较蛏弦呀?jīng)留足了邊界空白.
圖5-13是指定這些樣式之后的表單顯示效果.
圖5-13.為<fieldset>指定樣式之后的效果
立體的<legend>
最后,為<legend>標(biāo)簽指定一些樣式,做出立體的邊線效果,讓它看起來像是與<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>的字體,粗細(xì)與大小,接著產(chǎn)生了立體效果,把背景設(shè)為淺灰色,然后在整個(gè)<legend>的外面加上配合<fieldset>邊線顏色的單像素邊線,為了達(dá)成陰影效果,我們還把底部與右側(cè)的邊線顏色換成深一點(diǎn)的灰色.
字體大小百分比: 由于我們之前為整個(gè)#thisform 的字體設(shè)置為font-size:12px;因此要縮小<legend>文字時(shí),我們直接用百分比,在較高層級(jí)指定字體大小,接著在底層使用百分比,能夠減輕未來的維護(hù)負(fù)擔(dān).要調(diào)大整個(gè)網(wǎng)站的字體大小么?只要修改一個(gè)地方,所有百分比都會(huì)隨之改變.事實(shí)上,最理想的狀況下,我們可以設(shè)定<body>的初始字型大小,然后在其他所有地方使用百分比.然而在這個(gè)示例中,我們選擇在<form>層級(jí)指定字體大小.
然后調(diào)整內(nèi)部定,以便文字與邊線之間留下一點(diǎn)空間.就是這樣了!圖5-14顯示的是最后結(jié)果,加上本章內(nèi)的所有CSS代碼,同時(shí)仍然使用最簡(jiǎn)潔,靈活的表單結(jié)構(gòu).
圖5-14 完成的表單示例,以CSS設(shè)定樣式.
結(jié)論
標(biāo)記表單有許多方法,不管你使用表格,定義清單,還是最基本的段落標(biāo)簽進(jìn)行說明,表單元素的排版,都要記住,本章討論的易用性功能,可以輕易加到任何方法里面.
像是tabindex與accesskey這種屬性可以提升瀏覽效率,而<label>元素與對(duì)應(yīng)的id屬性能確保互助設(shè)備可以正確辨識(shí)你的表單內(nèi)容.
基于短小簡(jiǎn)介的修改,就能得到更好的結(jié)果.
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2823299-1-1.html
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
聯(lián)系客服
