form表單作用及常用input標簽
表單在網(wǎng)頁中主要負責(zé)數(shù)據(jù)采集功能。表單也是用來提交資料、意見,規(guī)范流程執(zhí)行過程的格式。
常用input標簽:
a. 文本框:是一種讓訪問者直接輸入內(nèi)容的表單對象,通常被用來填寫比較簡短的回答,如姓名、地址等。
代碼:
<input type="text "name="xx" size="xx" maxlength="xx "value="xx">
屬性:type="text"定義單行文本輸入框;
name屬性定義文本框的名稱,要保證數(shù)據(jù)的準確采集,必須定義一個獨一無二的名稱;
size屬性定義文本框的寬度,單位是單個字符寬度;
maxlength屬性定義最多輸入的字符數(shù);
value屬性定義文本框的初始值。
b. 多行文本框:也是一種讓訪問者自己輸入內(nèi)容的表單對象,但能讓訪問者填寫較長的內(nèi)容。
代碼:
<textarea name="xx" cols="xx" wrap="virtual"></textarea>
屬性:name屬性定義多行文本框的名稱,要保證數(shù)據(jù)的準確采集,必須定義一個獨一無二的名稱;
cols屬性定義多行文本框的寬度,單位是單個字符寬度;
rows屬性定義多行文本框的高度,單位是單個字符寬度;
wrap屬性定義輸入內(nèi)容大于文本域時顯示的方式,可選值如下:默認值是文本自動換行;當輸入內(nèi)容超過文本域的右邊界時會自動轉(zhuǎn)到下一行,而數(shù)據(jù)在被提交處理時自動換行的地方不會有換行符出現(xiàn); Off,用來避免文本換行,當輸入的內(nèi)容超過文本域右邊界時,文本將向左滾動,必須用Return才能將插入點移到下一行;
Virtual,允許文本自動換行;
Physical,讓文本換行,當數(shù)據(jù)被提交處理時換行符也將被一起提交處理。
c.密碼框:是一種特殊的文本域,用于輸入密碼。當訪問者輸入文字時,文字會被星號或其它符號代替,而輸入的文字會被隱藏。
代碼:
<input type="password" name="xx" size="xx" maxlength="xx">
屬性:type="password"定義密碼框;
name屬性定義密碼框的名稱,要保證數(shù)據(jù)的準確采集,必須定義一個獨一無二的名稱;
size屬性定義密碼框的寬度,單位是單個字符寬度;
maxlength屬性定義最多輸入的字符數(shù)。
d. 隱藏域:用來收集或發(fā)送信息的不可見元素,對于網(wǎng)頁的訪問者來說,隱藏域是看不見的。當表單被提交時,隱藏域就會將信息用你設(shè)置時定義的名稱和值發(fā)送到服務(wù)器上。
代碼:
<input type="hidden" name="xx" value="xx">
屬性:
type="hidden"定義隱藏域;
name屬性定義隱藏域的名稱,要保證數(shù)據(jù)的準確采集,必須定義一個獨一無二的名稱;
value屬性定義隱藏域的值。
e. 復(fù)選框:允許在待選項中選中一項以上的選項。每個復(fù)選框都是一個獨立的元素,都必須有一個唯一的名稱。
代碼:
<input type="checkbox" name="xx" value="xx">
屬性:
type="checkbox"定義復(fù)選框;
name屬性定義復(fù)選框的名稱,要保證數(shù)據(jù)的準確采集,必須定義一個獨一無二的名稱;
value屬性定義復(fù)選框的值。
f. 單選框:當需要訪問者在待選項中選擇唯一的答案時,就需要用到單選框了。
代碼:
<input type="radio" name="xx" value="xx">
屬性:
type="radio"定義單選框;
name屬性定義單選框的名稱,要保證數(shù)據(jù)的準確采集,單選框都是以組為單位使用的,在同一組中的單選項都必須用同一個名稱;
value屬性定義單選框的值,在同一組中,它們的域值必須是不同的。
g. 文件上傳框:有時候,需要用戶上傳自己的文件,文件上傳框看上去和其它文本域差不多,只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。
注意:在使用文件域以前,請先確定你的服務(wù)器是否允許匿名上傳文件。表單標簽中必須設(shè)置ENCTYPE="multipart/form-data"來確保文件被正確編碼;另外,表單的傳送方式必須設(shè)置成POST。
代碼:
<input type="file" name="xx" size="xx" maxlength="xx">
屬性:
type="file"定義文件上傳框;
name屬性定義文件上傳框的名稱,要保證數(shù)據(jù)的準確采集,必須定義一個獨一無二的名稱;
size屬性定義文件上傳框的寬度,單位是單個字符寬度;
maxlength屬性定義最多輸入的字符數(shù)。
h.下拉選擇框:下拉選擇框允許你在一個有限的空間設(shè)置多種選項。
代碼:
<select name="xx" size="xx" multiple>
<option value="xx"selected>
</option>
</select>
屬性:
size屬性定義下拉選擇框的行數(shù);
name屬性定義下拉選擇框的名稱;
multiple屬性表示可以多選,如果不設(shè)置本屬性,那么只能單選;
value屬性定義選擇項的值;
selected屬性表示默認已經(jīng)選擇本選項。
i. 提交按鈕:提交按鈕用來將輸入的信息提交到服務(wù)器。
代碼:
<input type="submit" name="xx" value="xx">
屬性:
type="submit"定義提交按鈕;
name屬性定義提交按鈕的名稱;
value屬性定義按鈕的顯示文字。
j. 復(fù)位按鈕:用來重置表單。
代碼:
<input type="reset" name="xx" value="xx">
屬性:
type="reset"定義復(fù)位按鈕;
name屬性定義復(fù)位按鈕的名稱;
value屬性定義按鈕的顯示文字。
k. 一般按鈕:用來控制其他定義了處理腳本的處理工作。
代碼:
<input type="button" name="xx" value="xx" onClick="xx">
屬性:
type="button"定義一般按鈕;
name屬性定義一般按鈕的名稱;
value屬性定義按鈕的顯示文字;
onClick屬性,也可以是其它的事件,通過指定腳本函數(shù)來定義按鈕的行為。
post與get
GET方式:
1、GET方式是以實體的方式得到由請求URL所指定資源的信息,如果請求URL只是一個數(shù)據(jù)產(chǎn)生過程,那么最終要在響應(yīng)實體中返回的是處理過程的結(jié)果所指向的資源,而不是處理過程的描述。也就是說,GET的到的信息是資源,而不是資源的處理過程。
2、請的求的數(shù)據(jù)會附加在URL之后,以?分隔URL和傳輸數(shù)據(jù),多個參數(shù)用&連接。URL編碼格式采用的是ASCII編碼,而不是Unicode,即所有的非ASCII字符都要編碼之后再傳輸。
3、因為URL的長度限制,GET方式傳輸?shù)臄?shù)據(jù)大小有所限制,傳送的數(shù)據(jù)量不超過2KB。
4、GET方式服務(wù)器端用Request.QueryString獲取變量的值。
5、GET方式傳輸?shù)膮?shù)安全性低,因為傳輸?shù)臄?shù)據(jù)會顯示在請求的URL中。
W POST方式:
1、用來向目的服務(wù)器發(fā)出請求,要求它接收被附在請求后的實體,并把它當做請求隊列中請求URL所指定資源的附加新子項。
2、POST方式將表單內(nèi)各個字段和內(nèi)容放置在HTML HEADER中一起傳送到Action屬性所指定的URL地址,用戶是看不到這個過程的。
3、POST方式傳送的數(shù)據(jù)量比較大,一般被默認為沒有限制,但是根據(jù)IIS的配置,傳輸量也是不同的。
4、POST方式在服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。
5、POST方式傳輸?shù)臄?shù)據(jù)安全性較高,因為數(shù)據(jù)傳輸不是明顯顯示的。
總結(jié):POST和GET方式的安全性是相對的,另外也要看是從哪個角度來看的。從數(shù)據(jù)傳輸過程方面來看,POST方式是更加安全的,但是從對服務(wù)器數(shù)據(jù)的操作來看,POST方式的安全性又是比較低的。即使是傳輸過程用POST來執(zhí)行,安全性也是相對的,如果了解HTTP協(xié)議漏洞,通過攔截發(fā)送的數(shù)據(jù)包,同樣可以修改交互數(shù)據(jù),所以這里的安全不是絕對的。
input中name的作用
用途1: 作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標示,比如input、select、textarea、和button等。我們可以在服務(wù)器端根據(jù)其Name通過Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分組,我們知道radio button控件在同一個分組類,check操作是mutex的,同一時間只能選中一個radio,這個分組就是根據(jù)相同的Name屬性來實現(xiàn)的。
用途3: 建立頁面中的錨點,我們知道link是獲得一個頁面超級鏈接,如果不用href屬性,而改用Name,如:,我們就獲得了一個頁面錨點。
用途4: 作為對象的Identity,如Applet、Object、Embed等元素。比如在Applet對象實例中,我們將使用其Name來引用該對象。
用途5: 在IMG元素和MAP元素之間關(guān)聯(lián)的時候,如果要定義IMG的熱點區(qū)域,需要使用其屬性usemap,使usemap="#name"(被關(guān)聯(lián)的MAP元素的Name)。
用途6: 某些特定元素的屬性,如attribute,meta和param。例如為Object定義參數(shù)或Meta中。
placeholder 屬性
占位符


type=hidden隱藏域
隱藏域在頁面中對于用戶是不可見的,在表單中插入隱藏域的目的在于收集或發(fā)送信息,以利于被處理表單的程序所使用
(隱藏只是在網(wǎng)頁頁面上面不顯示輸入框,但是雖然隱藏了,還是具有form傳值功能。
一般用來傳值,而不必讓用戶看到。
作用:
1 隱藏域在頁面中對于用戶是不可見的,在表單中插入隱藏域的目的在于收集或發(fā)送信息,以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候,隱藏域的信息也被一起發(fā)送到服務(wù)器。
2 有些時候我們要給用戶一信息,讓他在提交表單時提交上來以確定用戶身份,如sessionkey,等等.當然這些東西也能用cookie實現(xiàn),但使用隱藏域就簡單的多了.而且不會有瀏覽器不支持,用戶禁用cookie的煩惱。
3 有些時候一個form里有多個提交按鈕,怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢?我們就可以寫一個隱藏域,然后在每一個按鈕處加上
onclick="document.form.command.value="xx""
然后我們接到數(shù)據(jù)后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
4 有時候一個網(wǎng)頁中有多個form,我們知道多個form是不能同時提交的,但有時這些form確實相互作用,我們就可以在form中添加隱藏域來使它們聯(lián)系起來。
5js不支持全局變量,但有時我們必須用全局變量,我們就可以把值先存在隱藏域里,它的值就不會丟失了。
6 還有個例子,比如按一個按鈕彈出四個小窗口,當點擊其中的一個小窗口時其他三個自動關(guān)閉.可是IE不支持小窗口相互調(diào)用,所以只有在父窗口寫個隱藏域,當小窗口看到那個隱藏域的值是close時就自己關(guān)掉。