form表單作用及常用input標簽
表單在網頁中主要負責數據采集功能。表單也是用來提交資料捎琐、意見玻熙,規(guī)范流程執(zhí)行過程的格式。
常用input標簽:
a. 文本框:是一種讓訪問者直接輸入內容的表單對象,通常被用來填寫比較簡短的回答儿惫,如姓名澡罚、地址等。
代碼:
<input type="text "name="xx" size="xx" maxlength="xx "value="xx">
屬性:type="text"定義單行文本輸入框肾请;
name屬性定義文本框的名稱留搔,要保證數據的準確采集,必須定義一個獨一無二的名稱铛铁;
size屬性定義文本框的寬度隔显,單位是單個字符寬度;
maxlength屬性定義最多輸入的字符數;
value屬性定義文本框的初始值饵逐。
b. 多行文本框:也是一種讓訪問者自己輸入內容的表單對象括眠,但能讓訪問者填寫較長的內容。
代碼:
<textarea name="xx" cols="xx" wrap="virtual"></textarea>
屬性:name屬性定義多行文本框的名稱倍权,要保證數據的準確采集掷豺,必須定義一個獨一無二的名稱;
cols屬性定義多行文本框的寬度账锹,單位是單個字符寬度萌业;
rows屬性定義多行文本框的高度,單位是單個字符寬度奸柬;
wrap屬性定義輸入內容大于文本域時顯示的方式生年,可選值如下:默認值是文本自動換行;當輸入內容超過文本域的右邊界時會自動轉到下一行廓奕,而數據在被提交處理時自動換行的地方不會有換行符出現抱婉; Off,用來避免文本換行桌粉,當輸入的內容超過文本域右邊界時蒸绩,文本將向左滾動,必須用Return才能將插入點移到下一行铃肯;
Virtual患亿,允許文本自動換行;
Physical押逼,讓文本換行步藕,當數據被提交處理時換行符也將被一起提交處理。
c.密碼框:是一種特殊的文本域挑格,用于輸入密碼咙冗。當訪問者輸入文字時,文字會被星號或其它符號代替漂彤,而輸入的文字會被隱藏雾消。
代碼:
<input type="password" name="xx" size="xx" maxlength="xx">
屬性:type="password"定義密碼框灾搏;
name屬性定義密碼框的名稱,要保證數據的準確采集立润,必須定義一個獨一無二的名稱狂窑;
size屬性定義密碼框的寬度,單位是單個字符寬度范删;
maxlength屬性定義最多輸入的字符數蕾域。
d. 隱藏域:用來收集或發(fā)送信息的不可見元素,對于網頁的訪問者來說到旦,隱藏域是看不見的。當表單被提交時巨缘,隱藏域就會將信息用你設置時定義的名稱和值發(fā)送到服務器上添忘。
代碼:
<input type="hidden" name="xx" value="xx">
屬性:
type="hidden"定義隱藏域;
name屬性定義隱藏域的名稱若锁,要保證數據的準確采集搁骑,必須定義一個獨一無二的名稱;
value屬性定義隱藏域的值又固。
e. 復選框:允許在待選項中選中一項以上的選項仲器。每個復選框都是一個獨立的元素,都必須有一個唯一的名稱仰冠。
代碼:
<input type="checkbox" name="xx" value="xx">
屬性:
type="checkbox"定義復選框乏冀;
name屬性定義復選框的名稱,要保證數據的準確采集洋只,必須定義一個獨一無二的名稱辆沦;
value屬性定義復選框的值。
f. 單選框:當需要訪問者在待選項中選擇唯一的答案時识虚,就需要用到單選框了肢扯。
代碼:
<input type="radio" name="xx" value="xx">
屬性:
type="radio"定義單選框;
name屬性定義單選框的名稱担锤,要保證數據的準確采集蔚晨,單選框都是以組為單位使用的,在同一組中的單選項都必須用同一個名稱肛循;
value屬性定義單選框的值铭腕,在同一組中,它們的域值必須是不同的育拨。
g. 文件上傳框:有時候谨履,需要用戶上傳自己的文件,文件上傳框看上去和其它文本域差不多熬丧,只是它還包含了一個瀏覽按鈕笋粟。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件怀挠。
注意:在使用文件域以前,請先確定你的服務器是否允許匿名上傳文件害捕。表單標簽中必須設置ENCTYPE="multipart/form-data"來確保文件被正確編碼绿淋;另外,表單的傳送方式必須設置成POST尝盼。
代碼:
<input type="file" name="xx" size="xx" maxlength="xx">
屬性:
type="file"定義文件上傳框吞滞;
name屬性定義文件上傳框的名稱,要保證數據的準確采集盾沫,必須定義一個獨一無二的名稱裁赠;
size屬性定義文件上傳框的寬度,單位是單個字符寬度赴精;
maxlength屬性定義最多輸入的字符數佩捞。
h.下拉選擇框:下拉選擇框允許你在一個有限的空間設置多種選項。
代碼:
<select name="xx" size="xx" multiple>
<option value="xx"selected>
</option>
</select>
屬性:
size屬性定義下拉選擇框的行數蕾哟;
name屬性定義下拉選擇框的名稱一忱;
multiple屬性表示可以多選,如果不設置本屬性谭确,那么只能單選帘营;
value屬性定義選擇項的值;
selected屬性表示默認已經選擇本選項逐哈。
i. 提交按鈕:提交按鈕用來將輸入的信息提交到服務器芬迄。
代碼:
<input type="submit" name="xx" value="xx">
屬性:
type="submit"定義提交按鈕;
name屬性定義提交按鈕的名稱鞠眉;
value屬性定義按鈕的顯示文字薯鼠。
j. 復位按鈕:用來重置表單。
代碼:
<input type="reset" name="xx" value="xx">
屬性:
type="reset"定義復位按鈕械蹋;
name屬性定義復位按鈕的名稱出皇;
value屬性定義按鈕的顯示文字。
k. 一般按鈕:用來控制其他定義了處理腳本的處理工作哗戈。
代碼:
<input type="button" name="xx" value="xx" onClick="xx">
屬性:
type="button"定義一般按鈕郊艘;
name屬性定義一般按鈕的名稱;
value屬性定義按鈕的顯示文字唯咬;
onClick屬性纱注,也可以是其它的事件,通過指定腳本函數來定義按鈕的行為胆胰。
post與get
GET方式:
1狞贱、GET方式是以實體的方式得到由請求URL所指定資源的信息,如果請求URL只是一個數據產生過程蜀涨,那么最終要在響應實體中返回的是處理過程的結果所指向的資源瞎嬉,而不是處理過程的描述蝎毡。也就是說,GET的到的信息是資源氧枣,而不是資源的處理過程沐兵。
2、請的求的數據會附加在URL之后便监,以扎谎?分隔URL和傳輸數據,多個參數用&連接烧董。URL編碼格式采用的是ASCII編碼毁靶,而不是Unicode,即所有的非ASCII字符都要編碼之后再傳輸解藻。
3老充、因為URL的長度限制,GET方式傳輸的數據大小有所限制螟左,傳送的數據量不超過2KB。
4觅够、GET方式服務器端用Request.QueryString獲取變量的值胶背。
5、GET方式傳輸的參數安全性低喘先,因為傳輸的數據會顯示在請求的URL中钳吟。
W POST方式:
1、用來向目的服務器發(fā)出請求窘拯,要求它接收被附在請求后的實體红且,并把它當做請求隊列中請求URL所指定資源的附加新子項。
2涤姊、POST方式將表單內各個字段和內容放置在HTML HEADER中一起傳送到Action屬性所指定的URL地址暇番,用戶是看不到這個過程的。
3思喊、POST方式傳送的數據量比較大壁酬,一般被默認為沒有限制,但是根據IIS的配置恨课,傳輸量也是不同的舆乔。
4、POST方式在服務器端用Request.Form獲取提交的數據剂公。
5希俩、POST方式傳輸的數據安全性較高,因為數據傳輸不是明顯顯示的纲辽。
總結:POST和GET方式的安全性是相對的颜武,另外也要看是從哪個角度來看的璃搜。從數據傳輸過程方面來看,POST方式是更加安全的盒刚,但是從對服務器數據的操作來看腺劣,POST方式的安全性又是比較低的。即使是傳輸過程用POST來執(zhí)行因块,安全性也是相對的橘原,如果了解HTTP協議漏洞,通過攔截發(fā)送的數據包涡上,同樣可以修改交互數據趾断,所以這里的安全不是絕對的。
input中name的作用
用途1: 作為可與服務器交互數據的HTML元素的服務器端的標示吩愧,比如input芋酌、select、textarea雁佳、和button等脐帝。我們可以在服務器端根據其Name通過Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分組糖权,我們知道radio button控件在同一個分組類堵腹,check操作是mutex的,同一時間只能選中一個radio星澳,這個分組就是根據相同的Name屬性來實現的疚顷。
用途3: 建立頁面中的錨點,我們知道link是獲得一個頁面超級鏈接禁偎,如果不用href屬性腿堤,而改用Name,如:如暖,我們就獲得了一個頁面錨點笆檀。
用途4: 作為對象的Identity,如Applet装处、Object误债、Embed等元素。比如在Applet對象實例中妄迁,我們將使用其Name來引用該對象寝蹈。
用途5: 在IMG元素和MAP元素之間關聯的時候,如果要定義IMG的熱點區(qū)域登淘,需要使用其屬性usemap箫老,使usemap="#name"(被關聯的MAP元素的Name)。
用途6: 某些特定元素的屬性黔州,如attribute耍鬓,meta和param阔籽。例如為Object定義參數或Meta中。
placeholder 屬性
占位符


type=hidden隱藏域
隱藏域在頁面中對于用戶是不可見的牲蜀,在表單中插入隱藏域的目的在于收集或發(fā)送信息笆制,以利于被處理表單的程序所使用
(隱藏只是在網頁頁面上面不顯示輸入框,但是雖然隱藏了涣达,還是具有form傳值功能在辆。
一般用來傳值,而不必讓用戶看到度苔。
作用:
1 隱藏域在頁面中對于用戶是不可見的匆篓,在表單中插入隱藏域的目的在于收集或發(fā)送信息,以利于被處理表單的程序所使用寇窑。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候鸦概,隱藏域的信息也被一起發(fā)送到服務器。
2 有些時候我們要給用戶一信息甩骏,讓他在提交表單時提交上來以確定用戶身份窗市,如sessionkey,等等.當然這些東西也能用cookie實現饮笛,但使用隱藏域就簡單的多了.而且不會有瀏覽器不支持谨设,用戶禁用cookie的煩惱。
3 有些時候一個form里有多個提交按鈕缎浇,怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢?我們就可以寫一個隱藏域赴肚,然后在每一個按鈕處加上
onclick="document.form.command.value="xx""
然后我們接到數據后先檢查command的值就會知道用戶是按的那個按鈕提交上來的素跺。
4 有時候一個網頁中有多個form,我們知道多個form是不能同時提交的誉券,但有時這些form確實相互作用指厌,我們就可以在form中添加隱藏域來使它們聯系起來。
5js不支持全局變量踊跟,但有時我們必須用全局變量踩验,我們就可以把值先存在隱藏域里,它的值就不會丟失了商玫。
6 還有個例子箕憾,比如按一個按鈕彈出四個小窗口,當點擊其中的一個小窗口時其他三個自動關閉.可是IE不支持小窗口相互調用拳昌,所以只有在父窗口寫個隱藏域袭异,當小窗口看到那個隱藏域的值是close時就自己關掉。