摘自：http://www.cnblogs.com/xiaohuochai/p/5179909.html

了解HTML表單之input元素的23種type類型

隨著HTML5的出現，input元素新增了多種類型，用以接受各種類型的用戶輸入。

其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text這10個是傳統的輸入控件，

新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13個

傳統類型

text-------定義單行的輸入字段，用戶可在其中輸入文本

password---定義密碼字段。該字段中的字符被掩碼

file----定義輸入字段和 "瀏覽"按鈕，供文件上傳

radio----定義單選按鈕

checkbox---定義復選框

hidden---定義隱藏的輸入字段

button---定義可點擊按鈕(多數情況下，用于通過JavaScript啟動腳本)

image---定義圖像形式的提交按鈕

reset---定義重置按鈕。重置按鈕會清除表單中的所有數據

submit---定義提交按鈕。提交按鈕會把表單數據發送到服務器

text

type="text"表示一個文本輸入框，它是默認的輸入類型，是一個單行的控件，一般是一個帶有內嵌框的矩形

password

type="password"表示一個密碼輸入框，它與文本輸入框幾乎一模一樣，功能上唯一的不同的字母輸入后會被隱藏，一般是一連串的點******

file

type="file"定義輸入字段和"瀏覽"按鈕，用于文件上傳

radio

type="radio"定義單選按鈕，允許用戶從給定數目的選擇中選一個選項。同一組按鈕，name值一定要一致

checkbox

type="checkbox"定義多選按鈕，允許用戶在給定數目的選擇中選擇一個或多個選項。同一組的按鈕，name取值一定要一致

hidden

type="hidden"定義隱藏輸入類型用于在表單中增加對用戶不可見，但需要提交的額外數據

[注意]disabled屬性無法與type="hidden"的input元素一起使用

說明：點擊提交按鈕后，隱藏域的內容'test=12#'會包含在URL中

button

type="button"的input輸入類型定義可點擊的按鈕，但沒有任何行為，常用于在用戶點擊時啟動javascript程序

image

type="image"的input輸入類型定義圖像形式的提交按鈕，該類型可以設置width、height、src、alt這四個屬性

用圖片作為提交按鈕會一起發送點擊在圖片上的x和y坐標，這樣可以與服務器端圖片地圖結合使用，如果圖片有name屬性，也會隨坐標發送

submit

type="submit"的input輸入類型用于創建提交表單的按鈕

reset

type="reset"的input輸入類型用于創建重置表單的按鈕

新增類型

color----定義調色板

tel-----定義包含電話號碼的輸入域

email---定義包含email地址的輸入域

url-----定義包含URL地址的輸入域

search--定義搜索域

number--定義包含數值的輸入域

range---定義包含一定范圍內數字值的輸入域

date----定義選取日、月、年的輸入域

month---定義選取月、年的輸入域

week----定義選取周、年的輸入域

time----定義選取月、年的輸入域

datetime----定義選取時間、日 月、年的輸入域(UTC時間)

datatime-local--定義選取時間、日 月、年的輸入域(本地時間)

總結

以上是生活随笔為你收集整理的HTML表单input类型有哪些,HTML表单之input元素的23种type类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。