隨著HTML5的出現，input表單元素新增了多種輸入控制元件，用以接受各種型別 的使用者輸入。其中text、password、radio、checkbox、button、submit、reset、image、hidden、file這10個是傳統的輸入控制元件，HTML新增的輸入控制元件包括url、tel、search、email、color、number、range、month、week、date、time、datetime、datetime-local共13個。

傳統控制元件

1、type='text': 建立單行文字輸入框（預設的輸入型別） 

      文字輸入框，是一個單行的控制元件，一般是帶有內嵌框的矩形

<input type="text" size="30" maxlength="20" placeholder="請輸入搜尋關鍵字" />

// 上面程式碼意思是：input元素型別為文字輸入框;元素長度等於30;最多隻能輸入20字元;輸入框中提示使用者內容為“請輸入搜尋關鍵字”

2、type='password': 密碼輸入框

      密碼輸入框，與文字輸入框基本一模一樣，功能上唯一的不同是字母輸入後會被隱藏，一般是用小黑點代替

<input type="password" size="10" maxlength="10"  />

// 上面程式碼意思是：input元素型別為密碼輸入框;元素長度等於10;最多隻能輸入10字元
 

3、type='radio': 單選按鈕

      單選按鈕，允許使用者從給定數目的選擇中選一個選項，同一組選項按鈕，name值一定要一致

男<input type="radio" value="男" name="single" />
女<input type="radio" value="女" name="single" checked />
人妖<input type="radio" value="人妖" name="single"  />

// 上面程式碼意思是：input元素型別為單選按鈕;其中value屬性中的值用來設定使用者選中該專案後提交到資料庫中的值；擁有相同name屬性的單選框為同一組，一個組裡只能同時選中一個選項；而checked屬性表示的是初始選項，在使用者還沒進行選中之前，初始值會選中“女”這個專案
 

4、type='checkbox': 複選框

      複選框，允許使用者從給定數目的選擇中選一個或多個選項，同一組選項按鈕，name值一定要一致

廣州<input type="checkbox" value="廣州" name="city" />
深圳<input type="checkbox" value="深圳" name="city" />
杭州<input type="checkbox" value="杭州" name="city" />
北京<input type="checkbox" value="北京" name="city" />

// 上面程式碼意思是：input元素型別為複選框;使用者可以進行多個選項，其中value屬性中的值用來設定使用者選中該專案後提交到資料庫中的值；name為控制元件的名稱

5、type='button': 普通按鈕

      普通按鈕，定義可點選的按鈕，但沒有任何行為，常用於使用者點選時呼叫JavaScript方法

<input type="button" value="喜歡請點個贊吧" name="btn" onClick=""  />

// 上面程式碼意思是：input元素型別為普通按鈕;在value屬性中輸入的值為按鈕上顯示的文字；name代表該按鈕的名稱；onclick表示處理程式

6、type='submit': 提交按鈕

      提交按鈕，用於建立提交表單的按鈕

<input type="submit" value="提交" name="subBtn"  />

// 上面程式碼意思是：input元素型別為提交按鈕;提交按鈕不需要設定onclick引數，在單擊提交按鈕時可以向伺服器傳送表單資料，資料會發送到表單的 action 屬性中指定的頁面；value屬性中的值為按鈕上顯示的文字

7、type='reset': 重置按鈕

      重置按鈕，用於建立重置表單的按鈕

<input type="reset" value="重置按鈕" name="reset"  />

// 上面程式碼意思是：input元素型別為重置按鈕;重置按鈕的作用是點選之後表單會重新整理回到預設狀態，在value屬性中輸入的值為按鈕上顯示的文字

8、type='image': 影象按鈕   

      影象按鈕，該型別可以設定width、height、src、alt這四個屬性用圖片作為提交按鈕會一起傳送點選在圖片上的x和y座標，這樣可以與伺服器端圖片地圖結合使用，如果圖片有name屬性，也會隨座標傳送

<input type="image" src="" name="確定" width="90" hieght="30" />

// 上面程式碼意思是：input元素型別為影象按鈕;雖然顯示是圖片，實際是以圖片的形式按鈕；其中src是連結圖片的路徑；name為圖片名稱；width圖片寬度；height圖片高度；當按下影象按鈕會以name中的值向伺服器傳送資訊

9、type='hidden': 隱藏域

      隱藏域，定義隱藏輸入型別用於在表單中增加對使用者不可見，但需要提交的額外資料時，disabled屬性無法與type="hidden"的input元素一起使用

<input type="hidden" name="hidden" value="提交的值"  />

// 上面程式碼意思是：input元素型別為隱藏域;隱藏域在頁面上不顯示，用來儲存與傳遞表單的值，當用戶提交表單時，隱藏域的內容會一起提交給處理程式

10、type='file': 檔案域

      檔案域，定義輸入欄位和“瀏覽”按鈕，用於檔案上傳

<input type="password" size="10" maxlength="10"  />

// 上面程式碼意思是：input元素型別為密碼輸入框;元素長度等於10;最多隻能輸入10字元

H5新增控制元件

1、type='url': 輸入URL欄位

      會自動驗證url域的值，外觀上與type="text"的input輸入型別沒有差異  [注意]IE9-瀏覽器及safari瀏覽器不支援

<input type="url" />

2、type='tel': 用來輸入電話號碼

      用於表示語義上的電話輸入域，外觀上與type="text"的input輸入型別沒有差異，在手機端會喚出數字鍵盤

<input type="tel" name="tel" />

3、type='search': 搜尋字串

     用於表示語義上的搜尋框，外觀上與type="text"的input輸入型別沒有差異，在手機端會喚出搜尋按鍵

<input type="search"  />

4、type='email': 輸入“email”地址

     用於表示語義上的e-mail地址輸入域，會自動驗證email域的值，外觀上與type="text"的input輸入型別沒有差異，在手機端會喚出英文鍵盤，email支援multiple屬性  [注意]IE9-瀏覽器及safari瀏覽器不支援

<input type="email" />

// 上面程式碼意思是：input元素型別為email地址;若使用者輸入的非email格式，那麼在支援HTML5的瀏覽器中提交該表單時，會提示為不是合法格式

5、type='color': 顏色選擇器

      顏色選擇器，該型別會建立一個調色盤用來選擇顏色，顏色值以URL編碼後的十六進位制數值提交。如黑色會以%23000000傳送，其中%23是#的URL編碼。  [注意]safari和IE不支援該型別

<input type="color" id="color" />

// 上面程式碼意思是：input元素型別為顏色控制元件;使用color屬效能直接呼叫系統的顏色調節視窗，預設為黑色

6、type='number': 數字欄位

      用於處理數字輸入，在手機端會喚出數字鍵盤  [注意]IE不支援該型別

<input type="number" name="number" min="2" max="10" value="3"  />

// 上面程式碼意思是：input元素型別為數字欄位;用於輸入數字的欄位，其中min設定允許的最小值；max設定允許的最大值；value規定預設值；還有step可規定合法數字間隔

7、type='range': 輸入數字控制元件   

用於處理包含在一定範圍內的數字輸入，類似於type="number"的input型別  [注意]IE9-不支援該型別

<input type="range" name="range" min="0" max="10" step="1" value="" />

// 上面程式碼意思是：input元素型別為輸入數字控制元件;min屬性指定最小值限制，max屬性指定最大值限制，step屬性規定合法數字間隔，value屬性規定預設值

8、type='month': 年月控制元件

      用於選取月、年

<input type="month" value="2018-11" />

// 上面程式碼意思是：input元素型別為年月控制元件;value屬性用來控制年月

9、type='date': 日期控制元件

      用於選取日、月、年

<input type="date" min="2018-01-01" max="2020-01-01" />

// 上面程式碼意思是：input元素型別為日期控制元件;可用來選擇或輸入日期，包括（年/月/日）不包括時間；其中設定 min 屬性控制開始日期，max 屬性控制結束日期

10、type='datetime': 日期加時間控制元件（基於UTC時區）

      用於選取時、日、月、年(UTC時間)

<input type="datetime" value="2018-11-30T22:47Z" />

// 上面程式碼意思是：input元素型別為日期加時間控制元件;建立日期時間，包括（年/月/日/時/分/秒/零點幾秒）

11、type='datetime-local': 日期加時間控制元件（不帶時區）

     用於選取時、日、月、年(本地時間)

<input type="datetime-local" value="2018-11-21 22:47"  />

// 上面程式碼意思是：input元素型別為日期時間控制元件;建立本地日期時間，包括（年/月/日/時/分/秒/零點幾秒）

12、type='time': 時間控制元件

      用於選取時、分

<input type="time" />

13、type='week': 週年控制元件

      用於選取周、年

<input type="week" />