表單的用途很多，在製作網頁時，特別是製作**頁時常常會用到。表單的作用就是收集使用者的資訊，將其提交到伺服器，從而實現與使用者互動。表單是HTML頁面與伺服器實現互動的重要手段。

１、使用表單標記form：表單是由<form>標記定義的。它類似於一個容器標記，其他表單物件標記需要在它的包圍中才有效，如<input>。一般情況下，表單處理程式action和傳送方法method是必不可少的引數。

１）處理動作action：用於指定表單資料提交到哪個地址進行處理。

語法：<form action=”表單的處理程式”>……</form>

說明：表單的處理程式是表單要提交的地址，也就是表單中收集到的資料將要傳遞到的程式地址。這一地址可以是絕對地址，也可以是相對地址，還可以是一些其他的形式。

例如：<form action=”mailto:[email protected]”></form>

２）表單名稱name：用來為當前表單定義一個獨一無二的名稱，該名稱可以控制表單與後臺程式之間的關係。

語法：<form name=”表單名稱”>……</form>

說明：表單名稱中不能包含特殊字元和空格。

３）傳送方法method：用於指定將資料提交到伺服器時，使用哪種HTTP提交方法。

語法：<form method=”傳送方法”>……</form>

method標記的屬性值

屬性值	說明
get	將表單內容附加在URL地址後面，因此對提交資訊的長度進行了限制，最多不可超過8192個字元。如果資訊太長，將被截去，可能導致意想不到的處理結果。
post	將使用者在表單中填寫的資料包含在表單主體中，一起傳送到伺服器處理程式中，該方法沒有字元的限制。

注：預設情況下，傳送的方法為get，它不具有保密性，不適合處理如信用卡卡號等要求保密的內容，而且不能傳送非ASCII碼的字元。

４）編碼方式enctype：用於設定表單資訊提交的編碼方式。

語法：<form enctype=”編碼方式”>……</form>

enctype標記的屬性值

屬性值	說明
Text/plain	以純文字的形式傳送資訊
application/x-www-form-urlencoded	預設的編碼形式
multipart/form-data	mime編碼，上傳檔案時必須選擇該項

３）目標顯示方式target：用於設定目標視窗的開啟方式

traget標記的屬性值

屬性值	說明
_blank	將返回資訊顯示在新開啟的瀏覽器視窗中
_parent	將返回資訊顯示在父級瀏覽器視窗中
_self	將返回資訊顯示在當前瀏覽器視窗中
_top	將返回資訊顯示在頂級瀏覽器視窗中

２、插入表單物件：在網頁中可以插入的表單物件包括文字欄位、複選框、單選按鈕、提交按鈕、重置按鈕和影象域等。在HTML表單中，input標記是最常用的表單標記，常見的文字欄位和按鈕都採用這個標記。

語法：<form>

<input type=”表單物件” name=”表單物件的名稱” />

</form>

說明：name屬性是為了便於程式對不同表單物件進行區分，type則是確定這一個表單物件的型別。

type所包含的屬性值

屬性值	說明
text	文字欄位
password	密碼域
radio	單選按鈕
checkbox	複選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	影象域
hidden	隱藏域
filr	檔案域

１）文字欄位text：用來設定表單中的單行文字框，在其中可輸入任何型別的文字、數字或字母，輸入的內容以單行顯示。

語法：<input name=”文字欄位” type=”text” value=”文字欄位的預設取值” size=”文字欄位的長度” maxlength=”最多字元數” />

文字欄位text的引數值

屬性值	說明
name	文字欄位的名稱，用於和頁面中其他控制元件加以區別。名稱由英文、數字以及下劃線組成，有大小寫之分
type	指定插入哪種表單物件，如type=”text”，即插入文字欄位
value	設定文字框的預設值
size	確定文字欄位在頁面中顯示的長度，以字元為單位（1~未知）
maxlength	設定文字欄位中最多可以輸入的字元數

注：size預設20個字元，最小為1；maxlength預設好像無限大的樣子，最小可為0。

２）密碼域password：是一種文字欄位的形式，輸入到其中的文字均以星號“*”或圓點“●”顯示。

語法：<input name=”密碼域的名稱” type=”password” value=”密碼域的預設取值” size=”密碼域的長度” maxlength=”最多字元數” />

密碼域的引數值

屬性值	說明
name	密碼域的名稱，用於和頁面中其他控制元件加以區別。名稱由英文、數字以及下劃線組成，有大小寫之分
type	指定插入哪種表單物件
value	用來定義密碼域的預設值，以“*”或“●”顯示
size	確定密碼域在頁面中顯示的長度，以字元為單位
maxlength	設定密碼域中最多可以輸入的字元數

３）單選按鈕radio：用來讓瀏覽者進行單一選擇，在頁面中以圓框顯示。

語法：<input name=”單選按鈕的名稱” type=”radio” value=”單選按鈕的取值” checked />

說明：value用於設定使用者選中單選按鈕後，傳送到處理程式中的值。checked表示這一單選按鈕被選中，而在一個單選按鈕組中只有一個單選按鈕可以設定為checked。

注：要使多個單選按鈕組成一組的話，其name需相同，另disabled使某單選按鈕無效。

４）複選框checkbox：與單選按鈕不同的是複選框能夠實現專案的多項選擇，以一個方框表示。

語法：<input name=”複選框的名稱” type=”checkbox” value=”複選框的取值” checked />

說明：checked表示複選框在預設情況下已經被選中，一組選項中可以同時多個被選中。

注：disabled使某選框無效。

５）普通按鈕button：表單中的按鈕起著至關重要的作用，它可以激發提交表單的動作；也可以在使用者需要修改表單的時候，將表單恢復到初始的狀態；這可以依照程式的需要，發揮其他的作用。普通按鈕主要是配合JavaScript指令碼來進行表單處理的。

語法：<input name=”按鈕的名稱” type=”submit” value=”按鈕的取值” onclick=”處理程式” />

說明：value的取值就是顯示在按鈕上的文字，在button中可以新增onclick等事件來實現一些特殊的功能。onclick事件是設定當滑鼠按下按鈕時所進行的處理。

例如：<input name=”button” type=”submit” value=”關閉視窗” onclick=”window.close()” />

６）提交按鈕submit：是一種特殊的按鈕，單擊該類按鈕可以實現表單內容的提交。

語法：<input name=”按鈕的名稱” type=”submit” value=”按鈕的取值” />

說明：value同樣用來設定顯示在按鈕上的文字。

７）重置按鈕reset：可以清除使用者在頁面中輸入的資訊，將其恢復成預設的表單內容。

語法：<input name=”按鈕的名稱” type=”reset” value=”按鈕的取值” />

說明：value用來設定顯示在按鈕上的文字。

８）影象域image：是指用在提交按鈕位置的影象，使得影象具有按鈕的功能。能達到美化頁面等效果。

９）隱藏域hidden：在頁面中對於使用者來說是看不見的。在表單中插入隱藏域的目的在於收集和傳送資訊，而使用者不需看到。傳送表單時，隱藏域的資訊也被一起傳送到伺服器。

語法：<input name=”隱藏域的名稱” type=”hidden” value=”隱藏域的取值” />

１０）檔案域file：是由一個文字框和一個“瀏覽”按鈕組成的，使用者可以直接將要上傳給網站的檔案的路徑輸入在文字框中，也可單擊“瀏覽”按鈕進行選擇。

語法：<input name=”檔案域的名稱” type=”file” size=”檔案域的長度” maxlength=”最多字元數” />

疑問：maxlength好像沒什麼用及作用……

３、列表/選單：一個列表可以包括一個或多個專案。當需要顯示許多專案時，選單就非常有用。表單中有兩種型別的選單：一個選單是單擊時出現下拉的選單，稱為下拉選單；另一種選單則是顯示為一個列有專案的可滾動列表，可從該列表中選擇專案，稱為滾動列表。選單和列表主要是為了節省頁面的空間。通過select和option標記來實現。

１）下拉選單：是一種最節省頁面空間的選擇方式，因在正常狀態下只顯示一個選項，單擊按鈕開啟選單後才會看到全部選項。

語法：<select name=”下拉選單的名稱”>

<option value=”選項值” selected>選項顯示內容</option>

……

</select>

說明：選項值是提交表單時的值，而選項顯示的內容才是真正在頁面中要顯示的。selected表示該選項在預設情況下是選中的，一個下拉選單中只能有一項被選中。

２）列表項：列表項在頁面中可以顯示出幾條資訊，一旦超出這個資訊量，在列表右側會出現滾動條，拖動滾動條可看到所有的項。

語法：<select name=”列表項的名稱” size=”顯示的列表項數” multiple>

<option value=”選項值” selected>選項顯示內容</option>

……

</select>

說明：size用於設定在頁面中的最多列表數，當超過這個值時會出現滾動條。multiple表示這一列表可以進行多項選擇（按ctrl或shift來實現）。選項值是提交表單時的值，而選項顯示內容才是真正在頁面中要顯示的。

４、文字域標記textarea：當需要讓瀏覽者填入多行文字時，就應該使用文字區域而還是文字欄位了。和其他大多數表單物件不一樣，文字區域使用的是textarea而不是input標記。

語法：<textarea name=”文字區域的名稱” cols=”長度” rows=”行數”></textarea>

說明：cols用於設定文字域的列數，也就是其寬度。rows用於設定文字域的行數，也就是高度。當文字內容超出這一範圍時會出現滾動條，即大小可以很大，最小1*1。

５、id標記

相關推薦