|
方法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>
最后討論的表單排版方法,是以定義清單定義每一組說(shuō)明文字與輸入框.這是有點(diǎn)爭(zhēng)議的方法.我們?cè)诙x清單的原始設(shè)計(jì)目的的邊緣游走,不過(guò)這是在近期逐漸普及的方法,同時(shí)也只得本書(shū)一提.
本書(shū)稍后在第8章回深入討論定義清單.事實(shí)上,它們能應(yīng)用的范圍遠(yuǎn)超過(guò)大多是設(shè)計(jì)師的認(rèn)知:以<dl>排版表單就是個(gè)很棒的例子.
你應(yīng)該發(fā)現(xiàn)了這個(gè)范圍里面的每組表單說(shuō)明文字都放在定義名詞標(biāo)簽<dt>之內(nèi),隨后跟著放在定義描述標(biāo)簽<dd>中的表單元素.這么做能將說(shuō)明文字與表單元素對(duì)配起來(lái),并且在不使用任何樣式時(shí)以瀏覽器顯示的效果見(jiàn)圖5-6:
圖5-6.以清單定義排版表單的顯示效果
根據(jù)預(yù)設(shè)值,大多數(shù)可視化瀏覽器會(huì)把<dd>縮進(jìn)顯示在單獨(dú)一行之內(nèi).太棒了,因?yàn)檫@樣便不必使用任何多余的<p>或<br />標(biāo)簽了就能讓不支持CSS的瀏覽器顯示出容易使用的表單排版效果.
定義樣式
最簡(jiǎn)單的樣式修改,大概是去掉表單內(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ì)齊,但這至少說(shuō)明了使用<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ā)揮的空間也變大了.
概要
看完四種標(biāo)記同一個(gè)簡(jiǎn)單表單的不同方法,同時(shí)也討論了彼此的優(yōu)缺點(diǎn),要注意的是,我們?yōu)榉椒–與方法D加上了易用性功能,當(dāng)然也可以加到頭兩個(gè)方法上,在得到這些改進(jìn)之后,這兩個(gè)方法當(dāng)然也會(huì)變得更棒.
這幾個(gè)方法沒(méi)有哪一個(gè)明顯比其他方法要好,或者能當(dāng)作"最佳解決方案".不過(guò)多知道幾種方法很有價(jià)值.而你也以組合這四種方法,在你的項(xiàng)目里做出更棒的表單.
方法A:
以視覺(jué)效果來(lái)說(shuō),是個(gè)建立表單元素,說(shuō)明文字的簡(jiǎn)介方式,在處理復(fù)雜,龐大的表單時(shí)尤其好用.
然而,為了這樣單純的表單使用表格,似乎太麻煩了.
方法B:
簡(jiǎn)單的標(biāo)記法在文字瀏覽器,小屏幕設(shè)備上的顯示效果不錯(cuò).
以視覺(jué)效果來(lái)說(shuō),只用<br />會(huì)讓排版變得太擁擠.
方法C:
簡(jiǎn)單的標(biāo)記法在文字瀏覽器,小屏幕設(shè)備上顯示效果不錯(cuò).
允許說(shuō)明文字,表單元素的長(zhǎng)度變化,不會(huì)有對(duì)齊的問(wèn)題.
包含重要的易用性功能(也能使用在先前的方法內(nèi)).
方法D:
結(jié)構(gòu)化標(biāo)記法在文字瀏覽器,小屏幕設(shè)備上顯示效果不錯(cuò).
包含重要的易用性功能(也能應(yīng)用在先前的方法內(nèi)).
說(shuō)明文字與表單元素能以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ì)討論一些簡(jiǎn)單的CSS樣式.讓我們把表單修飾得更吸引人.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——表單 [2] 下一頁(yè) 標(biāo)記語(yǔ)言——表單 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 標(biāo)記語(yǔ)言——表單 [3]
