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

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

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

其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text這10個(gè)是傳統(tǒng)的輸入控件，

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

傳統(tǒng)類型

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

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

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

radio----定義單選按鈕

checkbox---定義復(fù)選框

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

button---定義可點(diǎn)擊按鈕(多數(shù)情況下，用于通過(guò)JavaScript啟動(dòng)腳本)

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

reset---定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)

submit---定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器

text

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

password

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

file

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

radio

type="radio"定義單選按鈕，允許用戶從給定數(shù)目的選擇中選一個(gè)選項(xiàng)。同一組按鈕，name值一定要一致

checkbox

type="checkbox"定義多選按鈕，允許用戶在給定數(shù)目的選擇中選擇一個(gè)或多個(gè)選項(xiàng)。同一組的按鈕，name取值一定要一致

hidden

type="hidden"定義隱藏輸入類型用于在表單中增加對(duì)用戶不可見(jiàn)，但需要提交的額外數(shù)據(jù)

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

說(shuō)明：點(diǎn)擊提交按鈕后，隱藏域的內(nèi)容'test=12#'會(huì)包含在URL中

button

type="button"的input輸入類型定義可點(diǎn)擊的按鈕，但沒(méi)有任何行為，常用于在用戶點(diǎn)擊時(shí)啟動(dòng)javascript程序

image

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

用圖片作為提交按鈕會(huì)一起發(fā)送點(diǎn)擊在圖片上的x和y坐標(biāo)，這樣可以與服務(wù)器端圖片地圖結(jié)合使用，如果圖片有name屬性，也會(huì)隨坐標(biāo)發(fā)送

submit

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

reset

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

新增類型

color----定義調(diào)色板

tel-----定義包含電話號(hào)碼的輸入域

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

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

search--定義搜索域

number--定義包含數(shù)值的輸入域

range---定義包含一定范圍內(nèi)數(shù)字值的輸入域

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

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

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

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。