首頁(yè) > 開(kāi)發(fā) > HTML > 正文

HTML標記語(yǔ)言——表單

2020-09-18 22:23:59
字體:
來(lái)源:轉載
供稿:網(wǎng)友

 網(wǎng)頁(yè)設計 html教程 欄目.

上文:標記語(yǔ)言——引用

原文出處

chapter 5 表單

互動(dòng)性一直是互聯(lián)網(wǎng)的重點(diǎn),讓使用者與網(wǎng)站能夠交換信息,彼此溝通.表單使我們能夠有組織的,使用同一方式的從使用者那里收集資料,因此在設計網(wǎng)站時(shí)總是屬于"任何狀況都能拿來(lái)用"的那一類(lèi),舉例來(lái)說(shuō),我們發(fā)現大概有10000種標記表單的不同方式.好吧,或許沒(méi)有那么多,但是我們仍能思考幾種狀況,讓使用者易于使用表單結構,同時(shí)也便于讓網(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>&nbsp;</th>

      <td><input type="submit" value="submit" /></td>

    </tr>

  </table>

</form>

長(cháng)久以來(lái)許多人都以表格來(lái)標記表單,由于使用頻率很高的緣故,我們已經(jīng)習慣于見(jiàn)到表單以這種方式進(jìn)行排版:左列是向右對齊的文字說(shuō)明,右列則是相左對齊的表單元素.使用單純的兩列表格,是完成易用表單排版的簡(jiǎn)單方法之一.

有些人認為不需要表格,也有其他人認為應該把表單視為表狀資料.我們不打算支持任何一種說(shuō)法,但是在某些情況下,使用表格時(shí)達成特定表單排版的最佳方法,特別是包含許多種不同元素的復雜表單(使用了單選框,下拉選框等等的表單).完全依賴(lài)css處理這種表單的排版可能會(huì )讓人感到挫折,而且經(jīng)常需要加上額外的<span>與<div>,會(huì )比表格耗上更多的標簽.

接著(zhù)看圖5-1,這是一般可視化瀏覽器顯示方法a的效果:

圖5-1:瀏覽器顯示的方法a的效果

你會(huì )發(fā)現,使用表格可以把文字說(shuō)明表單元素排列的十分整齊.然而,對這樣簡(jiǎn)單的表單來(lái)說(shuō),或許我會(huì )避免選擇使用表格,并且換用其他不需要使用這么多標簽的方法.除非表單的視覺(jué)設計十分需要這種排版,否者未必需要使用表格.同時(shí)我們也要考慮幾個(gè)易用性問(wèn)題,在研究下面兩個(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 />標簽隔開(kāi)所有元素是個(gè)可行方法,但視覺(jué)上可能會(huì )被描繪的有點(diǎn)擠.圖5-2十一版瀏覽器的顯示效果:

圖5-2:瀏覽器顯示方法b的效果

雖然我們不用表格就能完成排版,但是它看起來(lái)有點(diǎn)擠,有點(diǎn)丑.同時(shí)我們也遇上表單元素無(wú)法完美對齊的問(wèn)題.

我們能夠以css為<input>元素加上一個(gè)外補丁,以便減輕擁擠的感覺(jué).像是這樣:

input{

    margin:6px 0;

}

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

圖5-3.方法b在為input元素加上外補丁之后的效果

方法b本身沒(méi)什么大問(wèn)題,但是還能進(jìn)行一些微調,以便把表單做得更好.方法c里頭也運用了這些微調技巧,所以一起來(lái)看看吧.

方法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è)地方.首先,對于類(lèi)似本示例的單純表單來(lái)說(shuō),我發(fā)現把每個(gè)說(shuō)明與表單元素放在單獨的段落比較方便,不加上樣式顯示時(shí),段落之間的預設距離應該足以讓你輕松閱讀內容.稍后我們還能以css為表單內包含的<p>標簽設定間隔.

我們甚至更進(jìn)一步,為表單設定了唯一的id="thisform".因此,剛才我提到的精確間隔大致上可以寫(xiě)成這樣:

#thisform p{

margin:6px 0;

}

這代表將這個(gè)表單內的<p>標簽的上下外補丁設定為6個(gè)像素,覆蓋瀏覽器為一般段落選用的預設值.

方法c與前兩種方法的另一個(gè)不同之處在于:盡管每個(gè)群組(說(shuō)明和輸入框)都放在<p>里頭,我們仍以<br />把他們放在獨立的一行.使用<br />分開(kāi)每個(gè)元素,就能繞過(guò)文字長(cháng)短不一,造成輸入項無(wú)法完美對齊的問(wèn)題.

圖5-4是一般瀏覽器顯示方法c的效果,這邊有使用先前為<p>標簽設定的樣式.

圖5-4.瀏覽器顯示方法c的效果,有對p標簽使用css

除了方法c的視覺(jué)效果之外,最重要的優(yōu)點(diǎn):也就是提升易用性的部分.

<label>標簽

使用<label>標簽提升表單的易用性需要兩個(gè)步驟,而方法c已經(jīng)完成這兩個(gè)步驟了.首先是以<label>將文字說(shuō)明與相關(guān)的表單元素連接在一起,不管是文字輸入框(text field),文字區塊輸入框(text area),單選框(radio),多選框(checkbox)等等都好.方法c在"name:"與"email:"標題上使用了<label>標簽,把它們與輸入資料的元素連接在一起.

第二步則是為<label>標簽加上for屬性,填上對應輸入框的id.

舉例來(lái)說(shuō).在方法c里面,以<label>標簽把"name:"包了起來(lái),并且在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>?

或許聽(tīng)過(guò)其他人說(shuō)你應該在表單內加上<label>標簽.而最重要的問(wèn)題在于為什么應該要用<label>標簽.

建立label / id的關(guān)聯(lián)能讓屏幕閱讀器為每個(gè)表單元素讀出正確的標簽,而不收版面排列方法的影響,這是件好事.同時(shí),<label>標簽正是為了標記表單欄標簽而生,使用這個(gè)標簽的時(shí)候,我們就是在為每個(gè)元素說(shuō)明意義,強化表單的結構.

在處理單選,多選框時(shí)使用<label>標簽還有個(gè)額外的好處,那就是大多數瀏覽器在使用者點(diǎn)擊<label>內文字時(shí)也會(huì )改變元素的值.這樣能為輸入元素造成更大的點(diǎn)擊區域,讓行動(dòng)不便的使用者更容易填寫(xiě)表單(mark pilgrim, "dive into accessibility," http://diveintoaccessibility.org/day_28_labeling_form_elements.html).

舉例來(lái)說(shuō),如果為表單加上一個(gè)多選框,讓使用者能夠選擇"記下這些信息",那么我們就能像這樣的使用<label>標簽了:

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

借著(zhù)以這種方式標記多選框,可以獲得兩個(gè)好處:屏幕閱讀器能讀出正確的說(shuō)明文字(就像這個(gè)例子一樣,文字出現在輸入框之后也行),而且能切換多選框的范圍變大了,現在切換范圍除了多選框本身之外,文字部分也包含在內(大多數瀏覽器都支持).

圖5-5就是這個(gè)表單在瀏覽器中的顯示效果.我們特別標示了加大之后的多選框切換范圍:

圖5-5.把文字包含在切換范圍內的多選框

除了表單與段落之外,最后我還想展示另一個(gè)標記表單的方式,使用定義清單.

發(fā)表評論 共有條評論
用戶(hù)名: 密碼:
驗證碼: 匿名發(fā)表