這篇文章給大家分享的是有關(guān)html5中input元素新特性有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)市南,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
屬性
元素在HTML5中新增加的屬性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。
簡單描述
新增加的屬性描述如下：
autocomplete ：是否顯示與現(xiàn)在輸入內(nèi)容相匹配的歷史輸入記錄。
autofocus ：當(dāng)頁面加載完成后，此元素獲得焦點。
form ：設(shè)置元素歸屬表單的ID。
formaction ：設(shè)置表單action屬性的值。
formenctype ：設(shè)置表單enctype屬性的值。
formmethod ：設(shè)置表單method屬性的值。
formnovalidate ：關(guān)閉表單的驗證。
formtarget ：設(shè)置表單target屬性的值。
max ：設(shè)置元素中數(shù)字或日期控件的最大值。
min ：設(shè)置元素中數(shù)字或日期控件的最小值。
minlength ：設(shè)置文本輸入控件的內(nèi)容最小長度。
pattern ：設(shè)置元素文本內(nèi)容需匹配的正則表達式。
placeholder ：設(shè)置文本控件的預(yù)先顯示內(nèi)容。
readonly ：設(shè)置元素是否只讀。
required ：設(shè)置控件是否為必填項。
autocomplete ：是否顯示與現(xiàn)在輸入內(nèi)容相匹配的歷史輸入記錄
說明：設(shè)置當(dāng)前文本元素中是否顯示與現(xiàn)在內(nèi)容相匹配的歷史輸入記錄。
場景：搜索框需要此屬性，而驗證碼就不需要。
可設(shè)置的值：只可以設(shè)置on、off兩個值。
autocomplete="on" ：顯示匹配的歷史輸入記錄。
autocomplete="off" ：不顯示匹配的歷史輸入記錄。
示例：
驗證碼：
autofocus ：當(dāng)頁面加載完成后，此元素獲得焦點
說明：若頁面中有多個元素含有此屬性，只會最前面的元素獲得焦點。
示例：
姓名：
地址：
form ：設(shè)置元素歸屬表單的ID
說明：若元素不在表單標(biāo)簽里，可設(shè)置此值為需要歸屬的表單ID。
示例：
formaction ：設(shè)置表單action屬性的值
formenctype ：設(shè)置表單enctype屬性的值
formmethod ：設(shè)置表單method屬性的值
說明：可設(shè)置的值為post、get等。
formnovalidate ：關(guān)閉表單的驗證。
說明：可應(yīng)用于類似【暫存】操作。
示例：
用戶名：
formtarget ：設(shè)置表單target屬性的值
說明：可設(shè)置的值為_self、_blank、_parent、_top等。
max ：設(shè)置元素中數(shù)字或日期控件的最大值
min ：設(shè)置元素中數(shù)字或日期控件的最小值
minlength ：設(shè)置文本輸入控件的內(nèi)容最小長度
pattern ：設(shè)置元素文本內(nèi)容需匹配的正則表達式
說明： 元素文本內(nèi)容指定的正則表達式完全匹配才會驗證通過。
注意：
1) 瀏覽器不會驗證空值，若想必填可加上 required 屬性。
2) 若含有title屬性的值，當(dāng)匹配失敗會顯示title的信息。
示例：
手機號碼：
placeholder ：設(shè)置文本控件的預(yù)先顯示內(nèi)容
說明： 只有文檔內(nèi)容為空才會顯示此屬性設(shè)定的值。
示例：
姓名：
readonly ：設(shè)置元素是否只讀
required ：設(shè)置控件是否為必填項
說明： 當(dāng)提交表單時，才會驗證此元素是否填寫，若沒有填寫，將顯示警告信息并取消提交操作。
示例：
用戶名：
方法
元素在HTML5中增加了2個與校驗相關(guān)的方法：
checkValidity() ：判斷控件的內(nèi)容是否校驗通過。
setCustomValidity() ：設(shè)置校驗不通過時的自定義信息。
boolean checkValidity() ：判斷控件的內(nèi)容是否校驗通過
返回值：
{boolean} 返回一個boolean值表示控件內(nèi)容是否校驗通過。
示例：
HTML：
網(wǎng)址：
JavaScript：
// 內(nèi)容為：www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => false ：驗證不通過
// 內(nèi)容為：http://www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => true ：驗證通過void setCustomValidity(string msg) ：設(shè)置校驗不通過時的自定義信息
說明：在此元素上彈出一個警告框，顯示自定義信息。
注意：只有表單驗證時才會顯示自定義的警告信息。
參數(shù)：
msg {string} ：設(shè)置需要顯示的信息。若為空值，將關(guān)閉警告框。
示例：
HTML：
JavaScript：
// 校驗2個密碼是否一致
var validityPwd = function(){
var newPwd = document.getElementById('newPwd');
var newPwdConfirm = document.getElementById('newPwdConfirm');
if(newPwd.value != newPwdConfirm.value){
newPwdConfirm.setCustomValidity('兩次密碼輸入不一致');
}else{
newPwdConfirm.setCustomValidity('');
}
}
新的控件
元素的type屬性的值，決定了元素顯示什么控件。
HTML5中，給增加了許多新的控件，如color、date、email、month、number、range、search、tel、time、url、week等等。
若瀏覽器不支持新的控件，將默認以文本框展示(type="text")。
簡單介紹
元素type屬性的值：
color ：顏色控件。<>
date ：日期控件。<>
email ：電子郵件地址輸入框。<>
month ：年月日歷控件。<>
number ：數(shù)值輸入框。<>
range ：滑動條。<>
search ：搜索框。<>
tel ：電話號碼輸入框。<>
time ：時間控件。<>
url ：網(wǎng)址輸入框。<>
week ：周數(shù)控件。<>
type="color" ：顏色控件
說明：顯示一個顏色控件，點擊選中需要的顏色。
屬性：
value {string} ：設(shè)置或獲取顏色控件的值，值的格式要為："#rrggbb"。
示例：
type="date" ：日期控件
說明：顯示一個日期控件，提供年月日的選擇或自行輸入。
屬性：
value {string} ：設(shè)置或獲取日期控件的值，值的格式要為："yyyy-MM-dd"。
示例：
type="email" ：電子郵件地址輸入框
說明：顯示一個只能輸入電子郵件格式的輸入框。
屬性：
multiple ：添加此屬性后支持輸入多個電子郵件地址，必須以','逗號隔開。
示例：
type="month" ：年月控件
說明：提供一個只能選擇年、月的日歷控件。
屬性：
value {string} ：設(shè)置或獲取控件的值，值的格式要為："yyyy-MM"。
示例：
type="number" ：數(shù)值輸入框
說明：只能輸入數(shù)值相關(guān)字符，如數(shù)字、.(小數(shù)點)、-(負號)等。
屬性：max表示數(shù)值最大值；min表示數(shù)值最小值；step表示微調(diào)按鈕每次跳動的大小。
示例：
type="range" ：滑動條
說明：以滑動條的形式表示數(shù)值。
屬性：max表示數(shù)值最大值；min表示數(shù)值最小值。
示例：
type="search" ：搜索框
說明：在Chrome中搜索框沒內(nèi)容時就像普通的文本輸入框，當(dāng)有內(nèi)容時右邊有個'x'符號，用以清除文本內(nèi)容。
示例
type="tel" ：電話號碼輸入框
說明：電話號碼的格式非常多，可包含數(shù)字、橫線、括號等。瀏覽器并沒有制定電話號碼格式，只是在移動端瀏覽器使用時默認顯示數(shù)字鍵盤。
示例：
type="time" ：時間控件
說明：顯示一個時間控件，提供時間的選擇或自行輸入。
屬性：
value {string} ：設(shè)置或獲取時間控件的值，值的格式要為："HH:mm",、"HH:mm:ss" 或 "HH:mm:ss.SSS"。
示例：
type="url" ：網(wǎng)址輸入框
說明：輸入的網(wǎng)址要加上協(xié)議前綴；如http://、https:// 等。
示例：
type="week" ：周數(shù)控件
說明：顯示一個可選擇年數(shù)、周數(shù)的日歷控件。
屬性：
value {string} ：設(shè)置或獲取周數(shù)控件的值，值的格式要為："yyyy-Www"。(格式中的W字符不能省略，并且ww周數(shù)要為2位數(shù))
示例：
感謝各位的閱讀！關(guān)于“html5中input元素新特性有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
本文題目：html5中input元素新特性有哪些
標(biāo)題網(wǎng)址：
http://weahome.cn/article/jsoicg.html
重慶分公司
重慶分公司
