|
上文：標(biāo)記語言——引用
標(biāo)準(zhǔn)化設(shè)計解決方案 - 標(biāo)記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語法談起
Chapter 5 表單
互動性一直是互聯(lián)網(wǎng)的重點,讓使用者與網(wǎng)站能夠交換信息,彼此溝通.表單使我們能夠有組織的,使用同一方式的從使用者那里收集資料,因此在設(shè)計網(wǎng)站時總是屬于"任何狀況都能拿來用"的那一類,舉例來說,我們發(fā)現(xiàn)大概有10000種標(biāo)記表單的不同方式.好吧,或許沒有那么多,但是我們?nèi)阅芩伎紟追N狀況,讓使用者易于使用表單結(jié)構(gòu),同時也便于讓網(wǎng)站所有者進(jìn)行管理。
記表單的方法
方法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> </th>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</form>
長久以來許多人都以表格來標(biāo)記表單,由于使用頻率很高的緣故,我們已經(jīng)習(xí)慣于見到表單以這種方式進(jìn)行排版:左列是向右對齊的文字說明,右列則是相左對齊的表單元素.使用單純的兩列表格,是完成易用表單排版的簡單方法之一.
有些人認(rèn)為不需要表格,也有其他人認(rèn)為應(yīng)該把表單視為表狀資料.我們不打算支持任何一種說法,但是在某些情況下,使用表格時達(dá)成特定表單排版的最佳方法,特別是包含許多種不同元素的復(fù)雜表單(使用了單選框,下拉選框等等的表單).完全依賴CSS處理這種表單的排版可能會讓人感到挫折,而且經(jīng)常需要加上額外的<span>與<div>,會比表格耗上更多的標(biāo)簽.
接著看圖5-1,這是一般可視化瀏覽器顯示方法A的效果:
圖5-1:瀏覽器顯示的方法A的效果
你會發(fā)現(xiàn),使用表格可以把文字說明表單元素排列的十分整齊.然而,對這樣簡單的表單來說,或許我會避免選擇使用表格,并且換用其他不需要使用這么多標(biāo)簽的方法.除非表單的視覺設(shè)計十分需要這種排版,否者未必需要使用表格.同時我們也要考慮幾個易用性問題,在研究下面兩個方法的時候,我們就會接觸到這個部分.
方法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>
使用單一段落和幾個<br />標(biāo)簽隔開所有元素是個可行方法,但視覺上可能會被描繪的有點擠.圖5-2十一版瀏覽器的顯示效果:
圖5-2:瀏覽器顯示方法B的效果
雖然我們不用表格就能完成排版,但是它看起來有點擠,有點丑.同時我們也遇上表單元素?zé)o法完美對齊的問題.
我們能夠以CSS為<input>元素加上一個外補丁,以便減輕擁擠的感覺.像是這樣:
input{
margin:6px 0;
}
前面這段為每個<input>元素的上下分別加上6像素的外補丁(包含了Name,Email的輸入框,以及submit按鈕),在元素之間加上額外的空間.就像圖5-3一樣:
圖5-3.方法B在為input元素加上外補丁之后的效果
方法B本身沒什么大問題,但是還能進(jìn)行一些微調(diào),以便把表單做得更好.方法C里頭也運用了這些微調(diào)技巧,所以一起來看看吧.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 標(biāo)記語言——表單 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 標(biāo)記語言——表單 [1]
第 2 頁 
