今天將和大家分享HTML5中新表單元素和它們的用法，有一定的參考價(jià)值，希望對大家有所幫助。

HTML5引入了新的表單元素，為所有表單元素提供了一些新的好處。在設(shè)計(jì)和構(gòu)建網(wǎng)頁時(shí)，我們可以將這些新屬性和功能應(yīng)用于任何表單元素上，接下來在文章中將和大家詳細(xì)介紹如何使用它們

HTML5新的表單元素

datalist

規(guī)定輸入域的選項(xiàng)列表，列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的

注意：option元素要設(shè)置value值

<form action="#" method="get"> 選課： <input type="text" list="subject" /> <datalist  id="subject"> 	<option label="Math" value="數(shù)學(xué)" /> 	<option label="English" value="英語" /> 	<option label="Chinese" value="語文" /> </datalist> <input type="submit" /> </form>

keygen

作用是提供一種驗(yàn)證用戶的可靠方法。

當(dāng)提交表單時(shí)，會生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）

<form action="#" method="get"> 用戶名<input type="text" name="username" /> 密碼：<input type="password" name="password" /> <keygen name="security" /> <input type="submit" /> </form>

output

用于不同類型的輸出，比如計(jì)算或腳本輸出
oninput

實(shí)時(shí)監(jiān)控輸入框值的變化（注意在IE9下oninput不兼容）

<form oninput="c.value=parseInt(a.value)+parseInt(b.value)"> 		<input type="text" name="加數(shù)" id="a">+ 		<input type="text" name="被加數(shù)" id="b">= 		<output name="c" for="a b"></output> 	</form>

總結(jié)：