第11章 在網頁中建立表單

11.1表單概述

表單是實作動态網頁的一種主要的外在形式，利用表單可以收集浏覽者的資訊或實作搜尋等功能。

表單資訊的處理過程：單擊表單中的送出按鈕時，在表單中輸入的資訊就會被送出到伺服器中，伺服器的有關應用程式将處理送出資訊，處理結果或者是将使用者送出的資訊儲存在伺服器端的資料庫中，或者将有關資訊傳回到用戶端的浏覽器上。

11.2 表單标記

用于描述表單對象的标記可以分成表單

<form>

标記和表單域标記兩大類。

<form>

定義一個表單區域，表單域标記用于定義表單中的各個元素，所有表單元素必須放在表單标記中。

表單組成标記如下表：

标記	描述
<form>	定義一個表單區域，以及攜帶表單的相關資訊
<input>	設定輸入表單元素
<select>	設定清單元素
<option>	設定清單元素中的項目
<textarea>	設定表單文本域元素

11.2.1 表單标記

<from>

<form>

标記具體來說有兩方面作用：

(1) 限定表單的範圍，即定義一個區域，表單各元素都要設定在這個區域内，單擊送出按鈕時，送出的也是這個區域内的資料

(2) 攜帶表單的相關資訊，如處理表單的程式、送出表單的方法等

基本文法：

<form name="表單名稱" method="送出方法" action="處理程式">
	...
</form>
           

文法說明：

<form>

标記的常用屬性除了name、method、action外，還包括onsubmit和enctype等屬性

屬性	描述
name	設定表單名稱
method	定義表單資料從用戶端傳送到伺服器的方法，包括兩種方法：get和post,預設時使用get方法
action	用于指定處理表單的服務端程式
onsubmit	用于指定處理表單的腳本函數
enctype	設定MIME類型，預設值為application/x-www-form-unlencoded。需要上傳檔案到伺服器時，應将該屬性設定為multipart/form-data

其中，get方法是将表單内容附加到 URL位址後面，是以對送出資訊的長度進行了限制，最多不能超過8KB個字元，如果資訊過長，将被截去，進而導緻意想不到的處理結果。同時get方法不具有保密性，不适于處理如銀行卡卡号等要求保密的内容，而且不能傳送非ASCII碼的字元。

post方法是将使用者在表單中填寫的資料包含在表單的主體中，一起傳送給伺服器上的處理程式，該方法沒有字元個數和字元類型的限制，它包含了ISO10646中所有字元，所傳送的資料不會顯示在浏覽器的位址欄中。

預設情況下，表單使用get方法傳送資料，當資料涉及保密要求時必須使用Post方法，而所傳送的資料是用于執行插入或更新資料庫操作時，則最好使用post方法，而執行搜尋操作時可以使用get方法。

11.2.2 輸入标記

輸入标記用于設定表單輸入元素，諸如文本框、密碼框、單選按鈕、複選框、按鈕等元素。

基本文法：

<input type="元素類型" name="表單元素名稱">
           

文法說明：

type屬性用于設定不同類型的輸入元素，可設定的元素類型如下表；name屬性指定輸入元素的名稱，作為伺服器程式通路表單元素的辨別名稱，是以名稱必須唯一。

對于下表所列的各種按鈕元素，必須設定的一個屬性是type;其餘輸入元素必須設定的屬性是type和name兩個屬性。

type屬性值	描述
text	設定單行文本框元素
password	設定密碼元素
file	設定檔案元素
hidden	設定隐藏元素
radio	設定單選框元素
checkbox	設定複選框元素
button	設定普通按鈕元素
submit	設定送出按鈕元素
reset	設定重置按鈕元素
image	設定圖像域（圖像按鈕）元素

1.文本框text

用于建立一個單行輸入文本框，用于通路者在其中輸入文本資訊，輸入的資訊将以明文顯示。

基本文法：

<input type="text" name="文本框名稱">
           

文法說明：

type屬性值必須為“text”,name屬性為必設屬性。除了type和name屬性外，文本框還包括maxlength、size和value等可選屬性。

屬性	描述
name	設定文本框的名稱，在腳本中作為文本框辨別擷取其資料
maxlength	設定在文本框中最多可輸入的字元數
size	控制文本框的長度，機關是像素，預設值是24個像素
value	設定文本框的預設值

2.密碼框password

用于建立一個密碼框，以“*”或“ - ”符号回顯所輸入的字元，進而起到保密的作用。

基本文法：

<input type="password" name="密碼框名稱">
           

文法說明：

type屬性值必須為“password”，密碼框具有和文本框一樣的屬性，作用也是一樣的

3.隐藏框hidden

用于建立隐藏域。隐藏框不會被浏覽者看到，它主要用于在不同頁面中傳遞域中所設定的值。

基本文法:

<input type="hidden" name="域名稱" value="域值">
           

文法說明：

隐藏域的type、name和value屬性都必須設定。type的屬性值必須為“hidden”,value屬性用于設定隐藏域需傳遞的值，name設定隐藏域的名稱，用于在處理程式中擷取域的資料。

4.檔案域file

用于建立檔案域。檔案域可以将本地檔案上傳到伺服器端。

基本文法：

<input type="file" name="域名稱">
           

文法說明：

type的屬性值必須為“file”,name設定檔案域的名稱，用于在腳本中擷取域的資料。

另外需要注意的是，要将檔案内容上傳到伺服器，還必須修改表單的編碼，這需要使用

<form>

标記的enctype屬性，應将該屬性的值設定為multipart/form-data,同時表單送出方法必須為post。

5.單選按鈕radio

用于建立單選按鈕，用于在一組選項中進行單項選擇，每個單選按鈕用一個圓框表示。

基本文法：

<input type="radio" name="域名稱" value='"域值" checked="checked">
           

文法說明：

type的屬性值必須設定為”radio“,name設定單選按鈕的名稱，用于在處理程式中擷取域的資料，屬于同一組的單選框的name屬性必須設定為相同的值；value用于設定單選按鈕選中後傳到伺服器端的值；checked表示該項被預設選中，如果不設定預設選中狀态，則不要使用checked屬性，預設情況下，單選按鈕沒有被選中。

6.複選框checkbox

用于建立複選框，用于在一組選項中進行多項選擇，每個複選框用一個方框表示。

基本文法：

<input type="checkbox" name="域名稱" value="域值" checked="checked">
           

文法說明：

type的屬性值必須為”checkbox“,name設定複選框的名稱，用于在處理程式中擷取域的值，同一組的複選框的name屬性值可以設定為相同值，也可以設定不同值；value和checked屬性的使用和單選按鈕的完全一樣。

7.送出按鈕submit

用于将表單内容送出到指定伺服器處理程式或指定用戶端腳本進行處理。

基本文法：

<input type="submit" name="按鈕名稱" value="按鈕顯示文本">
           

文法說明：

type屬性值必須為”submit“,為必設定屬性；name屬性設定按鈕名稱，如果處理程式不需要引用該按鈕，則可以省略該屬性；value屬性設定按鈕上面顯示的文本，不設定該屬性時，預設顯示”送出查詢内容“

8.普通按鈕button

用于激發送出表單動作，配合javascript腳本對表單執行處理操作。

基本文法：

<input type="button" value="按鈕顯示文本" onclick="javascript函數名" name="按鈕名稱">
           

文法說明：

type屬性值必須為”button“,必設屬性；name屬性和value屬性的作用與submit按鈕的一樣，唯一不同的是value屬性沒有設定時，按鈕上面将沒有任何文字顯示；onclick屬性指定處理表單内容的腳本，必設屬性。

9.重置按鈕reset

用于清除表單中所輸入的内容，将表單内容恢複成預設的狀态。

基本文法：

<input type="reset" name="按鈕名稱" value="按鈕顯示文本">
           

文法說明：

type屬性值必須為”reset“,必設屬性；name屬性和value屬性的作用與submit按鈕的一樣，value屬性如果不設定的話，按鈕文字預設顯示”重置“。

10.圖像按鈕image

按鈕外形以圖像表示，功能與送出按鈕一樣，具有送出表單内容的作用。

基本文法:

<input type="image" name="按鈕名稱" src="圖像路徑" width="60" height="30">
           

文法說明：

type屬性值必須為”image“,為必設屬性；name屬性的作用與submit按鈕的一樣；src屬性設定圖像的路徑，為必設屬性；width和height屬性分别用于設定圖像的寬度和高度。

11.2.3 選擇清單标記

<select>

1.清單

清單是指一次可以選擇多個清單選項，且一次可以顯示1個以上清單選項的選擇清單。

基本文法：

<select name="清單名稱" size="顯示的選項數目" multiple="multiple">
	<option value="選項值 selected="selected">選項一</option>
	<option value="選項值">選項二</option>
	<option value="選項值" selected="selected">選項三</option>
</select>
           

文法說明：

<select>

标記用于聲明選擇清單，

<option>

标記用于設定各個選項，各個屬性的說明如下表：

屬性	描述
name	設定清單的名稱
size	設定能同時顯示的清單選項個數(預設為1)，取值大于或等于1
multiple	設定清單中項目可多選
value	設定選項值
selected	設定預設選項，可對多個清單選項進行此屬性的設定

2.下拉清單

下拉清單是指一次隻能選擇一個清單選項，且一次隻能顯示一個清單選項的選擇清單。

基本文法：

<select name="清單名稱">
	<option value="選項值">選項一</option>
	<option value="選項值">選項二</option>
	<option value="選項值">選項三</option>
</select>
           

文法說明：

标記size屬性值預設為1，是以對于下拉清單，可以不用設定size屬性；另外，不能設定multiple屬性，如果要設定預設選中項，則隻能允許一個選項設定selected屬性。

11.2.4 文本域标記

基本文法：

<textarea name="文本區域名稱" rows="行數" cols="字元數">
	...(此處輸入的為預設文本)
</textarea>
           

文法說明：

rows屬性設定可見行數，當文本内容超出這個值時，将顯示垂直滾動條，cols屬性設定一行可輸入多少個字元。