HTML5新添加的表單功能有哪些

小編給大家分享一下HTML5新添加的表單功能有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

HTML5針對(duì)表單方面也做了一些完善，新添加了一些驗(yàn)證數(shù)據(jù)的功能，新添加了一些標(biāo)簽屬性。有了這些驗(yàn)證功能，就可以不用JavaScript進(jìn)行驗(yàn)證，哪怕是JavaScript被禁用了也可以毫無(wú)壓力的驗(yàn)證表單了。開(kāi)發(fā)人員不用JavaScript，瀏覽器會(huì)根據(jù)標(biāo)記中的規(guī)則執(zhí)行驗(yàn)證，然后顯示適當(dāng)?shù)腻e(cuò)誤信息。這些人性化的功能在支持HTML5的瀏覽器中才能有效，支持的瀏覽器有Opera 10+、Safari 5+、Chrome和Firefox 4+。

　　HTML5新添加的表單功能有：其他輸入類型、輸入模式、數(shù)值范圍、必填字段、禁用驗(yàn)證和檢測(cè)有效性。

1、其他輸入類型

　　說(shuō)到輸入類型，大家很快的就會(huì)想到input標(biāo)簽。只有input標(biāo)簽才可以規(guī)定不同的類型。HTML5恰恰就是在input中的type屬性添加了一些新的屬性值。這些新的屬性值不僅可以反映數(shù)據(jù)類型的信息，還可以提供一些默認(rèn)的驗(yàn)證功能。其中，”email”和”url”是兩個(gè)得到支持最多的類型，各瀏覽器也為它們?cè)黾恿硕ㄖ频尿?yàn)證機(jī)制。新添加的類型如下

　　email : 電子郵箱文本框，跟普通的沒(méi)什么區(qū)別，當(dāng)輸入不是郵箱的時(shí)候，驗(yàn)證通不過(guò)。移動(dòng)端的鍵盤(pán)會(huì)有變化

　　tel : 電話號(hào)碼

　　url : 網(wǎng)頁(yè)的URL

　　search : 搜索引擎。chrome下輸入文字后，會(huì)多出一個(gè)關(guān)閉的X

　　range : 特定范圍內(nèi)的數(shù)值選擇器，min、max、step( 步數(shù) )

　　number : 只能包含數(shù)字的輸入框

　　color : 顏色選擇器

　　datetime : 顯示完整日期

　　datetime-local : 顯示完整日期，不含時(shí)區(qū)

　　time : 顯示時(shí)間，不含時(shí)區(qū)

　　date : 顯示日期

　　week : 顯示周

　　month : 顯示月

小例子HTML代碼

<form action="http://www.baidu.com">
    <input type="email" />
    <input type="tel" />
    <input type="url" />
    <input type="search"/>
    <input type="range" min="0" max="10" step="2" />
    <input type="number"/>
    <input type="color"/>
    <input type="date"/>
    <input type="datetime"/>
    <input type="datetime-local"/>
    <input type="time"/>
    <input type="month"/>
    <input type="week"/>
    <!-- placeholder是讓密碼輸入框擁有默認(rèn)提示 -->
    <input type="password" placeholder="請(qǐng)輸入密碼"/>
    <input type="submit"/>
</form>

2、輸入模式

　　HTML5不僅新添加了一些新的輸入類型，還添加了新的屬性——patten屬性。Patten屬性的值是一個(gè)正則表達(dá)式，是用于匹配文本框中的值。在寫(xiě)正則的時(shí)候要注意，開(kāi)頭和結(jié)尾不用加^和$符號(hào)(假定已經(jīng)有了)。這兩個(gè)符號(hào)表示輸入的值必須是從頭到尾與模式匹配。小例子如下

HTML代碼

<form action="#">
    <input type="text" name="user" pattern="\d{1,9}"/>
    <!-- 點(diǎn)擊之后 會(huì)本頁(yè)面提交-->
    <input type="submit"/>
</form>

Chrome預(yù)覽效果

3、數(shù)值范圍

　　除了”email”和”url”，HTML5還定義了另外幾個(gè)輸入元素。這幾個(gè)元素都要求填寫(xiě)某種基于數(shù)字的值。但是瀏覽器對(duì)這些新添加的值兼容性并不是很好。所以對(duì)這些數(shù)值類型的輸入元素，可以指定min屬性(最小的可能值)、max屬性(最大的可能值)和step屬性(從min到max的兩個(gè)刻度之間的差值)。小例子如下

HTML代碼

<input type="range" min="0" max="10" step="2" id="range" />

JavaScript代碼

var oInput=document.getElementById("range");
oInput.stepUp() //每次加1
oInput.stepUp(5) //每次加5
oInput.stepDown() //每次減1
oInput.stepDown(10) //每次減10

4、必填字段

　　在表單字段中指定required屬性，即可提示用戶這是為必填項(xiàng)不能為空。這個(gè)屬性適用于input標(biāo)簽，textarea標(biāo)簽，select標(biāo)簽(Opera 12+支持)。在JavaScript中通過(guò)對(duì)于的required屬性，可以檢測(cè)表單是否為必填項(xiàng)。

　　對(duì)于空著的必填字段，不同瀏覽器的處理方式不同。Opera 11和Firefox 4會(huì)阻止表單提交病在相應(yīng)字段下面彈出幫助框，Chrome(9之前)和Safari(5之前)則什么都不做也不阻止表單提交。小例子如下

HTML代碼

<input type="text" id="text" required/>

JavaScript代碼

//檢驗(yàn)是否支持必填屬性
//支持的為true ，不支持的為false
var is = "required" in document.createElement("input");

5、禁用驗(yàn)證

　　通過(guò)在form標(biāo)簽中添加novalidate屬性，可以讓表單不自行驗(yàn)證。JavaScript中可以使用novalidate獲取，若存在則是true，反之則是false。如果提交按鈕有多個(gè)，為了指定點(diǎn)擊某一個(gè)提交按鈕不必驗(yàn)證表單，可以在相應(yīng)的按鈕上添加formnovalidate屬性。也可用JavaScript添加禁用驗(yàn)證的屬性。小例子如下

HTML代碼

<form action="http://blog.csdn.net/lee_magnum">
	<input type="text" id="text" required/>
    <input type="submit" value="跳過(guò)驗(yàn)證，直接提交" formnovalidate/>
</form>
<form action="http://blog.csdn.net/lee_magnum" novalidate>
	<input type="text" id="text" required/>
    <input type="submit" value="直接提交"/>
</form>

6、檢測(cè)有效性，及新添屬性和方法

　　在JavaScript中使用checkValidity()方法可以檢測(cè)表單中的某個(gè)字段是否有效。所有表單字段都有這個(gè)方法，如果字段的值是有效的，這份方法會(huì)返回true，否則則是false。與checkValidity()方法相比，validity屬性可以告訴你很多東西。

　　valueMissing : 輸入值為空時(shí)

　　typeMismatch : 控件值與預(yù)期類型不匹配

　　patternMismatch : 輸入值不滿足pattern正則

　　tooLong : 超過(guò)maxLength最大限制

　　rangeUnderflow : 驗(yàn)證的range最小值

　　rangeOverflow：驗(yàn)證的range最大值

　　stepMismatch: 驗(yàn)證range 的當(dāng)前值 是否符合min、max及step的規(guī)則

　　customError： 不符合自定義驗(yàn)證，是否設(shè)置setCustomValidity(); 自定義驗(yàn)證

　　placeholder : 輸入框提示信息

　　autocomplete : 是否保存用戶輸入值。默認(rèn)為on，關(guān)閉提示選擇off

　　autofocus : 指定表單獲取輸入焦點(diǎn)

　　list和datalist : 為輸入框構(gòu)造一個(gè)選擇列表。list值為datalist標(biāo)簽的id

　　Formaction : 在submit里定義提交地址

小例子JavaScript代碼

if(input.validity && !input.validity.valid){
	if(input.validity.valueMissing){
		alert("不能為空")
	}else if(input.validity.typeMismatch){
		alert("控件值與預(yù)期類型不匹配");
	}
}

以上是“HTML5新添加的表單功能有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！