HTML5 input元素新的特性

 　　在HTML5中，<input>元素增長了許多新的屬性、方法及控件。本文章分別對這三方面進行介紹。

目錄

1. 屬性

2. 方法

3. 新控件 

 

1. 屬性

<input>元素在HTML5中新增長的屬性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。

1.1 簡單描述

新增長的屬性描述以下：

autocomplete ：是否顯示與如今輸入內容相匹配的歷史輸入記錄。<詳細介紹>

autofocus ：當頁面加載完成後，此元素得到焦點。<詳細介紹>

form ：設置元素歸屬表單的ID。<詳細介紹>

formaction ：設置表單action屬性的值。<詳細介紹>

formenctype ：設置表單enctype屬性的值。<詳細介紹>

formmethod ：設置表單method屬性的值。<詳細介紹>

formnovalidate ：關閉表單的驗證。<詳細介紹>

formtarget ：設置表單target屬性的值。<詳細介紹>

max ：設置<input>元素中數字或日期控件的最大值。<詳細介紹>

min ：設置<input>元素中數字或日期控件的最小值。<詳細介紹>

minlength ：設置文本輸入控件的內容最小長度。<詳細介紹>

pattern ：設置元素文本內容需匹配的正則表達式。<詳細介紹>

placeholder ：設置文本控件的預先顯示內容。<詳細介紹>

readonly ：設置元素是否只讀。<詳細介紹>

required ：設置控件是否爲必填項。<詳細介紹>

 

1.2 詳細介紹

1) autocomplete ：是否顯示與如今輸入內容相匹配的歷史輸入記錄

說明：設置當前文本元素中是否顯示與如今內容相匹配的歷史輸入記錄。

場景：搜索框須要此屬性，而驗證碼就不須要。

可設置的值：只能夠設置on、off兩個值。

　　autocomplete="on" ：顯示匹配的歷史輸入記錄。

　　autocomplete="off" ：不顯示匹配的歷史輸入記錄。

示例：

<form action="#" >
    <p>驗證碼：<input type="text" autocomplete="off" /></p>
    <input type="submit" />
</form>

 

2) autofocus ：當頁面加載完成後，此元素得到焦點

說明：若頁面中有多個元素含有此屬性，只會最前面的元素得到焦點。

示例：

<p>姓名：<input type="text" placeholder="請輸入真實姓名" /></p>
<p>地址：<input type="text" autofocus /></p>

 

3) form ：設置元素歸屬表單的ID

說明：若元素不在表單標籤裏，可設置此值爲須要歸屬的表單ID。

示例：

<input type="text" form="register_form" />

 

4) formaction ：設置表單action屬性的值

 

5) formenctype ：設置表單enctype屬性的值

 

6) formmethod ：設置表單method屬性的值

說明：可設置的值爲post、get等。

 

7) formnovalidate ：關閉表單的驗證。

說明：可應用於相似【暫存】操做。

示例：

<form action="#"  >
    <p>用戶名：<input type="text" name="loginName" required /></p>
    <input type="button" value="暫存" formnovalidate />
    <input type="submit" />
</form>

 

8) formtarget ：設置表單target屬性的值

說明：可設置的值爲_self、_blank、_parent、_top等。

 

9) max ：設置<input>元素中數字或日期控件的最大值

 

10) min ：設置<input>元素中數字或日期控件的最小值

 

11) minlength ：設置文本輸入控件的內容最小長度

 

12) pattern ：設置元素文本內容需匹配的正則表達式

說明： 元素文本內容指定的正則表達式徹底匹配纔會驗證經過。

注意：

1) 瀏覽器不會驗證空值，若想必填可加上 required 屬性。

2) 若含有title屬性的值，當匹配失敗會顯示title的信息。

示例：

<form action="#"  >
    <p>手機號碼：<input type="text" name="phoneNumber" pattern="[1]([3]|[5])[0-9]{9}" title="13或15開頭的手機號碼" /></p>
    <input type="submit" />
</form>

  

13) placeholder ：設置文本控件的預先顯示內容

說明： 只有文檔內容爲空纔會顯示此屬性設定的值。

示例：

姓名：<input type="text" placeholder="請輸入真實姓名" />

 

14) readonly ：設置元素是否只讀

 

15) required ：設置控件是否爲必填項

說明： 當提交表單時，纔會驗證此元素是否填寫，若沒有填寫，將顯示警告信息並取消提交操做。

示例：

<form action="#" >
    <p>用戶名：<input type="text" name="loginName" required /></p>
    <input type="submit" />
</form>

 

2. 方法

<input>元素在HTML5中增長了2個與校驗相關的方法：

checkValidity() ：判斷控件的內容是否校驗經過。

setCustomValidity() ：設置校驗不經過時的自定義信息。

2.1 詳細介紹

1) boolean checkValidity() ：判斷控件的內容是否校驗經過

返回值：

{boolean} 返回一個boolean值表示控件內容是否校驗經過。

示例：

HTML：

網址：<input type="url" id="webURL" />

JavaScript：

// 內容爲：www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => false ：驗證不經過

// 內容爲：http://www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => true ：驗證經過

  

2) void setCustomValidity(string msg) ：設置校驗不經過時的自定義信息

說明：在此元素上彈出一個警告框，顯示自定義信息。

注意：只有表單驗證時纔會顯示自定義的警告信息。

參數：

msg {string} ：設置須要顯示的信息。若爲空值，將關閉警告框。

示例：

HTML：

<form>
    <p>新的密碼：<input type="password" id="newPwd" oninput="validityPwd()" required /></p>
    <p>確認密碼：<input type="password" id="newPwdConfirm" oninput="validityPwd()"  /></p>
    <input type="submit" />
</form>

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('');
    }
}

 

 

3. 新的控件

<input>元素的type屬性的值，決定了<input>元素顯示什麼控件。

HTML5中，給<input>增長了許多新的控件，如color、date、email、month、number、range、search、tel、time、url、week等等。

若瀏覽器不支持新的控件，將默認以文本框展現(type="text")。

 

2.1 簡單介紹

<input>元素type屬性的值：

color ：顏色控件。<詳細介紹>

date ：日期控件。<詳細介紹>

email ：電子郵件地址輸入框。<詳細介紹>

month ：年月日曆控件。<詳細介紹>

number ：數值輸入框。<詳細介紹>

range ：滑動條。<詳細介紹>

search ：搜索框。<詳細介紹>

tel ：電話號碼輸入框。<詳細介紹>

time ：時間控件。<詳細介紹>

url ：網址輸入框。<詳細介紹>

week ：週數控件。<詳細介紹>

 

2.2 詳細介紹

1) type="color" ：顏色控件

說明：顯示一個顏色控件，點擊選中須要的顏色。

屬性：

value {string} ：設置或獲取顏色控件的值，值的格式要爲："#rrggbb"。

示例：

<input type="color" />

 

2) type="date" ：日期控件

說明：顯示一個日期控件，提供年月日的選擇或自行輸入。

屬性：

value {string} ：設置或獲取日期控件的值，值的格式要爲："yyyy-MM-dd"。

示例：

<input type="date" value="2016-04-29" />

 

3) type="email" ：電子郵件地址輸入框

說明：顯示一個只能輸入電子郵件格式的輸入框。

屬性：

multiple ：添加此屬性後支持輸入多個電子郵件地址，必須以','逗號隔開。

示例：

<input type="email" multiple />

 

4) type="month" ：年月控件

說明：提供一個只能選擇年、月的日曆控件。

屬性：

value {string} ：設置或獲取控件的值，值的格式要爲："yyyy-MM"。

示例：

<input type="month" value="2016-04" />

 

5) type="number" ：數值輸入框

說明：只能輸入數值相關字符，如數字、.(小數點)、-(負號)等。

屬性：max表示數值最大值；min表示數值最小值；step表示微調按鈕每次跳動的大小。

示例：

<input type="number" value="11.5" />

 

 

6) type="range" ：滑動條

說明：以滑動條的形式表示數值。

屬性：max表示數值最大值；min表示數值最小值。

示例：

<input type="range" max="100" min="0" value="80" />

 

 

7) type="search" ：搜索框

說明：在Chrome中搜索框沒內容時就像普通的文本輸入框，當有內容時右邊有個'x'符號，用以清除文本內容。

示例：

<input type="search" />

 

 

8) type="tel" ：電話號碼輸入框

說明：電話號碼的格式很是多，可包含數字、橫線、括號等。瀏覽器並無制定電話號碼格式，只是在移動端瀏覽器使用時默認顯示數字鍵盤。

示例：

<input type="tel" />

 

9) type="time" ：時間控件

說明：顯示一個時間控件，提供時間的選擇或自行輸入。

屬性：

value {string} ：設置或獲取時間控件的值，值的格式要爲："HH:mm",、"HH:mm:ss" 或 "HH:mm:ss.SSS"。

示例：

<input type="time" value="12:30" />

　

 

10) type="url" ：網址輸入框

說明：輸入的網址要加上協議前綴；如http://、https:// 等。

示例：

<input type="url" />

 

 

11) type="week" ：週數控件

說明：顯示一個可選擇年數、週數的日曆控件。

屬性：

value {string} ：設置或獲取週數控件的值，值的格式要爲："yyyy-Www"。(格式中的W字符不能省略，而且ww週數要爲2位數)

示例：

<input type="week" value="2016-W01"/>

 

End

Web開發之路系列文章

菜單加載中...