點(diǎn)擊這里返回腳本之家　HTML教程　欄目．
上文：標(biāo)記語言——引用
原文出處 chapter 5 表單
互動(dòng)性一直是互聯(lián)網(wǎng)的重點(diǎn),讓使用者與網(wǎng)站能夠交換信息,彼此溝通.表單使我們能夠有組織的,使用同一方式的從使用者那里收集資料,因此在設(shè)計(jì)網(wǎng)站時(shí)總是屬于"任何狀況都能拿來用"的那一類,舉例來說,我們發(fā)現(xiàn)大概有10000種標(biāo)記表單的不同方式.好吧,或許沒有那么多,但是我們?nèi)阅芩伎紟追N狀況,讓使用者易于使用表單結(jié)構(gòu),同時(shí)也便于讓網(wǎng)站所有者進(jìn)行管理. 標(biāo)記表單的方法 方法A:使用表格

<form action="/path/to/script" method="post">
<table>
<tr>
<th>Name:</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>Email:</th>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<th>&nbsp;</th>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</form>

長久以來許多人都以表格來標(biāo)記表單,由于使用頻率很高的緣故,我們已經(jīng)習(xí)慣于見到表單以這種方式進(jìn)行排版:左列是向右對(duì)齊的文字說明,右列則是相左對(duì)齊的表單元素.使用單純的兩列表格,是完成易用表單排版的簡單方法之一.
有些人認(rèn)為不需要表格,也有其他人認(rèn)為應(yīng)該把表單視為表狀資料.我們不打算支持任何一種說法,但是在某些情況下,使用表格時(shí)達(dá)成特定表單排版的最佳方法,特別是包含許多種不同元素的復(fù)雜表單(使用了單選框,下拉選框等等的表單).完全依賴CSS處理這種表單的排版可能會(huì)讓人感到挫折,而且經(jīng)常需要加上額外的<span>與<div>,會(huì)比表格耗上更多的標(biāo)簽.
接著看圖5-1,這是一般可視化瀏覽器顯示方法A的效果:

圖5-1:瀏覽器顯示的方法A的效果
你會(huì)發(fā)現(xiàn),使用表格可以把文字說明表單元素排列的十分整齊.然而,對(duì)這樣簡單的表單來說,或許我會(huì)避免選擇使用表格,并且換用其他不需要使用這么多標(biāo)簽的方法.除非表單的視覺設(shè)計(jì)十分需要這種排版,否者未必需要使用表格.同時(shí)我們也要考慮幾個(gè)易用性問題,在研究下面兩個(gè)方法的時(shí)候,我們就會(huì)接觸到這個(gè)部分.

方法B:不用表格,單擠在一起

<form action="/path/to/script" method="post">
<p>
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" value="submit" />
</p>
</form>

使用單一段落和幾個(gè)<br />標(biāo)簽隔開所有元素是個(gè)可行方法,但視覺上可能會(huì)被描繪的有點(diǎn)擠.圖5-2十一版瀏覽器的顯示效果:

圖5-2:瀏覽器顯示方法B的效果
雖然我們不用表格就能完成排版,但是它看起來有點(diǎn)擠,有點(diǎn)丑.同時(shí)我們也遇上表單元素?zé)o法完美對(duì)齊的問題.
我們能夠以CSS為<input>元素加上一個(gè)外補(bǔ)丁,以便減輕擁擠的感覺.像是這樣:

input{
margin:6px 0;
}

前面這段為每個(gè)<input>元素的上下分別加上6像素的外補(bǔ)丁(包含了Name,Email的輸入框,以及submit按鈕),在元素之間加上額外的空間.就像圖5-3一樣:

圖5-3.方法B在為input元素加上外補(bǔ)丁之后的效果
方法B本身沒什么大問題,但是還能進(jìn)行一些微調(diào),以便把表單做得更好.方法C里頭也運(yùn)用了這些微調(diào)技巧,所以一起來看看吧.

方法C:樸素,更容易使用

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</form>

我喜歡方法C的幾個(gè)地方.首先,對(duì)于類似本示例的單純表單來說,我發(fā)現(xiàn)把每個(gè)說明與表單元素放在單獨(dú)的段落比較方便,不加上樣式顯示時(shí),段落之間的預(yù)設(shè)距離應(yīng)該足以讓你輕松閱讀內(nèi)容.稍后我們還能以CSS為表單內(nèi)包含的<p>標(biāo)簽設(shè)定間隔.
我們甚至更進(jìn)一步,為表單設(shè)定了唯一的id="thisform".因此,剛才我提到的精確間隔大致上可以寫成這樣:

#thisform p{
margin:6px 0;
}

這代表將這個(gè)表單內(nèi)的<p>標(biāo)簽的上下外補(bǔ)丁設(shè)定為6個(gè)像素,覆蓋瀏覽器為一般段落選用的預(yù)設(shè)值.
方法C與前兩種方法的另一個(gè)不同之處在于:盡管每個(gè)群組(說明和輸入框)都放在<p>里頭,我們?nèi)砸?lt;br />把他們放在獨(dú)立的一行.使用<br />分開每個(gè)元素,就能繞過文字長短不一,造成輸入項(xiàng)無法完美對(duì)齊的問題.
圖5-4是一般瀏覽器顯示方法C的效果,這邊有使用先前為<p>標(biāo)簽設(shè)定的樣式.

圖5-4.瀏覽器顯示方法C的效果,有對(duì)P標(biāo)簽使用CSS
除了方法C的視覺效果之外,最重要的優(yōu)點(diǎn):也就是提升易用性的部分.

<label>標(biāo)簽
使用<label>標(biāo)簽提升表單的易用性需要兩個(gè)步驟,而方法C已經(jīng)完成這兩個(gè)步驟了.首先是以<label>將文字說明與相關(guān)的表單元素連接在一起,不管是文字輸入框(text field),文字區(qū)塊輸入框(text area),單選框(radio),多選框(checkbox)等等都好.方法C在"Name:"與"Email:"標(biāo)題上使用了<label>標(biāo)簽,把它們與輸入資料的元素連接在一起.
第二步則是為<label>標(biāo)簽加上for屬性,填上對(duì)應(yīng)輸入框的id.
舉例來說.在方法C里面,以<label>標(biāo)簽把"Name:"包了起來,并且在for屬性里填入與其后面的輸入框id相同的值.

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label> <br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</form>

為什么要用<lable>?
或許聽過其他人說你應(yīng)該在表單內(nèi)加上<label>標(biāo)簽.而最重要的問題在于為什么應(yīng)該要用<label>標(biāo)簽.
建立label / ID的關(guān)聯(lián)能讓屏幕閱讀器為每個(gè)表單元素讀出正確的標(biāo)簽,而不收版面排列方法的影響,這是件好事.同時(shí),<label>標(biāo)簽正是為了標(biāo)記表單欄標(biāo)簽而生,使用這個(gè)標(biāo)簽的時(shí)候,我們就是在為每個(gè)元素說明意義,強(qiáng)化表單的結(jié)構(gòu).
在處理單選,多選框時(shí)使用<label>標(biāo)簽還有個(gè)額外的好處,那就是大多數(shù)瀏覽器在使用者點(diǎn)擊<label>內(nèi)文字時(shí)也會(huì)改變元素的值.這樣能為輸入元素造成更大的點(diǎn)擊區(qū)域,讓行動(dòng)不便的使用者更容易填寫表單(Mark Pilgrim, "Dive Into Accessibility," http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
舉例來說,如果為表單加上一個(gè)多選框,讓使用者能夠選擇"記下這些信息",那么我們就能像這樣的使用<label>標(biāo)簽了:

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

借著以這種方式標(biāo)記多選框,可以獲得兩個(gè)好處:屏幕閱讀器能讀出正確的說明文字(就像這個(gè)例子一樣,文字出現(xiàn)在輸入框之后也行),而且能切換多選框的范圍變大了,現(xiàn)在切換范圍除了多選框本身之外,文字部分也包含在內(nèi)(大多數(shù)瀏覽器都支持).
圖5-5就是這個(gè)表單在瀏覽器中的顯示效果.我們特別標(biāo)示了加大之后的多選框切換范圍:

圖5-5.把文字包含在切換范圍內(nèi)的多選框
除了表單與段落之外,最后我還想展示另一個(gè)標(biāo)記表單的方式,使用定義清單.
#p# 方法D:定義一個(gè)表單

<form action="/path/to/script" id="thisform" method="post">
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input type="text" id"name" name="name" /></dd>
<dt><label for="email">Email:</label></dt>
<dd><input type="text" id="email" name="email" /></dd>
<dt><label for="remember">Remember this info?</label></dt>
<dd><input type="checkbox" id="remember" name="remember" /></dd>
<dt><input type="submit" value="submit" /></dt>
</dl>
</form>

最后討論的表單排版方法,是以定義清單定義每一組說明文字與輸入框.這是有點(diǎn)爭議的方法.我們在定義清單的原始設(shè)計(jì)目的的邊緣游走,不過這是在近期逐漸普及的方法,同時(shí)也只得本書一提.
本書稍后在第8章回深入討論定義清單.事實(shí)上,它們能應(yīng)用的范圍遠(yuǎn)超過大多是設(shè)計(jì)師的認(rèn)知:以<dl>排版表單就是個(gè)很棒的例子.
你應(yīng)該發(fā)現(xiàn)了這個(gè)范圍里面的每組表單說明文字都放在定義名詞標(biāo)簽<dt>之內(nèi),隨后跟著放在定義描述標(biāo)簽<dd>中的表單元素.這么做能將說明文字與表單元素對(duì)配起來,并且在不使用任何樣式時(shí)以瀏覽器顯示的效果見圖5-6:

圖5-6.以清單定義排版表單的顯示效果
根據(jù)預(yù)設(shè)值,大多數(shù)可視化瀏覽器會(huì)把<dd>縮進(jìn)顯示在單獨(dú)一行之內(nèi).太棒了,因?yàn)檫@樣便不必使用任何多余的<p>或<br />標(biāo)簽了就能讓不支持CSS的瀏覽器顯示出容易使用的表單排版效果.

定義樣式
最簡單的樣式修改,大概是去掉表單內(nèi)<dd>元素的預(yù)設(shè)縮進(jìn):

form dd{
margin:0;
}

前面這一小段css會(huì)使方法D范例顯示成圖5-7:

圖5-7. 去掉<dd>縮進(jìn)效果的定義清單式表單排版
方法A的表格效果,也能借著浮動(dòng)表單內(nèi)的<dt>元素達(dá)成:

form dd {
margin: 0;
}

form dt {
float: left;
padding-right: 10px;
}

在把<dt>元素浮動(dòng)到左邊之后,包含在<dd>之內(nèi)的表單元素就會(huì)排列到右側(cè),像是圖5-8這樣.你應(yīng)該已經(jīng)發(fā)現(xiàn)表單元素不會(huì)完美的對(duì)齊,但這至少說明了使用<dl>標(biāo)簽排版表單時(shí),并不代表必須將每個(gè)元素都單獨(dú)顯示在一行里.

圖5-8.浮動(dòng)<dt>元件之后的表單排版
事實(shí)上,由于多了<dl><dt>和<dd>元素,再加上表單內(nèi)原本就具備的<label>與<input>元素,因此在設(shè)計(jì)CSS時(shí),你擁有更多可以指定樣式的對(duì)象,而發(fā)揮的空間也變大了.
#p# 概要
看完四種標(biāo)記同一個(gè)簡單表單的不同方法,同時(shí)也討論了彼此的優(yōu)缺點(diǎn),要注意的是,我們?yōu)榉椒–與方法D加上了易用性功能,當(dāng)然也可以加到頭兩個(gè)方法上,在得到這些改進(jìn)之后,這兩個(gè)方法當(dāng)然也會(huì)變得更棒.
這幾個(gè)方法沒有哪一個(gè)明顯比其他方法要好,或者能當(dāng)作"最佳解決方案".不過多知道幾種方法很有價(jià)值.而你也以組合這四種方法,在你的項(xiàng)目里做出更棒的表單.
方法A: 以視覺效果來說,是個(gè)建立表單元素,說明文字的簡介方式,在處理復(fù)雜,龐大的表單時(shí)尤其好用. 然而,為了這樣單純的表單使用表格,似乎太麻煩了.
方法B: 簡單的標(biāo)記法在文字瀏覽器,小屏幕設(shè)備上的顯示效果不錯(cuò). 以視覺效果來說,只用<br />會(huì)讓排版變得太擁擠.
方法C: 簡單的標(biāo)記法在文字瀏覽器,小屏幕設(shè)備上顯示效果不錯(cuò). 允許說明文字,表單元素的長度變化,不會(huì)有對(duì)齊的問題. 包含重要的易用性功能(也能使用在先前的方法內(nèi)).
方法D: 結(jié)構(gòu)化標(biāo)記法在文字瀏覽器,小屏幕設(shè)備上顯示效果不錯(cuò). 包含重要的易用性功能(也能應(yīng)用在先前的方法內(nèi)). 說明文字與表單元素能以CSS指定要放在同一行之內(nèi),或是分行擺放.
當(dāng)你使用方法A或方法B的時(shí)候不必感到內(nèi)疚,但是學(xué)會(huì)方法C的優(yōu)點(diǎn),并且把它應(yīng)用到先前的例子里仍然不錯(cuò).
方法C也有進(jìn)步的空間,而我們也將在"技巧延伸"這個(gè)單元內(nèi)看到幾個(gè)我們能加上的額外功能.我們也會(huì)討論一些簡單的CSS樣式.讓我們把表單修飾得更吸引人.
#p# 技巧延伸
在這個(gè)單元中,我們會(huì)先討論tabindex和accesskey屬性,看看它們?nèi)绾问贡韱巫兊酶尤菀诪g覽.我們也會(huì)研究能幫助組織表單區(qū)域的<fieldset>標(biāo)簽,最后,我們會(huì)看一些CSS,因?yàn)樗馨驯韱瓮庥^修飾得更漂亮. 神奇的tabindex
我們能輕易加上的功能之一是tabindex屬性.加上tabindex,為它指定一個(gè)數(shù)值之后,使用者就能以鍵盤切換正在使用的表單元素(通常是Tab鍵).按下Tab就會(huì)依照我們所制定的順序跳到下一個(gè)表單元素.根據(jù)預(yù)設(shè)值,每個(gè)能互動(dòng)的元素都隱含有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)在,當(dāng)使用者在表單內(nèi)切換輸入框的時(shí)候,我們能確定切換的順序與我們期望的順序完全相同:Name,Email,Remenber this info與submit按鈕.
在設(shè)計(jì)復(fù)雜,單一行有許多輸入框或者其他表單元素的表單時(shí),使用tabindex設(shè)定切換順序的優(yōu)點(diǎn)就顯而易見了.

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

<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這個(gè)按鍵的時(shí)候同時(shí)按下Alt或Ctrl鍵,根據(jù)系統(tǒng)而定,之后光標(biāo)就會(huì)立刻移到Name:的輸入框里頭.

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

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

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

#thisform input {
width: 200px;
}

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

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

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

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

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

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

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

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

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

這個(gè)樣式的顯示效果見圖5-11.

圖5-11.為label指定樣式的效果
為什么我比較喜歡這個(gè)方法?假設(shè)除了說明文字之外,表單還有其他放在<p>當(dāng)中的指示或文字內(nèi)容.那么在前一種方法內(nèi),這些文字就會(huì)使用和<p>相同的樣式設(shè)定了.
也能先為表單中的所有文字制定一種樣式,接著再為<label>特別指定樣式,以便做出獨(dú)特的表單元素顯示效果.
使用的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 的定義中沒有重復(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í),你就能回答"沒問題,兩分鐘之后搞定";或者是能把簡易性留給自己,告訴他這需要耗上兩個(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>文字的樣式,與定義其他元素的樣式一樣簡單,首先,我們來修改邊框的顏色和寬度,接著再修改文字本身.
為了使<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),因此他們在上下方向上已經(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é)構(gòu).

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

最新評(píng)論