input元素中有多種類型(type)值，用以接受各種類型的用戶輸入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text這10個是傳統(tǒng)的輸入控件，新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13個。

傳統(tǒng)類型

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

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

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

radio　　 ?定義單選按鈕

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

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

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

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

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

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

text

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

password

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

[注意]IE6瀏覽器設(shè)置的type="text"或"password"的input元素的寬高為包含padding和border的寬高

【tips】模擬密碼顯示隱藏的功能

說明：現(xiàn)在很多軟件在密碼框右側(cè)都有一個小眼睛，用于設(shè)置密碼的顯示和隱藏。通過更改input元素的type屬性得以實現(xiàn)

顯示密碼

set.οnclick=function(){

if(this.innerHTML=='顯示密碼'){

this.innerHTML='隱藏密碼'；

show.type="text";

}else{

this.innerHTML='顯示密碼'；

show.type="password‘；

}

}

file

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

[注意]IE8-瀏覽器設(shè)置的type="file"的input元素的寬高為包含padding和border的寬高

該類型的input元素支持accept屬性和multiple屬性

radio

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

[注意]radio類型的input元素?zé)o法設(shè)置padding和border(除IE10-瀏覽器以外)

checkbox

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

[注意]checkbox類型的input元素?zé)o法設(shè)置padding和border(除IE10-瀏覽器以外)

type="radio"或"checkbox"的input元素支持checked屬性

hidden

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

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

//點擊提交按鈕后，隱藏域的內(nèi)容test=12會包含在URL中

button

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

【button、submit、reset的默認(rèn)樣式】

type="button"的input輸入類型和button元素有很多重疊特性

關(guān)于button元素的詳細(xì)信息移步至此

image

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

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

submit

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

reset

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

新增類型

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

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

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

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

search　　　　　?定義搜索域

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

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

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

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

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

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

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

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

color

type="color"的input輸入類型會創(chuàng)建一個調(diào)色板用來選擇顏色，顏色值以URL編碼后的十六進(jìn)制數(shù)值提交。如黑色會以%23000000發(fā)送，其中%23是#的URL編碼

[注意]safari和IE不支持該類型

tel

type="tel"的input輸入類型用于表示語義上的電話輸入域，外觀上與type="text"的input輸入類型沒有差異，在手機(jī)端會喚出數(shù)字鍵盤

email

type="email"的input輸入類型用于表示語義上的e-mail地址輸入域，會自動驗證email域的值，外觀上與type="text"的input輸入類型沒有差異，在手機(jī)端會喚出英文鍵盤

email類型的input元素支持multiple屬性

[注意]IE9-瀏覽器及safari瀏覽器不支持

url

type="url"的input輸入類型用于表示語義上的url地址的輸入域，會自動驗證url域的值，外觀上與type="text"的input輸入類型沒有差異

[注意]IE9-瀏覽器及safari瀏覽器不支持

search

type="search"的input輸入類型用于表示語義上的搜索框，外觀上與type="text"的input輸入類型沒有差異

number

type="number"的input輸入類型用于處理數(shù)字輸入，在手機(jī)端會喚出數(shù)字鍵盤

[注意]IE不支持該類型

【屬性】

max?　　規(guī)定允許的最大值

min?　　 規(guī)定允許的最小值

step?　　規(guī)定合法的數(shù)字間隔

value?　 ?規(guī)定默認(rèn)值

[注意]屬性的取值可為小數(shù)

range

type="range"的input輸入類型用于處理包含在一定范圍內(nèi)的數(shù)字輸入，類似于type="number"的input類型

[注意]IE9-不支持該類型

【屬性】

max?　　規(guī)定允許的最大值

min?　　 規(guī)定允許的最小值

step?　　規(guī)定合法的數(shù)字間隔

value?　 ?規(guī)定默認(rèn)值

[注意]屬性的取值可為小數(shù)

[注意]如果不設(shè)置min和max屬性，則默認(rèn)min=0，max=100

HTML5擁有多個可供選取日期和時間的新輸入類型

date

type="date"的input輸入類型用于選取日、月、年

month

type="month"的input輸入類型用于選取月、年

week

type="week"的input輸入類型用于選取周、年

time

type="time"的input輸入類型用于選取時、分

datetime

type="datetime"的input輸入類型用于選取時、日、月、年(UTC時間)

datetime-local

type="datetime-local"的input輸入類型用于選取時、日、月、年(本地時間)

[注意]IE和firefox這6種日期類型都不支持，chrome不支持datetime類型

要預(yù)設(shè)控件的日期和時間，可以用字符串設(shè)置value屬性

【value屬性格式】

date ? ? ? ? ? ? ? ?　　 YYYY-MM-DD

time ? ? ? ? ? ? ? ? 　　hh:mm:ss.s

datetime ? ? ? ? ? ?　　 YYYY-MM-DDThh:mm:ss:sZ

datetime-local ? ? ? ? ? YYYY-MM-DDThh:mm:ss:s

month ? ? ? ? ? ?　　　　 YYYY-MM

week ? ? ? ? ? ? ? ?　　 YYYY-Wnn

YYYY=年

MM=月

DD=日

hh=小時

mm=分鐘

ss=秒

s=0.1秒

T=日期與時間之間的分隔符

Z=Zulu時間的時區(qū)

Wnn=W周數(shù)，從1月的第一周開始是1，直到52

該類型的value屬性格式還可以用在min和max的屬性里，用來創(chuàng)建時間跨度；step可以用來設(shè)置移動的刻度

[注意]chrome不支持該類型的step設(shè)置

鏈接實例：

實例

html>

鏈接

鏈接

運(yùn)行實例 ?

點擊 "運(yùn)行實例" 按鈕查看在線實例

總結(jié)

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

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