有關form表單的一些基礎知識

1、form表單有什么用像街?有哪些常用的input標簽黎棠,分別有什么作用晋渺?

表單是web頁面與服務器交互過程中最重要的信息來源,它會搜集用戶的輸入脓斩,并以提交的方式來傳輸?shù)椒掌魃线M行處理并可能返回反饋的一個媒介木西,從而來實現(xiàn)人機交互。
常見的input標簽及作用有下面幾個

<input type="text">  單行文本輸入框
<input type="password">  密碼輸入框
<input type="checkbox">  復選框
<input type="radio">  單選框
<input type="file">  上傳按鈕
<input type="submit">  提交按鈕
<input type="button">  按鈕(也可以寫為<button>內容</button>)
<input type="reset">  重置按鈕
<select>  下拉單選
  <option></option>
  <option></option>
</select>
<textarea></textarea> 多行文本輸入框
<input type="number">  數(shù)字輸入框
<input type="hidden"> 隱藏域

2随静、form的method屬性get和post的區(qū)別是什么八千?

1.get方法是將提交內容拼成一個字符串進行提交,提交的輸入項name和value值會暴露(但我們不能夠憑這一點就直接判定post方法比get方法安全)燎猛,而且在內容非常龐雜的時候恋捆,因為瀏覽器輸入域名的位置有字數(shù)限制可能會截取一部分,不能完全提交重绷,而post方法就沒有這一缺點
2.get請求的URL可以被瀏覽器緩存沸停;post的請求不能夠被瀏覽器緩存:這涉及到一個使用場景的問題,如果用戶的輸入不是非常重要機密的信息就比如性別年齡這一種昭卓,當下次用戶還是使用同一瀏覽器進行訪問這個網(wǎng)站的時候愤钾,使用get方法可能會更合適一些。
3.get表達的是一種冪等的候醒,只讀的能颁,純粹的操作,即它除了返回結果不應該會產生其它副作用(如寫數(shù)據(jù)庫)倒淫,因此絕大部分get請求(通常超過90%)都直接被CDN緩存了伙菊,這能大大減少web服務器的負擔。而post所表達的語義是非冪等的敌土,有副作用的操作镜硕,所以必須交由web服務器處理。(關于冪等的概念:Idempotent - 冪等 冪等的概念是指同一個請求方法執(zhí)行多次和僅執(zhí)行一次的效果完全相同纯赎。按照RFC規(guī)范谦疾,PUT,DELETE和安全方法都是冪等的犬金。同樣念恍,這也僅僅是規(guī)范,服務端實現(xiàn)是否冪等是無法確保的晚顷。)

3峰伙、在input中,name有什么作用该默?

name是作為inout的一個屬性存在的瞳氓,在處理表單時,我們的關注點為用戶填寫的信息栓袖,此時匣摘,表單的每一項的name都作為我們提取到的信息的一個”標簽“店诗,可以理解為每個分類的一個標簽名稱,每一個表單項都必須要有name值音榜,否則這個表單無法進行任何操作庞瘸,相當屬于一個廢的表單。有一個需要注意的點:在單選按鈕組中赠叼,我們的需求一般是多個中選擇一個合理的擦囊,那么這個時候這個單選按鈕組無論有幾個<input type="radio">它們的name都必須一致。而提交的內容顯示形式為:name:value的形式嘴办。

4瞬场、radio如何分組?

這個問題即為上個問題末尾所說的涧郊,一組單選按鈕需要選擇一個時贯被,那么無論有幾個<input type="radio">它們的name都必須一致。以下是個示例:

<label>請選擇性別</label>
<input type="radio" value="男"  name="gender">男
<input type="radio" value="女"  name="gender">女
<label>請選擇晚飯吃什么</label>
<input type="radio" value="one"  name="dinner">火鍋
<input type="radio" value="two"  name="dinner">披薩
<input type="radio" value="three"  name="dinner">烤魚
<input type="radio" value="four"  name="dinner">沙拉

5底燎、placeholder有什么作用刃榨?

我們經(jīng)常會遇到一些表單沒有l(wèi)abel提示項,這個時候双仍,表單可以用placeholder來對用戶進行提醒,這一個輸入框是需要輸入什么樣的內容桌吃,如下圖紅框內容:


demo.png

6朱沃、type=hidden隱藏域有什么作用?

根據(jù)我的個人少少的經(jīng)驗所得,一般后端開發(fā)會經(jīng)常使用這個表單項茅诱。隱藏域可以存數(shù)一些數(shù)據(jù),在頁面上是不做展示的,這個有一個比較好的作用是可以預防csrf攻擊逗物,給這個隱藏域賦一個值,當用戶點擊提交時后臺進行驗證隱藏域的內容是否是我們定義的值瑟俭,如果是翎卓,那么這個表單是正常的,如果沒有隱藏域或者隱藏域的位置不對摆寄,內容不對失暴,那么我們需要警惕是否被攻擊。

7微饥、HTML表單的用法

當頁面上有表單項的時候逗扒,能夠提交的前提是這一部分表單必須有<form></form>標簽包裹,否則不能提交G烽佟>丶纭!原因是:表單提交需要有一個提交地址以及提交方式肃续,也就是我們需要給form標簽規(guī)定其method(提交方式)和action(提交地址)以便服務器能夠處理黍檩。內容中的input中每一種表單項需要給每一個規(guī)定其value值(有一部分value初始值可有可無叉袍,比如說<input type="text">;當然<input type="password">是沒必要有初始值的也不建議有刽酱;select中的option每一個需要有一個value值以便進行處理喳逛;<input type="radio"><input type="checkbox">的value值是必須存在的)和name值(必需)。最后我們需要一個提交按鈕肛跌,一般是用<input type="submit">來進行提交的艺配。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市衍慎,隨后出現(xiàn)的幾起案子转唉,更是在濱河造成了極大的恐慌,老刑警劉巖稳捆,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赠法,死亡現(xiàn)場離奇詭異,居然都是意外死亡乔夯,警方通過查閱死者的電腦和手機砖织,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來末荐,“玉大人侧纯,你說我怎么就攤上這事〖自啵” “怎么了眶熬?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長块请。 經(jīng)常有香客問我娜氏,道長,這世上最難降的妖魔是什么墩新? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任贸弥,我火速辦了婚禮,結果婚禮上海渊,老公的妹妹穿的比我還像新娘绵疲。我一直安慰自己,他們只是感情好切省,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布最岗。 她就那樣靜靜地躺著,像睡著了一般朝捆。 火紅的嫁衣襯著肌膚如雪般渡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機與錄音驯用,去河邊找鬼脸秽。 笑死,一個胖子當著我的面吹牛蝴乔,可吹牛的內容都是我干的记餐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼薇正,長吁一口氣:“原來是場噩夢啊……” “哼片酝!你這毒婦竟也來了?” 一聲冷哼從身側響起挖腰,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤雕沿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后猴仑,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體审轮,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年辽俗,在試婚紗的時候發(fā)現(xiàn)自己被綠了疾渣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡崖飘,死狀恐怖榴捡,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情朱浴,我是刑警寧澤薄疚,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站赊琳,受9級特大地震影響,放射性物質發(fā)生泄漏砰碴。R本人自食惡果不足惜躏筏,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望呈枉。 院中可真熱鬧趁尼,春花似錦、人聲如沸猖辫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽啃憎。三九已至芝囤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背悯姊。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工羡藐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人悯许。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓仆嗦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親先壕。 傳聞我的和親對象是個殘疾皇子瘩扼,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)垃僚,斷路器集绰,智...
    卡卡羅2017閱讀 134,659評論 18 139
  • 1.form表單有什么作用?有哪些常用的input 標簽冈在,分別有什么作用倒慧? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 881評論 0 1
  • 本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.在HTML中,表單是由form元素來表示的包券,但是在jav...
    linfree閱讀 2,165評論 3 17
  • <input>標簽 標簽用于搜集用戶信息纫谅,根據(jù)不同的type屬性值,輸入字段擁有很多種形式溅固。輸入字段可以是文本字段...
    _空空閱讀 4,024評論 0 3
  • 無聊的上班時間接到茜茜姑娘的電話: “我boss在你公司附近開庭,得2個小時亮元,我馬上到你公司了猛计。” “嗯爆捞,好奉瘤。” ...
    小主來了閱讀 468評論 0 1