表單
1、表單就是讓用戶提交數(shù)據(jù)到服務(wù)器的。用在收集用戶數(shù)據(jù)的場景。
2、表單的標(biāo)簽是form。最重要的兩個屬性，action和method。
3、Action是一個url，用戶提交的數(shù)據(jù)由哪個頁面/服務(wù)器處理。
4、Method 是表示是用get方式提交還是post方式提交。
5、表單里面可以設(shè)計一些表單項或者一些控件。
Get和Post
1、認(rèn)為get是一個比較安全的操作，是從服務(wù)器拿數(shù)據(jù)，每次操作返回的數(shù)據(jù)是一樣的。Get請求在瀏覽器、運營商，會在中間緩存。在HTTP協(xié)議中，URL對get請求的處理是，把請求放到路徑中一次性把數(shù)據(jù)發(fā)到服務(wù)器。
2、Post是向服務(wù)器提交數(shù)據(jù)，每次提交不一樣，會修改服務(wù)器數(shù)據(jù)，不安全。瀏覽器不會緩存任何post數(shù)據(jù)。POST的內(nèi)容先被編碼，再放到url的body里面，再去提交。【head和Body是分兩次發(fā)送的】
3、關(guān)于明文/密文的解釋： 一個是在URL里面，一個在HTTP的body里面。【其實編碼的方式是一樣的，只是能不能在url中看到而已】
URL編碼
URL編碼：轉(zhuǎn)義的方式比較特別，把少數(shù)的特殊字符進(jìn)行替換。
假如用戶名有空格，如果是GET，在URL中會被轉(zhuǎn)義。(不過現(xiàn)在新的方式好像是把空格替換為了+加號)【在服務(wù)器端處理的時候，復(fù)原用戶的輸入，可能需要處理加號或者是這種特殊的URL編碼】
那么需要根據(jù)服務(wù)器使用的語言不同來做相應(yīng)的處理，比如JS里面用decodeURIComponent來處理。
HTTP Method
1、GET
2、POST
3、HEAD
4、PUT
5、DELETE
6、OPTIONS
HEAD：Head方法不會有body返回。
DELETE：刪除
OPTIONS：options也不會有具體的body返回?！緊ptions的使用場景：假設(shè)有個跨域請求，服務(wù)器發(fā)送options來詢問這個請求是否可以跨越】
單行文本框
1、標(biāo)簽：input
2、使用：name 很重要，是向服務(wù)器發(fā)送的。在html中寫一個value，代表的是默認(rèn)值。
屬性1：placeholder，灰色的文字來提示用戶該輸入什么。
屬性2：autofocus：讓用戶focus在自己要輸入的地方。
密碼
密碼：type=password，用小圓點顯示。（移動瀏覽器上會顯示最后一個字母，PC上都是小圓點）
多行文本框
<textarea cols="10" rows="20">
輸入驗證[required pattern type nocalidate]
在HTML5之前，只能用jsp來驗證，在html5中，可以驗證一些基本規(guī)則。
(1)required實現(xiàn) <input required minlength="9"> Required表示必填。這是一個布爾型的語言。
(2)使用正則表達(dá)式來驗證：<input pattern="">Pattern是一個正則表達(dá)式，驗證用戶數(shù)輸入的內(nèi)容是否符合正則表達(dá)式。
(3)內(nèi)置type來驗證：<input type="url">Type最主要的作用，在可用性上做一些輔助。 對于讀屏軟件，移動端的布局展示是有區(qū)別的。比如type=url，會展示http://， type=email，移動端的@符號會展示出來。最重要的輸入驗證，只有輸入正確的type才能驗證提交。
(4)Novalidate:如果在JS中實驗了驗證規(guī)則，一般就在html中寫novalidate。<form action="/index" novalidate>
radio
1、radio：一般input輸入框是建議使用其他的方式，比如選擇框，就比較好。
2、如果name是相同的，那這三個就屬于一個radio group，那么選中的狀態(tài)就是互斥的。
checkbox
1、checkbox是復(fù)選框，可以選多個，也可以全選。
2、提交的方式是 & ，所以服務(wù)端需要按照 & 來解析數(shù)據(jù)。
label
1、label：提升易用性。checkbox只能點擊小方塊生效，而label擴(kuò)大了點擊范圍，使得在點擊文字的時候也能夠選中。
2、實現(xiàn)方式：<label></label>
3、label也可以和input的框關(guān)聯(lián)，相當(dāng)于對這個input框做一個說明。
select
select：選項。加上multiple可以實現(xiàn)多選。（得按著shift鍵來選中多個）
optgroup
分組：optgroup
實現(xiàn)：<optgroup label="fruit"><option ><option>...
hidden
hidden：當(dāng)某些要提交的信息并不想展示在頁面上的時候。
文件選擇
1、實現(xiàn)方式：<input type="file">
2、如果表單里包含了文件，需要在form里寫一個 enctype= multipart/form-data， 因為正常情況下字段都是以url編碼的形式提交的，但是文件不行，得使用multipart的方式。multipart會用分隔符把要提交的內(nèi)容隔開，服務(wù)器好處理。
3、加上multiple屬性，HTML5可以支持多個文件上傳。
4、HTML5還增加了一個accept屬性，可以指定只能上傳圖片，實現(xiàn)方式為 accept="image/*"
5、實際很多時候并不會采用這種原生的方式去提交文件，因為有時候并不想一起提交這么多，這塊兒很多時候是用AJAX來做。
date&time
HTML原生實現(xiàn)了日歷控件。
<input type="date">
<input type="time">
<input type="month">
number & range
數(shù)字一般需要驗證合法性。
number：會有上下箭頭來增加和減少數(shù)字；可以點也可以自己輸入。
range：是一個滑竿；
ps：這只是交互的區(qū)別。原生的組件長的都比較丑，css中會去美化各種組件。
button
button：提交按鈕一般是button來做的。button的默認(rèn)值就是submit，這樣可能提交整個表單。當(dāng)type=button的時候，點擊的行為需要完全由js來實現(xiàn)。
reset
<button type="reset"> reset不是清空，是恢復(fù)默認(rèn)狀態(tài)。
回車提交
<button onclick="alert(1)" >
回車提交：onclick，按回車之后，瀏覽器會自動觸發(fā)第一個button的click事件。
注意，最好不要禁用這個回車提交。所以，表單提交的時候最好是綁定submit事件。
控件狀態(tài)[disabled readonly]
1、控件狀態(tài)：disabled和readonly狀態(tài)，重要的字段不允許修改。
2、readonly的字段改不了，但是可以提交。
3、disable的值不會提交到服務(wù)器。
表單設(shè)計原則
1、幫助用戶不出錯
2、盡早提示錯誤
3、擴(kuò)大選擇/點擊區(qū)域
4、空間較多時要分組
5、主要動作和次要動作
