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