這里我們介紹一下form元素與表單提交方面的知識。
form元素
form元素的DOM接口是HTMLFormElement，繼承自HTMLElement，因而它與其他的HTML元素擁有相同的默認屬性，不過它自身還有幾個獨有的屬性和方法：
| 屬性值 | 說明 |
|---|---|
| accept-charset | 服務器能夠處理的字符集，多個字符集用空格分割 |
| action | 接受請求的URL，該值可以被form元素中的input或button元素的formaction屬性覆蓋 |
| elements | 表單中所有控件集合(HTMLCollection) |
| enctype | 請求的編碼類型，該值可以被form元素中的input或button元素的formenctype屬性覆蓋 |
| length | 表單中控件的數量 |
| method | 要發送的HTTP請求類型，通常是“get”或“post”，該值可以被form元素中的input或button元素的formmethod屬性覆蓋 |
| name | 表單的名稱 |
| reset() | 將所有表單域重置為默認值 |
| submit() | 提交表單 |
| target | 用于發送請求和接收響應的窗口名稱，該值可以被form元素中的input或button元素的formtarget屬性覆蓋 |
| autocomplete | 是否自動補全表單元素 |
input元素
input元素是應用非常廣泛的表單元素，根據type屬性值的不同，有以下幾種常用用法：
文本輸入 <input type="text" name="">
提交輸入 <input type="submit">
單選鈕輸入 <input type="radio" name="必須有相同的名字" value="填的值最好對應">
復選框輸入 <input type="checkbox" name="相同的名字" value="不同的對應值">
數字輸入 <input type="number" min="" max=""> 輸入框只能輸入數字，可設置最大值，最小值。
范圍輸入 <input type="range" min="" max="">類似number，但它會顯示一個滑動條，而不是輸入框。
顏色輸入<input type="color">會彈出一個顏色選擇器。
日期輸入<input type="date"> 會彈出一個日期選擇器。
email輸入 <input type="email">顯示為一個文本輸入框，并會彈出一個定制鍵盤。
tel輸入<input type="tel"> 跟email輸入類似
url輸入 <input type="url"> 跟email輸入類似，也會彈出一個定制鍵盤。
textarea元素可以創建一個多行的文本區。
<textarea name="" id="" cols="30" rows="10"></textarea>
其中cols和row的屬性值分別表示文本區寬度和高度的字符。
select元素和option元素結合使用可創建一個下拉菜單。
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select>
radio
如何 分組? 設置不同的 name屬性即可
例：
<input type="radio" name="favourite" value="玩游戲">玩游戲
<input type="radio" name="favourite" value="寫代碼">寫代碼
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女、
這就是兩組radio
placeholder
提供可描述輸入字段預期值的提示信息（hint）。
該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
type=hidden
定義隱藏的input。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改。
比如用于安全方面，給后臺傳輸用戶不可見的name 和value值，讓后臺做校驗，防偽造頁面。
提交按鈕
在form中加入一個提交按鈕，便可使用戶得以提交表單。