html5 input元素新特性_動力節(jié)點(diǎn)Java學(xué)院整理
我要評論屬性
<input>元素在HTML5中新增加的屬性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。
簡單描述
新增加的屬性描述如下：
- autocomplete ：是否顯示與現(xiàn)在輸入內(nèi)容相匹配的歷史輸入記錄。
- autofocus ：當(dāng)頁面加載完成后，此元素獲得焦點(diǎn)。
- form ：設(shè)置元素歸屬表單的ID。
- formaction ：設(shè)置表單action屬性的值。
- formenctype ：設(shè)置表單enctype屬性的值。
- formmethod ：設(shè)置表單method屬性的值。
- formnovalidate ：關(guān)閉表單的驗(yàn)證。
- formtarget ：設(shè)置表單target屬性的值。
- max ：設(shè)置<input>元素中數(shù)字或日期控件的最大值。
- min ：設(shè)置<input>元素中數(shù)字或日期控件的最小值。
- minlength ：設(shè)置文本輸入控件的內(nèi)容最小長度。
- pattern ：設(shè)置元素文本內(nèi)容需匹配的正則表達(dá)式。
- placeholder ：設(shè)置文本控件的預(yù)先顯示內(nèi)容。
- readonly ：設(shè)置元素是否只讀。
- required ：設(shè)置控件是否為必填項。
autocomplete ：是否顯示與現(xiàn)在輸入內(nèi)容相匹配的歷史輸入記錄
說明：設(shè)置當(dāng)前文本元素中是否顯示與現(xiàn)在內(nèi)容相匹配的歷史輸入記錄。
場景：搜索框需要此屬性，而驗(yàn)證碼就不需要。
可設(shè)置的值：只可以設(shè)置on、off兩個值。
- autocomplete="on" ：顯示匹配的歷史輸入記錄。
- autocomplete="off" ：不顯示匹配的歷史輸入記錄。
示例：
<form action="#" >
<p>驗(yàn)證碼：<input type="text" autocomplete="off" /></p>
<input type="submit" />
</form>
autofocus ：當(dāng)頁面加載完成后，此元素獲得焦點(diǎn)
說明：若頁面中有多個元素含有此屬性，只會最前面的元素獲得焦點(diǎn)。
示例：
<p>姓名：<input type="text" placeholder="請輸入真實(shí)姓名" /></p> <p>地址：<input type="text" autofocus /></p>
form ：設(shè)置元素歸屬表單的ID
說明：若元素不在表單標(biāo)簽里，可設(shè)置此值為需要?dú)w屬的表單ID。
示例：
<input type="text" form="register_form" />
formaction ：設(shè)置表單action屬性的值
formenctype ：設(shè)置表單enctype屬性的值
formmethod ：設(shè)置表單method屬性的值
說明：可設(shè)置的值為post、get等。
formnovalidate ：關(guān)閉表單的驗(yàn)證。
說明：可應(yīng)用于類似【暫存】操作。
示例：
<form action="#" >
<p>用戶名：<input type="text" name="loginName" required /></p>
<input type="button" value="暫存" formnovalidate />
<input type="submit" />
</form>
formtarget ：設(shè)置表單target屬性的值
說明：可設(shè)置的值為_self、_blank、_parent、_top等。
max ：設(shè)置<input>元素中數(shù)字或日期控件的最大值
min ：設(shè)置<input>元素中數(shù)字或日期控件的最小值
minlength ：設(shè)置文本輸入控件的內(nèi)容最小長度
pattern ：設(shè)置元素文本內(nèi)容需匹配的正則表達(dá)式
說明： 元素文本內(nèi)容指定的正則表達(dá)式完全匹配才會驗(yàn)證通過。
注意：
1) 瀏覽器不會驗(yàn)證空值，若想必填可加上 required 屬性。
2) 若含有title屬性的值，當(dāng)匹配失敗會顯示title的信息。
示例：
<form action="#" >
<p>手機(jī)號碼：<input type="text" name="phoneNumber" pattern="[1]([3]|[5])[0-9]{9}" title="13或15開頭的手機(jī)號碼" /></p>
<input type="submit" />
</form>
placeholder ：設(shè)置文本控件的預(yù)先顯示內(nèi)容
說明： 只有文檔內(nèi)容為空才會顯示此屬性設(shè)定的值。
示例：
姓名：<input type="text" placeholder="請輸入真實(shí)姓名" />
readonly ：設(shè)置元素是否只讀
required ：設(shè)置控件是否為必填項
說明： 當(dāng)提交表單時，才會驗(yàn)證此元素是否填寫，若沒有填寫，將顯示警告信息并取消提交操作。
示例：
<form action="#" >
<p>用戶名：<input type="text" name="loginName" required /></p>
<input type="submit" />
</form>
方法
- <input>元素在HTML5中增加了2個與校驗(yàn)相關(guān)的方法：
- checkValidity() ：判斷控件的內(nèi)容是否校驗(yàn)通過。
- setCustomValidity() ：設(shè)置校驗(yàn)不通過時的自定義信息。
- boolean checkValidity() ：判斷控件的內(nèi)容是否校驗(yàn)通過
返回值：
{boolean} 返回一個boolean值表示控件內(nèi)容是否校驗(yàn)通過。
示例：
HTML：
網(wǎng)址：<input type="url" id="webURL" />
JavaScript：
// 內(nèi)容為：www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => false ：驗(yàn)證不通過
// 內(nèi)容為：http://www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => true ：驗(yàn)證通過
void setCustomValidity(string msg) ：設(shè)置校驗(yàn)不通過時的自定義信息
說明：在此元素上彈出一個警告框，顯示自定義信息。
注意：只有表單驗(yàn)證時才會顯示自定義的警告信息。
參數(shù)：
msg {string} ：設(shè)置需要顯示的信息。若為空值，將關(guān)閉警告框。
示例：
HTML：
<form>
<p>新的密碼：<input type="password" id="newPwd" oninput="validityPwd()" required /></p>
<p>確認(rèn)密碼：<input type="password" id="newPwdConfirm" oninput="validityPwd()" /></p>
<input type="submit" />
</form>
JavaScript：
// 校驗(yàn)2個密碼是否一致
var validityPwd = function(){
var newPwd = document.getElementById('newPwd');
var newPwdConfirm = document.getElementById('newPwdConfirm');
if(newPwd.value != newPwdConfirm.value){
newPwdConfirm.setCustomValidity('兩次密碼輸入不一致');
}else{
newPwdConfirm.setCustomValidity('');
}
}
新的控件
<input>元素的type屬性的值，決定了<input>元素顯示什么控件。
HTML5中，給<input>增加了許多新的控件，如color、date、email、month、number、range、search、tel、time、url、week等等。
若瀏覽器不支持新的控件，將默認(rèn)以文本框展示(type="text")。
簡單介紹
- <input>元素type屬性的值：
- color ：顏色控件。<>
- date ：日期控件。<>
- email ：電子郵件地址輸入框。<>
- month ：年月日歷控件。<>
- number ：數(shù)值輸入框。<>
- range ：滑動條。<>
- search ：搜索框。<>
- tel ：電話號碼輸入框。<>
- time ：時間控件。<>
- url ：網(wǎng)址輸入框。<>
- week ：周數(shù)控件。<>
type="color" ：顏色控件
說明：顯示一個顏色控件，點(diǎn)擊選中需要的顏色。
屬性：
value {string} ：設(shè)置或獲取顏色控件的值，值的格式要為："#rrggbb"。
示例：
<input type="color" />
type="date" ：日期控件
說明：顯示一個日期控件，提供年月日的選擇或自行輸入。
屬性：
value {string} ：設(shè)置或獲取日期控件的值，值的格式要為："yyyy-MM-dd"。
示例：
<input type="date" value="2016-04-29" />
type="email" ：電子郵件地址輸入框
說明：顯示一個只能輸入電子郵件格式的輸入框。
屬性：
multiple ：添加此屬性后支持輸入多個電子郵件地址，必須以','逗號隔開。
示例：
<input type="email" multiple />
type="month" ：年月控件
說明：提供一個只能選擇年、月的日歷控件。
屬性：
value {string} ：設(shè)置或獲取控件的值，值的格式要為："yyyy-MM"。
示例：
<input type="month" value="2016-04" />
type="number" ：數(shù)值輸入框
說明：只能輸入數(shù)值相關(guān)字符，如數(shù)字、.(小數(shù)點(diǎn))、-(負(fù)號)等。
屬性：max表示數(shù)值最大值；min表示數(shù)值最小值；step表示微調(diào)按鈕每次跳動的大小。
示例：
<input type="number" value="11.5" />
type="range" ：滑動條
說明：以滑動條的形式表示數(shù)值。
屬性：max表示數(shù)值最大值；min表示數(shù)值最小值。
示例：
<input type="range" max="100" min="0" value="80" />
type="search" ：搜索框
說明：在Chrome中搜索框沒內(nèi)容時就像普通的文本輸入框，當(dāng)有內(nèi)容時右邊有個'x'符號，用以清除文本內(nèi)容。
示例
<input type="search" />
type="tel" ：電話號碼輸入框
說明：電話號碼的格式非常多，可包含數(shù)字、橫線、括號等。瀏覽器并沒有制定電話號碼格式，只是在移動端瀏覽器使用時默認(rèn)顯示數(shù)字鍵盤。
示例：
<input type="tel" />
type="time" ：時間控件
說明：顯示一個時間控件，提供時間的選擇或自行輸入。
屬性：
value {string} ：設(shè)置或獲取時間控件的值，值的格式要為："HH:mm",、"HH:mm:ss" 或 "HH:mm:ss.SSS"。
示例：
<input type="time" value="12:30" />
type="url" ：網(wǎng)址輸入框
說明：輸入的網(wǎng)址要加上協(xié)議前綴；如http://、https:// 等。
示例：
<input type="url" />
type="week" ：周數(shù)控件
說明：顯示一個可選擇年數(shù)、周數(shù)的日歷控件。
屬性：
value {string} ：設(shè)置或獲取周數(shù)控件的值，值的格式要為："yyyy-Www"。(格式中的W字符不能省略，并且ww周數(shù)要為2位數(shù))
示例：
<input type="week" value="2016-W01"/>
相關(guān)文章
詳解移動端HTML5頁面端去掉input輸入框的白色背景和邊框（兼容Android
本篇文章主要介紹了移動端HTML5頁面端去掉input輸入框的白色背景和邊框，非常具有實(shí)用價值，需要的朋友可以參考下。2016-12-15- 這篇文章主要介紹了HTML5新增的8類INPUT輸入類型介紹,這8個新的輸入類型分別是email類型、url類型、number類型、range類型、日期類型、search類型、tel類型,本文分別對它們2015-07-06
- 有時候?yàn)g覽器有很多緩存，我們就執(zhí)行不了某種操作，必須要清除緩存才可以運(yùn)行，其實(shí)多數(shù)瀏覽器默認(rèn)會緩存input的值，只有使用ctl+F5強(qiáng)制刷新的才可以清除緩存記錄。如果不2014-11-11
- 前的工作要完成,記錄一個html5中的input新屬性，range。發(fā)現(xiàn)這個屬性是在一個網(wǎng)站的調(diào)色器中，感覺確實(shí)比較形象化，好看，喜歡的朋友可以看看2014-09-05
HTML5 input placeholder 顏色修改示例
這篇文章主要介紹了有關(guān)HTML5 input placeholder 顏色修改方面的知識，需要的朋友可以參考下2014-05-30HTML 5 input placeholder 屬性如何完美兼任ie
這篇文章主要介紹了HTML 5 input placeholder 屬性完美兼任ie的方法,需要的朋友可以參考下2014-05-12- HTML5改進(jìn)的地方想必大家有所知曉，下面我要介紹的是兩個新的input元素類型email和url。讓我們跟著代碼來看看他們的好處，感興趣的朋友可以參考下2013-08-13
- 今天我剛接觸html+css3感覺還不錯，下面為大家介紹下用到的input 屬性，感興趣的朋友可以看下截圖哈，希望對大家有所幫助2013-06-28
html4和html5區(qū)別之如何在一個input上添加焦點(diǎn)實(shí)現(xiàn)代碼
如何在一個input上添加焦點(diǎn),有很多的實(shí)現(xiàn)方法，本文分別用html4和html5做了下演示，感興趣的朋友可以參考下，或許本文對你有所幫助2013-02-07input file上傳文件樣式支持html5的瀏覽器解決方案
最近在使用file上傳控件，發(fā)現(xiàn)了file上傳控件的兩個兼容性問題:一個是file上傳控件在火狐下無法通過css改變width，另一個是file上傳控件在不同的瀏覽器下的外觀和行為都不2012-11-14
