在網(wǎng)站建設(shè)中,表單對(duì)象在頁(yè)面中呈現(xiàn)不同的UI效果,具有不同的數(shù)據(jù)輸入體驗(yàn),但是它們的功能都是相同的,即接收數(shù)據(jù)。表單將根據(jù)不同表單對(duì)象接收并傳遞數(shù)據(jù)。服務(wù)器也將以表單對(duì)象作為信息單元對(duì)表單數(shù)據(jù)進(jìn)行捕獲。
文本框
文本框比較常用,任何類型的信息都可以通過文本框?qū)崿F(xiàn)交互。文本框包含很多屬性,常用屬性及其語(yǔ)法格式如下:
<input name="textfield" <!--必設(shè)屬性--> type="text" <!--必設(shè)屬性--> id="textfield" <!--可選屬性--> value="單行文本框" <!--默認(rèn)值,可選屬性--> size="20" <!--定義文本框的寬度,即文本框的顯示長(zhǎng)度--> maxlength="20" <!--定義文本框的大小,即最多接收字符數(shù)-->/>
2. 密碼域
密碼域也是一種文本框,不過它是一種特殊用途的文本框,與普通文本框不同之處就在于它在頁(yè)面中不顯示所有輸入字符,而是全部用星號(hào)代替這樣的設(shè)計(jì)目的是為了防止密碼不被旁觀者惡意竊取。
3. 文本區(qū)
域文本區(qū)域就是多行文本框,由于它能夠多行顯示輸入的信息,常被設(shè)計(jì)為接收大容量信息的項(xiàng)目。例如,個(gè)人簡(jiǎn)介、對(duì)象說明、詳細(xì)計(jì)劃、圖書目錄、多行列表等。
與文本框不同,文本區(qū)域使用textarea元素定義。文本區(qū)域的代碼格式如下:
<textarea name="textarea" <!--必設(shè)屬性--> cols="20" <!--定義文本區(qū)域顯示的列數(shù)(寬度),以字符為單位--> rows="5" <!--定義文本區(qū)域顯示的行數(shù)(高度)--> wrap="physical"> <!--定義換行方式 --> <!--這里是文本區(qū)域顯示的輸入信息,也可以在此設(shè)置默認(rèn)顯示信息--></textarea>
4. 單選按鈕
單選按鈕傳遞的信息非常簡(jiǎn)單,可以用一個(gè)字節(jié)來表示,如1、0、true或false。從開發(fā)的角度分析,由于單選按鈕傳遞的信息比較單純,很容易被服務(wù)器處理,常常被用于腳本中實(shí)現(xiàn)邏輯判斷。例如,判斷是男是女、是對(duì)是錯(cuò)、是否同意等。
通過設(shè)置相同的name屬性值,可以把多個(gè)單選按鈕捆綁在一起,設(shè)計(jì)為單選按鈕組。例如,下面代碼設(shè)計(jì)一個(gè)性別選項(xiàng)。
<fieldset data-role="controlgroup"> <legend>性別</legend> <label> <input name="sex" type="radio" value="男" checked />男</label> <label> <input name="sex" type="radio" value="女" />女</label></fieldset>
5. 復(fù)選框
復(fù)選框傳遞的信息也比較單一,但是當(dāng)多個(gè)復(fù)選框捆綁在一起時(shí),可以設(shè)計(jì)多項(xiàng)選擇,方便用戶快速選擇,而不用手動(dòng)輸入信息。捆綁復(fù)選框的方法是為多個(gè)復(fù)選框定義相同的name屬性值,例如,下面代碼定義了一個(gè)復(fù)選框組:
<fieldset data-role="controlgroup"> <legend>興趣</legend> <label> <input name="interest" type="checkbox" value="體育" />體育</label> <label> <input name="interest" type="checkbox" value="音樂" />音樂</label> <label> <input name="interest" type="checkbox" value="計(jì)算機(jī)" /> 計(jì)算機(jī)</label></fieldset>
設(shè)計(jì)復(fù)選框時(shí),應(yīng)把一組復(fù)選框排列在一起,并命名為有規(guī)律的名字,以方便后臺(tái)處理。因?yàn)樵谀_本中需要逐一獲取每個(gè)復(fù)選框傳遞的值,并根據(jù)復(fù)選框是否被選中來決定采用哪些選項(xiàng)值。
6. 列表菜單
列表框與單選按鈕和復(fù)選框一樣都是屬于選擇性表單對(duì)象,所接收的信息一般都是固定的,通過用戶的選擇來向服務(wù)器傳遞指定信息。但是它們?cè)谑褂蒙弦灿袇^(qū)別。
?單選按鈕和復(fù)選框能夠在頁(yè)面中顯示全部選項(xiàng),這樣方便瀏覽,對(duì)于選項(xiàng)比較少時(shí),使用單選按鈕或復(fù)選框會(huì)比較經(jīng)濟(jì)。如果選項(xiàng)過多,就會(huì)占用過多的頁(yè)面,而浪費(fèi)空間。
?列表框能夠把所有選項(xiàng)包含在一個(gè)框內(nèi),可以隱藏部分或全部選項(xiàng)。這對(duì)于選項(xiàng)很多時(shí),就顯得很實(shí)用。例如,在選擇國(guó)籍、省份、區(qū)號(hào)等大量選項(xiàng)的信息時(shí),一般都會(huì)采用下拉菜單來設(shè)計(jì)。
列表框和下拉菜單同屬于一個(gè)表單元素(se-lect),只不過它們的顯示樣式不同。
7. 文件域
文件域是一個(gè)復(fù)合控件,由文本框和瀏覽按鈕組成,文件域常用來傳遞二進(jìn)制數(shù)據(jù)流,如文件、圖片等。文件域用法如下
<label>上次文件 <input name="file" type="file" /></label>
8. 按鈕
按鈕不負(fù)責(zé)接收和傳遞數(shù)據(jù),僅作為執(zhí)行具體操作的事件。單擊按鈕時(shí)將觸發(fā)一個(gè)動(dòng)作,并執(zhí)行相應(yīng)的行為,以完成某項(xiàng)任務(wù)。按鈕有多種類型,例如:
負(fù)責(zé)提交表單數(shù)據(jù)的提交按鈕:<input name="" type="submit" value="提交" />
負(fù)責(zé)恢復(fù)表單域的默認(rèn)顯示的重設(shè)按鈕:<input name="" type="reset" value="重置" />
沒有包含特定行為的普通按鈕:<input name="" type="button" value="普通按鈕" />
9. 圖像域
圖像域?qū)嶋H上就是一個(gè)提交按鈕,它允許用戶選擇圖像作為按鈕的顯示界面,因此適合設(shè)計(jì)個(gè)性按鈕樣式。例如,下面代碼使用圖像域設(shè)計(jì)一個(gè)提交按鈕
<input name="submit" type="image" value="提交" src="images/submit.gif" alt="提交" align="middle" height="40" />
10. 隱藏域隱藏域主要用來在表單中傳遞固定的值,該對(duì)象不會(huì)顯示在頁(yè)面中,但是其值可以在網(wǎng)頁(yè)源代碼中查看。一般使用隱藏域來傳遞一些配置信息或者輔助信息,以彌補(bǔ)提交表單時(shí),很多數(shù)據(jù)在表單中無(wú)法傳遞的問題,但是要避免使用隱藏域傳遞個(gè)人隱私信息,或者傳遞一些完整的、大容量信息。因?yàn)檫@樣既不安全,也給數(shù)據(jù)傳輸增加負(fù)荷。
隱藏域使用比較簡(jiǎn)單,代碼格式如下:
<input name="id" <!--必設(shè)屬性,指定隱藏域的名稱--> type="hidden" <!--必設(shè)屬性,指定隱藏域的類型--> value="100" <!--必設(shè)屬性,指定要傳遞的值-->/>