原文
https://www.jianshu.com/p/b427daa8663d
大綱
1、認識表單
2、認識表單元素
3、表單元素的分類
4、表單元素——文本框
5、表單元素button
6、表單元素——單選、多選
7、表單元素——select
8、表單元素——textarea
9、推薦
1、認識表單
1、在一個頁面上可以有多個form表單，但是向web服務器提交表單的時候，一次只可以提交一個表單。
2、要聲明一個表單，只需要使用form標記來標明表單的開始和結束，若需要向服務器提交數據，則在form標簽中需要設置action屬性（用來設置提交表單的位置）、method屬性（用來定義瀏覽器將表單中的信息提交給服務器端程序的處理方式）、target屬性（用來指定服務器返回結果所顯示的目標窗口或目標框架）；但是，對於客戶端腳本編程來說，並不需要這些屬性來幫助提交表單信息，form標簽存在的意義是在於方便在腳本中編程的時候進行引用。
3、表單的引用可以利用from標簽的name屬性或者也可以利用document的forms[]數組中調用到對應的數組。
4、可以利用form表單的elements[]數組來遍歷除了<input type=image >元素之外的所有元素
5、form表單的submit()方法用於將表單提交給服務，但我們點擊submit按鈕的時候，submit按鈕會相應的調用onsubmit事件處理器從而調用Form對象的submit事件
6、如何在瀏覽器中使用頁面中的信息，我們稱之為“客戶端腳本編程”，而如何把信息提交給Web服務，並將數據庫保存在數據庫中，我們通常稱為“服務器端腳本編程”
7、在早期，所有可交互的HTML元素都應該放在HTML表單中，但是現在的定義是，需要提交到web服務器的數據，才必須要放在表單內，可是前一種理解的方式也不是完全錯誤的，因為一般可以交互的HTML元素，都是表單元素（在前期），即：瀏覽器需要處理的數據都是表單元素，因此需要將其放在HTML表單中。
2、認識表單元素
1、大部分的表單控件元素都是由<input>標記創建的，<input>標記具有一個type屬性，該屬性決定了<input>標記所創建的表單控件的類型。
2、所有的單控件對象都具有一個name屬性，JavaScript腳本通過name屬性的值來引用特定的表單控件元素，同時這也是表單提交到服務器時，每個表單控件元素的值value所對應的key值。
3、絕大部分對象都具有value屬性，該屬性返回當前表單控件的值。
4、所有的表單控件對象都具有一個form屬性，該屬性返回包含當前控件的Form對象。對於一個通用的表單數據檢查程序來說，用這個屬性來標明哪些控件屬於哪個表單。
5、所有的表單元素對象都具有focus()和blur()方法，同時所有的表單元素對象還具有onfocus和onblur事件處理器。
3、表單元素的分類
常見的表單控件有：
1、Text Input Elements:
<input type="text"> 、<input type="password">、<textarea></textarea>
2、Tick Box Elements:
<input type="checkbox"> 、<input type="radio">
3、Select Elements:
<select size=1><option></option></select>、<select size=5 multiple><option></option></select>（下拉大框、多選）
4、Button:
<input type="button">、<input type="submit">、<input type="reset">
4、表單元素——文本框
1、<input type="text">通過對input表單元素的type設置text來讓瀏覽器創建Text表單元素對象。
2、Text對象的value屬性表示的就是文本框中的值。
3、文本框的input標記還具有size屬性（用於決定文本框具有多少個字符的寬度）、maxlength屬性(用於決定用戶可以在文本框中輸入多少個字符)。
4、Text對象還具有select()方法，用以選擇或加亮文本框中的文本，當用戶在文本框中輸入了無效值的時候，我們可以通過focus()方法將輸入焦點設置回該文本框，並且使用select()方法選中文本框中的文本，並且光標落在文本框的右邊。
5、Text對象的value獲取到的都是字符串類型的值，哪怕輸入的是純數字也會轉換成字符串，但是如果對該value的操作足夠明顯的說明其是數值類型數據，那么后台會將其自動轉換（如減法），但是若無法足夠明顯的說明，那么仍舊是作為字符串數據類型使用（如加法，字符串也有加法的方法），所以若是要將其作為數值數據類型使用，最好都將其首先顯示的轉換數據類型而不是依靠JavaScript隱式的轉換。
6、Text對象具有多個事件處理器：
onfocus事件處理器（獲得焦點）、
onblur事件處理器（失去焦點）、
onselect事件處理器（選中）、
onchange事件處理器（當且僅當文本框失去焦點時的值與獲得焦點的值不同是）、
onkeydown事件處理器（鍵盤按下）、
onkeypress事件處理器（按了一個鍵）、
onkeyup事件處理器（鍵盤抬起）
7、不同瀏覽器對blur事件的解析不同。
8、<input type="password" name=myPassword>密碼框，使用密碼框的唯一目的是當用戶在頁面上輸入密碼的時候，隱藏用戶輸入的密碼字符串以防止偷窺，但是密碼框僅僅是使用星號或其他符號代替顯示，並沒有對密碼進行加密，當表單提交的時候，仍是以明文發送的，因此，使用密碼框來傳遞重要信息並不是一個安全的方法
9、<input type="hidden" name=myHidden>隱藏域,隱藏域可以像文本框一樣用來輸入字符串或數字，不同之處在於隱藏域對於用戶來說是不可見的。隱藏域對於用戶來說是為了避免過於冗余的表單元素出現在頁面，因此將一些需要提交的但已經填寫驗證過的表單元素輸入此中並隱藏，等到最后提交的時候統一提交。
5、表單元素button
1、button元素的創建是<input type="button">,通過聲明type來定義input元素，從而瀏覽器將為button元素創建一個對應的Button對象。
2、Button對象包含value屬性，通過value屬性來顯示按鈕上的文本
3、Button對象包含onclick事件處理器、onmouseup事件、nomousedown事件
4、submit按鈕具有特定的用途，並且不需要依靠腳本來實現，當submit按鈕被單擊時，按鈕所在表單中的數據將自動提交到服務器，並不需要編寫任何腳本
5、reset按鈕被單擊時，按鈕所在的表單中的所有元素都將被清空，或者被設置為元素的默認值（即頁面第一次加載時元素所具有的值）
6、表單元素——單選、多選
1、單選按鈕type="radio"、復選框type="checkbox"通過設置type屬性來創建對應的表單元素對象
2、通過在input標簽中添加關鍵字checked來設置默認選項，注意，radio單選按鈕只有一個能被選中，若設置多個checked，只會實現最后一個。
3、Checkbox對象和Radio對象的value屬性是在HTML中預定義的或者是用JavaScript定義的，該value屬性不表示用戶與復選框或單選按鈕交互的任何信息，無論復選框或單選按鈕是否被選中，該value屬性的值是不變的，另外，當向服務器提交表單時，僅僅是被選中的復選框或者單選框的按鈕被提交到服務器，未選中的是不會被提交的。
7、表單元素——select
1、創建:通過這樣的方式來創建select下來列表框對象
<select>
<option><option>
<option><option>
...
<select>
2、Select對象具有size（想要展示的選擇條數），multiple（是否多選）
<!--
若要顯示只有一條顯示的單選：
-->
<select>
<option></option>
<option></option>
<option></option>
</select>
<!--
若要顯示只有兩條顯示的單選：
-->
<select size=2>
<option></option>
<option></option>
<option></option>
</select>
<!--
若要顯示只有兩條顯示的多選：
-->
<select size=2 multiple>
<option></option>
<option></option>
<option></option>
</select>
3、Select對象具有數組屬性options[]，該數組的元素是Option對象
4、Option對象具有index屬性（Option在當前options[]數組中的索引）、text屬性（返回當前項在列表框中顯示的文本標題）、value屬性（返回當前項所定義的值）
5、要在列表框中添加新的列表項，那么需要new一個新的Option對象，然后再把該對象插入到options[]數組中一個空的options[]數組元素，當在某個已經存在了選項的索引位置插入一個新的選項事，注意該索引位置上原來的選項將會被覆蓋掉。要在列表框中移除某個列表項，那就是把options[]數組中該選項所對應的數組元素設置為null,當移除一個Option對象時，options[]數組將重新排序，每一個排在被移除選項之后的Option對象的索引將自動減1.
6、在IE瀏覽器中添加新的列表項有自己的add()、remove()方法來添加和引出下拉選項。
7、下拉列表框具有onblur事件處理器、onfocus事件處理器、onchange事件處理器
8、表單元素——textarea
1、<textarea></textarea>textarea元素允許用戶輸入多行文本
2、textarea對象擁有cols屬性（定義文本區域寬度，單位是單個字符的寬度）、rows屬性（定義文本區域高度，單位是單個字符的行高）
3、textarea對象還具有一個wrap屬性，默認值是soft（自動軟回車換行），hard屬性（自動硬回車換行，該行為會將其換行地方同數據一起上傳），off（關閉換行）
4、textarea標簽不包含value屬性，但是Textarea對象具有value屬性，其的值是包含在textarea標簽中的內容。
9、推薦
在這里我僅僅是闡述了我自己對表單知識的一些認知和理解，也許還不夠全面和具體，但是還是希望能夠幫助到讀者，並且這里我推薦兩篇我寫的同樣的關於表單的知識，一篇是我遇到的表單的問題Html表單中遇到的問題，還有一篇是我使用表單的實例應用Html表單使用實例，同樣希望能對讀者有所幫助。