例如:
<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屬性定義輸入內容大於文本域時顯示的方式,可選值如下:
樣例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:
樣例7代碼:
<select name="mySel" size="1">
<option value="1" selected>yesky.com</option>
<option value="d2">chinabyte.com</option>
</select>
樣例8:
按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')">