HTML-form表單學習筆記

一. post和get方式提交數據的區別

  • 安全性:get提交的數據url可以看得到,post看不到,并且get提交的數據會在瀏覽器的記錄中,安全性不好
  • 提交原理:get是以key=value的形式拼接到url中,post講數據放入http請求體中
  • 數據量:get提交的數據受瀏覽器限制,url不可能拼接無限長,post理論上無限制,受服務器限制
  • 使用場景:get 重在 "要"數據,get得到的數據可以暫時緩存起來, post 重在"給"數據

二.form表單中的常用標簽及其屬性

1.form標簽
<form action="" method="" target="_target" enctype=""></form>

說明:
action:表單提交的地址
method:提交表單的方法,常見的有post,get,(不支持put,patch,delete)
target:在何處打開url,例如_target為在新頁面打開提交的地址
enctype:加密類型,有application/x-www-form-urlencoded ,text/plain ,multipart/form-data

2.input標簽-text類型
<label for="username">用戶名:</label>
<input type="text" placeholder="username" name="username" value="林克">

說明:
<label>標簽的作用:擴大選擇范圍,鼠標點擊用戶名三個字也可以將輸入框變成focus狀態
placeholder:在輸入框中顯示一個提示,沒有其他作用
name: 提交數據時,標識該文本框的key
value:提交數據時,標識該文本框的默認value,修改后value會變成輸入的數據

3.input標簽-submit類型
<input type="submit" value="提交">

說明:
該標簽會顯示一個按鈕,點擊會提交該標簽所在form表單下的數據,value為該按鈕上顯示的字
注: <button>提交</button>和該標簽效果一樣,點擊會提交;而<input type="button" value="提交">點擊不會有提交效果

4.input標簽-radio(單選框),checkbox(復選框)類型
<input type="radio" name="sex" value="boy" checked>
<input type="radio" name="sex" value="girl">
<input type="checkbox" name="hobby" value="籃球" checked>
<input type="checkbox" name="hobby" value="足球">

說明:
name相同的radio即為一組,一組內的單選框只能選擇一個
checked:表示默認選擇的單選框

5.其他input標簽類型
    <input type="date">                             <!--日歷-->
    <input type="file" accept="img/png">            <!--選擇文件,accept設置只能接受該文件類型-->
    <input type="number">                           <!--只能輸入數字-->
    <input type="search">                           <!--輸入完內容,回車即可提交-->
    <input type="email">                            <!--只有輸入的文本為email形式才能提交-->
    <input type="url">                              <!--只有輸入的文本為url形式才能提交-->
    <input type="range">                            <!--范圍選擇條-->
    <input type="color">                            <!--選擇顏色-->
    <input type="reset" value="重置">               <!--重置表單中的所有內容為初始默認值-->
    <input type="hidden" name="csrf" value="66666"> <!--為了解決CSRF安全問題,詳見三.補充-->
6.select標簽
<select name="addr">
    <option value="shanghai">上海</option>
    <option value="shanghai">北京</option>
    <option value="shanghai" selected>南京</option>
</select>

說明:
name:選擇列表的提交的key,value:選擇列表提交的value
option:代表選擇列表的每一項
上海,北京,南京:選擇列表每一項顯示的內容
selected:默認選中的選擇列表項

7.textare標簽
<textare name="comment"> 
此處可以輸入多行內容
</textare>

三.補充

1.語義化HTML5標簽

選擇合適的標簽、使用合理的代碼結構,便于開發者和視覺障礙人士閱讀,同時讓瀏覽器的爬蟲和機器很好地解析。

  • <header>:頁頭
  • <nav>:導航欄
  • <main>:主內容 ,后面一般接 <article>,<section>,<div>
  • <aside>:側邊欄
  • <footer>:頁尾
2.CSRF 攻擊是什么?如何防范?

中文名:跨站請求偽造。其原理是攻擊者構造網站后臺某個功能接口的請求地址,誘導用戶去點擊或者用特殊方法讓該請求地址自動加載。用戶在登錄狀態下這個請求被服務端接收后會被誤以為是用戶合法的操作。對于 GET 形式的接口地址可輕易被攻擊,對于 POST 形式的接口地址也不是百分百安全,攻擊者可誘導用戶進入帶 Form 表單可用POST方式提交參數的頁面。
防范:
服務端在收到路由請求時,生成一個隨機數,在渲染請求頁面時把隨機數埋入頁面(一般埋入 form 表單內,)
1.服務端設置setCookie,把該隨機數作為cookie或者session種入用戶瀏覽器
2.當用戶發送 GET 或者 POST 請求時帶上_csrf_token參數(對于 Form 表單直接提交即可,因為會自動把當3.前表單內所有的 input 提交給后臺,包括_csrf_token)
4.后臺在接受到請求后解析請求的cookie獲取_csrf_token的值,然后和用戶請求提交的_csrf_token做個比較,如果相等表示請求是合法的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,663評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,125評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,506評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,614評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,402評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,934評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,021評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,168評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,690評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,596評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,288評論 5 357
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,027評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,398評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,743評論 2 370

推薦閱讀更多精彩內容

  • <input>標簽 標簽用于搜集用戶信息,根據不同的type屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段...
    _空空閱讀 4,038評論 0 3
  • 1.動手 form 表單table 表格 2. <form>表單元素 1) 簡述: 元素是塊級元素,其開始標簽和結...
    _Dot912閱讀 2,035評論 2 8
  • 主要內容: form表單的作用及常用的input 標簽介紹,GET和 POST的區別。 form表單的作用及常用的...
    苦瓜_6閱讀 711評論 0 1
  • HTML表單HTML表單用于搜集用戶輸入HTML表單常用屬性及說明:屬性描述accept-charset規定在被提...
    Lv_0閱讀 502評論 0 1
  • 1.form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 899評論 0 1