在php中type有几种属性,HTML表单之input元素的23种type类型
input元素中有多種類型(type)值，用以接受各種類型的用戶輸入。其中，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"表示一個密碼輸入框，它與文本輸入框幾乎一模一樣，功能上唯一的不同的字母輸入后會被隱藏，一般是一連串的點
[注意]IE6瀏覽器設置的type="text"或"password"的input元素的寬高為包含padding和border的寬高
【tips】模擬密碼顯示隱藏的功能
說明：現在很多軟件在密碼框右側都有一個小眼睛，用于設置密碼的顯示和隱藏。通過更改input元素的type屬性得以實現
顯示密碼
set.οnclick=function(){
if(this.innerHTML=='顯示密碼'){
this.innerHTML='隱藏密碼'；
show.type="text";
}else{
this.innerHTML='顯示密碼'；
show.type="password‘；
}
}
file
type="file"定義輸入字段和"瀏覽"按鈕，用于文件上傳
[注意]IE8-瀏覽器設置的type="file"的input元素的寬高為包含padding和border的寬高
該類型的input元素支持accept屬性和multiple屬性
radio
type="radio"定義單選按鈕，允許用戶從給定數目的選擇中選一個選項。同一組按鈕，name值一定要一致
[注意]radio類型的input元素無法設置padding和border(除IE10-瀏覽器以外)
checkbox
type="checkbox"定義多選按鈕，允許用戶在給定數目的選擇中選擇一個或多個選項。同一組的按鈕，name取值一定要一致
[注意]checkbox類型的input元素無法設置padding和border(除IE10-瀏覽器以外)
type="radio"或"checkbox"的input元素支持checked屬性
hidden
type="hidden"定義隱藏輸入類型用于在表單中增加對用戶不可見，但需要提交的額外數據
[注意]disabled屬性無法與type="hidden"的input元素一起使用
//點擊提交按鈕后，隱藏域的內容test=12會包含在URL中
button
type="button"的input輸入類型定義可點擊的按鈕，但沒有任何行為，常用于在用戶點擊時啟動javascript程序
【button、submit、reset的默認樣式】
type="button"的input輸入類型和button元素有很多重疊特性
關于button元素的詳細信息移步至此
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 ?定義選取時間、日 月、年的輸入域(本地時間)
color
type="color"的input輸入類型會創建一個調色板用來選擇顏色，顏色值以URL編碼后的十六進制數值提交。如黑色會以%23000000發送，其中%23是#的URL編碼
[注意]safari和IE不支持該類型
tel
type="tel"的input輸入類型用于表示語義上的電話輸入域，外觀上與type="text"的input輸入類型沒有差異，在手機端會喚出數字鍵盤
type="email"的input輸入類型用于表示語義上的e-mail地址輸入域，會自動驗證email域的值，外觀上與type="text"的input輸入類型沒有差異，在手機端會喚出英文鍵盤
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輸入類型用于處理數字輸入，在手機端會喚出數字鍵盤
[注意]IE不支持該類型
【屬性】
max? 規定允許的最大值
min? 規定允許的最小值
step? 規定合法的數字間隔
value? ?規定默認值
[注意]屬性的取值可為小數
range
type="range"的input輸入類型用于處理包含在一定范圍內的數字輸入，類似于type="number"的input類型
[注意]IE9-不支持該類型
【屬性】
max? 規定允許的最大值
min? 規定允許的最小值
step? 規定合法的數字間隔
value? ?規定默認值
[注意]屬性的取值可為小數
[注意]如果不設置min和max屬性，則默認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類型
要預設控件的日期和時間，可以用字符串設置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時間的時區
Wnn=W周數，從1月的第一周開始是1，直到52
該類型的value屬性格式還可以用在min和max的屬性里，用來創建時間跨度；step可以用來設置移動的刻度
[注意]chrome不支持該類型的step設置
鏈接實例：
實例
html>
鏈接鏈接
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
總結
以上是生活随笔為你收集整理的在php中type有几种属性,HTML表单之input元素的23种type类型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php图片变成代码怎么解决,一段图片处理
- 下一篇： python 读取mongodb,pyt