form表單

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 屬性

占位符

![](http://upload-images.jianshu.io/upload_images/7279690-bc0dd4047eb834c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/7279690-9afa06e8df80c53a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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時就自己關掉。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末炬藤,一起剝皮案震驚了整個濱河市御铃,隨后出現的幾起案子碴里,更是在濱河造成了極大的恐慌,老刑警劉巖上真,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咬腋,死亡現場離奇詭異,居然都是意外死亡睡互,警方通過查閱死者的電腦和手機根竿,發(fā)現死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來湃缎,“玉大人犀填,你說我怎么就攤上這事∩のィ” “怎么了九巡?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蹂季。 經常有香客問我冕广,道長,這世上最難降的妖魔是什么偿洁? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任撒汉,我火速辦了婚禮,結果婚禮上涕滋,老公的妹妹穿的比我還像新娘睬辐。我一直安慰自己,他們只是感情好宾肺,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布溯饵。 她就那樣靜靜地躺著,像睡著了一般锨用。 火紅的嫁衣襯著肌膚如雪丰刊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天增拥,我揣著相機與錄音啄巧,去河邊找鬼。 笑死掌栅,一個胖子當著我的面吹牛秩仆,可吹牛的內容都是我干的。 我是一名探鬼主播渣玲,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼逗概,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起逾苫,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤卿城,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后铅搓,有當地人在樹林里發(fā)現了一具尸體瑟押,經...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年星掰,在試婚紗的時候發(fā)現自己被綠了多望。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡氢烘,死狀恐怖怀偷,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情播玖,我是刑警寧澤椎工,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站蜀踏,受9級特大地震影響维蒙,放射性物質發(fā)生泄漏。R本人自食惡果不足惜果覆,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一颅痊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧局待,春花似錦斑响、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至重绷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間膜毁,已是汗流浹背昭卓。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瘟滨,地道東北人候醒。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像杂瘸,于是被迫代替她去往敵國和親倒淫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內容

  • 1.form表單有什么作用败玉?有哪些常用的input 標簽敌土,分別有什么作用镜硕? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 884評論 0 1
  • 什么是FORM表單: 表單是用來提交資料、意見返干,規(guī)范流程執(zhí)行過程的格式兴枯。表單在網頁中主要負責數據采集功能。一個表單...
    PYFang閱讀 1,137評論 0 0
  • form表單有什么作用矩欠?有哪些常用的input 標簽财剖,分別有什么作用? 標簽用于為用戶創(chuàng)建HTML表單癌淮,并向服務器...
    zx9426閱讀 599評論 0 1
  • form表單有什么作用躺坟? Form 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務器傳輸數據乳蓄,從而實現用戶與...
    饑人谷_溯彬閱讀 704評論 0 0
  • 文/Mission小可兒 黑夜斑涑取! 你賜予我宇宙般的牢籠。 靈魂鞍列濉抗俄! 你給我?guī)狭擞肋h的鐐銬。 我渴望的是音榜, 那無...
    Mission小可兒閱讀 182評論 6 2