與我們平時填寫的紙質表單一樣，HTML表單用于搜集不同類型的用戶輸入。
表單是一個包含表單元素的區域，表單元素是允許用戶在表單中(比如：文本域、下拉列表、單選框、復選框等)輸入信息的元素。
demo:
<form action="#" method="get">
<label for="input_name">用戶名</label>
<input type="text" id="input_name" name="name">
<br/>
<label for="input_password">密碼</label>
<input type="password" id="input_password" name="password">
<br/>
<button>提交</button>
</form>
form標簽里面有兩個重要的屬性：action和method
- action是表單提交的地址；
- method表示表單提交的方式，get或者post；
get和post的區別
- get方式會將數據放在URL中。
- 使用？分隔url和參數；
- & 分隔參數；
- url的長度有限制，所以傳遞的數據不能太多；
- post方式會將傳輸的數據放在http正文。
| 操作方式 | 數據位置 | 明文密文 | 數據安全 | 長度限制 | 應用場景 |
|---|---|---|---|---|---|
| GET | http包頭 | 明文 | 不安全 | 長度較小 | 查詢數據 |
| POST | http正文 | 可明可密 | 安全 | 支持大數據傳輸 | 修改數據 |
總結：查詢數據，使用GET；修改、傳遞數據使用POST；安全性高、傳遞較慢的使用POST，高速、傳遞數據少、不要求安全性的使用GET。
form
form標簽時表單的外殼，主要有四個屬性
- action：表單提交的地址；
- method：表單提交的方式；
- target：在何處打開action；
-
enctype：
- application/x-www-form-urlencoded:在發送前編碼所有字符(默認)；
- text/plain:空格轉換成" + "加號，但不對特殊字符編碼；
- multipart/form-data:使用包含文件上傳控件的表單時，必須使用該值；
text
默認的文本輸入框，默認不能換行。例：
<label for="username">用戶名</label>
<input type="text" name="username" id="username">
text
password
頁面不會以明文的形式展示的輸入框，自動以小圓點顯示。
<label for="password">密碼</label>
<input type="password" name="password" id="password">
password
checkbox
多選框，value值需要手動設置，同一組使用設置相同的name屬性標識；
<label>愛好</label>
<br>
<input type="checkbox" name="hobby" value="read" id="read">
<label for="read">閱讀</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音樂</label>
<input type="checkbox" name="hobby" value="basketball" id="basketball">
<label for="basketball">籃球</label>
checkbox
radio
單選框，和checkbox類似，同意組別的radio使用相同的name屬性；但是只能選中一個。
<label>性別：</label>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
radio
file
打開文件選擇對話框
- accept屬性， 只能選中對應的文件。
<input type="file" name="open_file" accept="image/png">
file
select
下拉選擇框，使用selected確認默認顯示的標簽元素
<select name="city" id="choose_city">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">廣州</option>
</select>
select
textarea
多行文本
<textarea name="article" id="article_1" cols="30" rows="10"></textarea>
textarea
hidden
hidden隱藏用戶看不見的參數，可以被form提交到服務器。這個標簽可以做一些很酷的事情，比如避免csrf攻擊；
<input type="hidden" name="hidden_value" value="tom">
button、submit、reset
<input type="reset" value="清空"> <!-- 清空表單的輸入項 -->
<input type="submit" value="提交"> <!-- 提交表單按鈕 -->
作業5
- 在input里，name有什么作用？
- 作為可與服務器交互數據的HTML元素的服務器端的標示。例如：
使用get方式傳遞數據時的url地址：
www.xxx.com?username=tom&password=123456
<!-- 其中，username和password就是input中的name屬性值。 -->
- 將radio和checkbox等標簽內容分組。
- radio如何分組
給radio設置相同的name
<label>性別：</label>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
- placeholder屬性有什么作用？
w3school給的定義和解釋如下：
屬性提供可描述輸入字段預期值的提示信息（hint）
最直觀的感受是，輸入框或者其他類型的表單展現會有提示信息填充在表單中，并且輸入框獲得焦點后會自動消失。
- CSRF是什么？如何防止？
SRF全名是Cross-site request forgery，中文名稱是跨站請求偽造。通過偽造用戶請求，獲取網站信息的操作。
預防措施：- 驗證Referer；
- 使用驗證碼；
- 增加token驗證
- GET請求， token 將附在請求地址之后，這樣 URL 就變成 http://url?csrftoken=tokenvalue。
- POST 要在 form 的最后加上 <input type="hidden" name="csrftoken" value="tokenvalue"/>，這樣就把token以參數的形式加入請求了。
- type=hidden隱藏域有什么作用? 舉例說明
hidden隱藏域可以將某些不想要讓用戶看見的屬性藏起來，也可以用來防范CSRF攻擊。
在hidden中隱藏需要校驗的token，form提交時會自動將hidden中的內容也提交到服務器。這樣我們就能在后臺校驗token是否正確，從而檢查是不是CSRF攻擊了。
再有就是隱藏屬性，比如頁面登錄的用戶id是1，每次發送請求都要檢查用戶的id，但是又不想被用戶看到這個隱藏的屬性，就使用hidden把id這個屬性當成普通屬性值藏起來。
