|
網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。
第 1 頁 表單概述本專題從最基礎的表單知識，到表單的高級應用，讓你有一個比較全面地認識，相信你在讀完本專題以后，一定會對表單非常熟悉。
一、表單概述
表單，在網頁中的作用不可小視，主要負責數據采集的功能，比如你可以采集訪問者的名字和e－mail地址、調查表、留言簿等等。
1、表單的組成
一個表單有三個基本組成部分： 表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。為了顧及不同的網頁設計工具，本文只講述代碼的設計，不具體講述操作方法，下面就是表單的HTML代碼設計要點：
1.1 表單標簽＜form＞＜/form＞
功能：用于申明表單，定義采集數據的范圍，也就是＜form＞和＜/form＞里面包含的數據將被提交到服務器或者電子郵件里。
語法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞
屬性解釋見下表：
action=url指定一來處理提交表單的格式.它可以是一個URL地址(提交給程式)或一個電子郵件地址.method=get或post指明提交表單的HTTP方法.可能的值為： post：POST方法在表單的主干包含名稱/值對并且無需包含于action特性的URL中. get：不贊成。GET方法把名稱/值對加在action的URL后面并且把新的URL送至服務器.這是往前兼容的缺省值.這個值由于國際化的原因不贊成使用.enctype=cdata指明用來把表單提交給服務器時(當method值為"post")的互聯網媒體形式.這個特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的結果文檔顯示的位置： _blank ：在一個新的、無名瀏覽器窗口調入指定的文檔； _self ：在指向這個目標的無素的相同的框架中調入文檔； _parent ：把文檔調入當前框的直接的父FRAMESET框中；這個值在當前框沒有父框時等價于_self； _top ：把文檔調入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架)；這個值等價于當前框沒有你框時的_self.
例如：
＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表單將向http://www.yesky.com/test.asp以post的方式提交，提交的結果在新的頁面顯示，數據提交的媒體方式是默認的application/x-www-form-urlencoded方式；
1.2 表單域
表單域包含了文本框、多行文本框、密碼框、隱藏域、復選框、單選框和下拉選擇框等，用于采集用戶的輸入或選擇的數據，下面分別講述這些表單域的代碼格式：
1.2.1 文本框
文本框是一種讓訪問者自己輸入內容的表單對象，通常被用來填寫單個字或者簡短的回答，如姓名、地址等。
代碼格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞
屬性解釋：
type="text"定義單行文本輸入框；
name屬性定義文本框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；
size屬性定義文本框的寬度，單位是單個字符寬度；
maxlength屬性定義最多輸入的字符數。
value屬性定義文本框的初始值
樣例1：
樣例1代碼：＜input type="text" name="example1" size="20" maxlength="15"＞
1.2.2 多行文本框
也是一種讓訪問者自己輸入內容的表單對象，只不過能讓訪問者填寫較長的內容。
代碼格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
屬性解釋：
name屬性定義多行文本框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；
cols屬性定義多行文本框的寬度，單位是單個字符寬度；
rows屬性定義多行文本框的高度，單位是單個字符寬度；
wrap屬性定義輸入內容大于文本域時顯示的方式，可選值如下： 默認值是文本自動換行；當輸入內容超過文本域的右邊界時會自動轉到下一行，而數據在被提交處理時自動換行的地方不會有換行符出現； Off，用來避免文本換行，當輸入的內容超過文本域右邊界時，文本將向左滾動，必須用Return才能將插入點移到下一行； Virtual，允許文本自動換行。當輸入內容超過文本域的右邊界時會自動轉到下一行，而數據在被提交處理時自動換行的地方不會有換行符出現； Physical，讓文本換行，當數據被提交處理時換行符也將被一起提交處理。
樣例2：
樣例2代碼：＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞
1.2.3 密碼框
是一種特殊的文本域，用于輸入密碼。當訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。
代碼格式：＜input type="password" name="..." size="..." maxlength="..."＞
屬性解釋：
type="password"定義密碼框；
name屬性定義密碼框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；
size屬性定義密碼框的寬度，單位是單個字符寬度；
maxlength屬性定義最多輸入的字符數。
樣例3：
樣例3代碼：＜input type="password" name="example3" size="20" maxlength="15"＞
1.2.4 隱藏域
隱藏域是用來收集或發送信息的不可見元素，對于網頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將信息用你設置時定義的名稱和值發送到服務器上。
代碼格式：＜input type="hidden" name="..." value="..."＞
屬性解釋：
type="hidden"定義隱藏域；
name屬性定義隱藏域的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；
value屬性定義隱藏域的值
例如：＜input type="hidden" name="ExPws" value="dd"＞
1.2.5 復選框
復選框允許在待選項中選中一項以上的選項。每個復選框都是一個獨立的元素，都必須有一個唯一的名稱。
代碼格式：＜INPUT type="checkbox" name="..." value="..."＞
屬性解釋：
type="checkbox"定義復選框；
name屬性定義復選框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；
value屬性定義復選框的值
樣例4： yesky.com Chinabyte.com
樣例4代碼：
＜input type="checkbox" name="yesky" value="09"＞yesky.com
＜input type="checkbox" name="Chinabyte" value="08"＞Chinabyte.com
1.2.6 單選框
當需要訪問者在待選項中選擇唯一的答案時，就需要用到單選框了。
代碼格式：＜input type="radio" name="..." value="..."＞
屬性解釋：
type="radio"定義單選框；
name屬性定義單選框的名稱，要保證數據的準確采集，單選框都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；
value屬性定義單選框的值，在同一組中，它們的域值必須是不同的。
樣例5： yesky.com Chinabyte.com
樣例5代碼：
＜input type="radio" name="myFavor" value="1"＞yesky.com
＜input type="radio" name="myFavor" value="2"＞Chinabyte.com
1.2.7 文件上傳框
有時候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。
注意：在使用文件域以前，請先確定你的服務器是否允許匿名上傳文件。表單標簽中必須設置ENCTYPE="multipart/form-data"來確保文件被正確編碼；另外，表單的傳送方式必須設置成POST。
代碼格式：＜input type="file" name="..." size="15" maxlength="100"＞
屬性解釋：
type="file"定義文件上傳框；
name屬性定義文件上傳框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；
size屬性定義文件上傳框的寬度，單位是單個字符寬度；
maxlength屬性定義最多輸入的字符數。
樣例6：
樣例6代碼：＜input type="file" name="myfile" size="15" maxlength="100"＞
1.2.8 下拉選擇框
下拉選擇框允許你在一個有限的空間設置多種選項。
代碼格式：
＜select name="..." size="..." multiple＞
＜option value="..." selected＞...＜/option＞
...
＜/select＞
屬性解釋：
size屬性定義下拉選擇框的行數；
name屬性定義下拉選擇框的名稱；
multiple屬性表示可以多選，如果不設置本屬性，那么只能單選；
value屬性定義選擇項的值；
selected屬性表示默認已經選擇本選項。
樣例7： yesky.com chinabyte.com
樣例7代碼：
＜select name="mySel" size="1"＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜/select＞
樣例8：
yesky.com chinabyte.com internet.com 按Ctrl可以多選
樣例8代碼：
＜select name="mySelt" size="3" multiple＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜option value="3"＞internet.com＜/option＞
＜/select＞
1.3 表單按鈕
表單按鈕控制表單的運作。
1.3.1 提交按鈕
提交按鈕用來將輸入的信息提交到服務器。
代碼格式：＜input type="submit" name="..." value="..."＞
屬性解釋：
type="submit"定義提交按鈕；
name屬性定義提交按鈕的名稱；
value屬性定義按鈕的顯示文字；
樣例9：
樣例9代碼：＜input type="submit" name="mySent" value="發送"＞
1.3.2 復位按鈕
復位按鈕用來重置表單。
代碼格式：＜input type="reset" name="..." value="..."＞
屬性解釋：
type="reset"定義復位按鈕；
name屬性定義復位按鈕的名稱；
value屬性定義按鈕的顯示文字；
樣例10：
樣例10代碼：＜input type="reset" name="myCancle" value="取消"＞
1.3.3 一般按鈕
一般按鈕用來控制其他定義了處理腳本的處理工作。
代碼格式：＜input type="button" name="..." value="..." onClick="..."＞
屬性解釋：
type="button"定義一般按鈕；
name屬性定義一般按鈕的名稱；
value屬性定義按鈕的顯示文字；
onClick屬性，也可以是其它的事件，通過指定腳本函數來定義按鈕的行為；
樣例11：
樣例11代碼：
＜input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"＞
大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。
| 
