一、type屬性總匯

創(chuàng)新互聯(lián)主營(yíng)西盟網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP軟件開(kāi)發(fā),西盟h5重慶小程序開(kāi)發(fā)公司搭建,西盟網(wǎng)站營(yíng)銷(xiāo)推廣歡迎西盟等地區(qū)企業(yè)咨詢(xún)

 input元素可以用來(lái)生成一個(gè)供用戶(hù)輸入數(shù)據(jù)的簡(jiǎn)單文本框。在默認(rèn)的情況下，什么樣的數(shù)據(jù)都可以輸入。而通過(guò)不同的屬性值，可以限制輸入的內(nèi)容。

屬性名稱(chēng)	說(shuō)明
text	一個(gè)單行文本框，默認(rèn)行為
password	隱藏字符的密碼框
search	搜索框，在某些瀏覽器鍵入內(nèi)容會(huì)出現(xiàn)叉標(biāo)記取消
submit、reset、button	生成一個(gè)提交按鈕、重置按鈕、普通按鈕
number、range	只能輸入數(shù)值的框；只能輸入在一個(gè)數(shù)值范圍的框
checkbox、radio	復(fù)選框、用戶(hù)勾選框，單選框、只能在幾個(gè)中選一個(gè)
p_w_picpath、color	生成一個(gè)圖片按鈕，顏色代碼按鈕
email、tel、url	生成一個(gè)檢測(cè)電子郵件、號(hào)碼、網(wǎng)址的文本框
date、month、time、 week、datetime、 datetime-local	獲取日期和時(shí)間

hidden	生成一個(gè)隱藏控件
file	生成一個(gè)上傳控件

二、input元素解析

1、type為text值時(shí)

<input type="text">

解釋?zhuān)寒?dāng)type值為text時(shí)，呈現(xiàn)的就是一個(gè)可以輸入任意字符的文本框，這也是默認(rèn)行為，并且，還提供了額外的屬性

屬性名稱(chēng)	說(shuō)明
list	注定為文本框提供建議值的datalist元素。其值為datalist元素的id值
maxlength	設(shè)置文本框大字符長(zhǎng)度，如maxlength="5",則文本框只能有5個(gè)字符
parttern	用于輸入驗(yàn)證的正則表達(dá)式
placeholder	輸入字符的提示
readonly	文本框處于只讀狀態(tài)
disable	文本框處于禁用狀態(tài)
size	設(shè)置文本框?qū)挾?/td>
value	設(shè)置文本框的初始值或者默認(rèn)值
required	表示用戶(hù)必須輸入一個(gè)值，否則無(wú)法用過(guò)輸入驗(yàn)證

//設(shè)置文本框長(zhǎng)度

<input type="text" size="50">

//設(shè)置文本框輸入字符長(zhǎng)度

<input type="text" maxlength="10">

//設(shè)置文本框的初始值

<input type="text" value="初始值">

<form>
    size=50<input type="text" name="user" size="50"><br><br>
    size=25<input type="text" name="user" size="25"><br><br>
    maxlength=10<input type="text" name="user" maxlength="10"><br><br>
    value=“初始值”<input type="text" name="user" value="初始值"><br><br>
    disable<input type="text" name="user" disabled><br><br>
    readonly<input type="text" name="user" value="初始值" readonly=""><br><br>
<form action="http://www.baidu.com">
    required<input type="text" name="user" required=""><button>提交</button>
</form>
</form>

2、type為password值時(shí)

<input type="password">

屬性名稱(chēng)	說(shuō)明
maxlength	設(shè)置密碼框大字符長(zhǎng)度
parttern	用于輸入驗(yàn)證的正則表達(dá)式
placeholder	輸入密碼的提示
readonly	密碼框處于只讀狀態(tài)
disable	文本框處于禁用狀態(tài)
size	設(shè)置密碼框?qū)挾?/td>
value	設(shè)置密碼框初始值
required	表明用戶(hù)必須輸入同一個(gè)值

這里除了正則和驗(yàn)證需要放在下一節(jié)，其余和文本框一致

3、type為search時(shí)

<input type="search">

解釋?zhuān)汉臀谋究蛞恢拢谔嶧irefox瀏覽器的其他現(xiàn)代瀏覽器，會(huì)顯示一個(gè)叉來(lái)取消搜索內(nèi)容。額外屬性也和text一致

<form>
placeholder：<input type="password" placeholder="請(qǐng)輸入密碼"><button>提交</button><br><br>
search:<input type="search" ><button>提交</button>
</form>

4、type為number、range時(shí)

<input type="number">
<input type="range">

解釋?zhuān)褐幌掭斎霐?shù)字的文本框，不同瀏覽器可能顯示方式不同，生成一個(gè)數(shù)值范圍文本框，只是樣式是拖動(dòng)式，額外屬性如下：

屬性名稱(chēng)	說(shuō) 明
list	指定為文本框提供建議值的datalist元素，其值為datalist元素的id值
min	設(shè)置可接受的最小值
max	設(shè)定可接受的大值
readonly	設(shè)置文本框內(nèi)容只讀
required	表明用戶(hù)必須輸入一個(gè)值，否則無(wú)法通過(guò)驗(yàn)證輸入
step	指定上下調(diào)節(jié)值的步長(zhǎng)
value	指定初始值

<form>
    number屬性：<input type="number" step="2"><button>提交</button><br><br>
    number屬性：<input type="number" min="50" max="100"><button>提交</button><br><br>
</form>

5、type為date系列時(shí)

<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">

解釋?zhuān)簩?shí)現(xiàn)文本框可以獲取日期和時(shí)間的值，但支持的瀏覽器不完整。我們測(cè)試chrome和Opera支持。其他瀏覽器尚未支持。所以，在獲取日期和時(shí)間，目前還是推薦使用jQuery等前端庫(kù)來(lái)實(shí)現(xiàn)日歷功能，額外屬性和number一致。

6、type為color時(shí)

<input type="coler">

解釋?zhuān)簩?shí)現(xiàn)文本框獲取顏色的功能，最新的現(xiàn)代瀏覽器IE不支持，其余的都能顯示一個(gè)顏色對(duì)話框提供選擇

<form>
    date屬性<input type="date" name=""><button>提交</button><br><br>
</form>

7、type為checkbox、radio時(shí)

<form>
    音樂(lè)<input type="checkbox" name="">
    體育<input type="checkbox" name="">
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
</form>

解釋?zhuān)荷梢粋€(gè)獲取布爾值的復(fù)選框或固定選項(xiàng)的單選框。額外屬性如下：

屬性名稱(chēng)	說(shuō)明
checked	設(shè)置復(fù)選框、單選框是否為勾選狀態(tài)
required	表示用戶(hù)必須勾選
value	設(shè)置復(fù)選框、單選框勾選狀態(tài)時(shí)提交的數(shù)據(jù)，默認(rèn)為on

//默認(rèn)勾選，默認(rèn)值為1

<input type="checkbox" name="music" checked value="1">

<form>
    音樂(lè)<input type="checkbox" name="">
    體育<input type="checkbox" name="">
    <input type="radio" name="sex" value="1" checked>男
    <input type="radio" name="sex" value="2">女<button>提交</button>
</form>

8、type為submit、reset和button時(shí)

<input type="submit">

解釋?zhuān)荷梢粋€(gè)按鈕，三種模式：提交、重置和一般按鈕，和<button>元素相同

9、type為p_w_picpath時(shí)

<input type="p_w_picpath" src="img.png">

解釋?zhuān)荷梢粋€(gè)圖片按鈕，點(diǎn)擊圖片就實(shí)現(xiàn)提交功能，并且傳送了分區(qū)響應(yīng)數(shù)據(jù)，圖片按鈕也提供了一些額外屬性

屬性名稱(chēng)	說(shuō)明
src	指定要顯示圖像的URL
alt	提供圖片的文學(xué)說(shuō)明
width	圖像的長(zhǎng)度
height	圖像的高度

提交額外屬性

formaction、formenctype、formmethod、formtarget和formnovalidate

10、type為email、tel、url時(shí)

<from>
    郵箱：<input type="email" name="">
    電話：<input type="tel" name="">
    主頁(yè)：<input type="url" name=""><button>提交</button>
</form>

解釋?zhuān)篹mail為電子郵件格式，tel為電話格式、url為網(wǎng)址格式。額外屬性和text一致。但對(duì)于這幾種類(lèi)型，瀏覽器支持是不同的。email支持比較好，現(xiàn)在瀏覽器都支持格式驗(yàn)證，tel基本不支持：url支持一般，部分瀏覽器只要檢測(cè)到http://就能通過(guò)

11、type為hidden時(shí)

<input type="hidden">

解釋?zhuān)荷梢粋€(gè)隱藏控件，一般用于表單提交時(shí)關(guān)聯(lián)主鍵ID提交，而這個(gè)數(shù)據(jù)作為隱藏存在

12、type為file時(shí)

<input type="file">

解釋?zhuān)荷梢粋€(gè)文件上傳控件，用于文件的上傳，額外提供一些屬性

屬性名稱(chēng)	說(shuō)明
accept	指定接受的MIME類(lèi)型
required	表明用戶(hù)必須提供一個(gè)值，否則無(wú)法通過(guò)驗(yàn)證

accept="p_w_picpath/jpg,p_w_picpath/jpeg,p_w_picpath/png"

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：10、表單元素之input標(biāo)簽屬性(中)-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://chinadenli.net/article14/cohdde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、軟件開(kāi)發(fā)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)