HTML標(biāo)記語言——表單

<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>

方法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ì)改變?cè)氐闹?這樣能為輸入元素造成更大的點(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)記表單的方式,使用定義清單.

上一頁12 3 4 下一頁 閱讀全文