本專題從最基礎的表單知識,到表單的高級應用,讓你有一個比較全面地認識,相信你在讀完本專題以後,一定會對錶單非常熟悉。 一、表單概述 表單,在網頁中的作用不可小視,主要負責數據採集的功能,比如你可以採集訪問者的名字和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')">
分析: 爲什麼右邊沒有空隙呢,看看右邊的代碼就知道了。 <table width="100%" border="1" cellspacing="1" cellpadding="1"> <tr> <form name="form3" method="post" action=""> <td> <input type="text" name="textfield2"><br> <input type="submit" name="Submit22" value="Submit"> 這裏沒有空隙 </td> </form> </tr> </table> 也就是說,把<form>標籤放到<tr>和<td>中間,對應的</form>放在</td>和</tr>中間! 4.用Email提交表單 (只適合Outlook用戶,不適合Foxmail用戶) 樣例25: Email提交表單 分析: 看看我們的表單<form>標籤就知道了,格式如下: <form name="..." action="mailto:[email protected] ?Subject=表單反饋" enctype="text/plain" method="post">...</form> 這裏的mailto:後面加上要接受信息的地址,?Subject是設置默認的Email標題,enctype="text/plain"是必要的,表示信息以文本方式提交,沒有任何加密,所以這種方法常用於沒有Asp/Php/cgi支持的空間,也只是一個代用的方法,用戶必須安裝Outlook,並且是默認的郵件程序,才能順利執行提交,據說TheBat!也可以,大家可以試驗一下。