html5新表單屬性有：autocomplete、novalidate、autofocus、form、formaction、formmethod、formnovalidate、formtarget、list、min、max、step等等。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML5 新的表單屬性

HTML5 的 <form> 和 <input>標(biāo)簽添加了幾個(gè)新屬性.

<form>新屬性：

• autocomplete

• novalidate

<input>新屬性：

• autocomplete：自動(dòng)補(bǔ)全，是否自動(dòng)記錄之前提交的數(shù)據(jù)，以用于下一次輸入建議。

• autofocus：自動(dòng)獲得輸入焦點(diǎn)。

• form：值為某個(gè)表單的id，若設(shè)置，則該輸入域可放在該表單外面。

• formaction：用于描述表單提交的URL地址

• formenctype：描述了表單提交到服務(wù)器的數(shù)據(jù)編碼 (只對(duì)form表單中 method="post" 表單)

• formmethod：定義了表單提交的方式。

• formnovalidate：描述了 <input> 元素在表單提交時(shí)無(wú)需被驗(yàn)證。

• formtarget：指定一個(gè)名稱(chēng)或一個(gè)關(guān)鍵字來(lái)指明表單提交數(shù)據(jù)接收后的展示。

• height 與 width：規(guī)定用于 image 類(lèi)型的 <input> 標(biāo)簽的圖像高度和寬度。

• list：規(guī)定輸入域的 datalist。datalist 是輸入域的選項(xiàng)列表。

• min 與 max：限定輸入數(shù)字的最小值或最大值

• multiple：是否允許多個(gè)輸入值，若聲明該屬性，那么輸入框中允許輸入多個(gè)用逗號(hào)隔開(kāi)的值。

• pattern (regexp)：指定一個(gè)正則表達(dá)式，對(duì)輸入進(jìn)行驗(yàn)證。(正則默認(rèn)首尾加^$)

• placeholder：占位符，用于在輸入框中顯示提示性文字，與value不同，不能被提交。

• required：在表單提交時(shí)會(huì)驗(yàn)證是否有輸入，沒(méi)有則彈出提示消息。

• step：限定輸入數(shù)字的步長(zhǎng)，與min連用。

• maxlength：限制最大長(zhǎng)度，只有在有輸入的情況下才有用，不區(qū)分中英文。

• minlength：限制最小長(zhǎng)度，但它不是H5標(biāo)準(zhǔn)屬性，僅部分瀏覽器支持。

<form> novalidate 屬性

novalidate 屬性是一個(gè) boolean(布爾) 屬性.

novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。

示例：無(wú)需驗(yàn)證提交的表單數(shù)據(jù)

<form action="demo-form.php" novalidate>   E-mail: <input type="email" name="user_email">   <input type="submit"></form>

<form> 或<input> autocomplete 屬性

autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能。

當(dāng)用戶(hù)在自動(dòng)完成域中開(kāi)始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫(xiě)的選項(xiàng)。

提示: autocomplete 屬性有可能在 form元素中是開(kāi)啟的，而在input元素中是關(guān)閉的。

注意: autocomplete 適用于 <form> 標(biāo)簽，以及以下類(lèi)型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

示例：form 中開(kāi)啟 autocomplete (一個(gè) input 字段關(guān)閉 autocomplete ):

<form action="demo-form.php" autocomplete="on">   First name:<input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   E-mail: <input type="email" name="email" autocomplete="off"><br>   <input type="submit"> </form>

提示:某些瀏覽器中，您可能需要啟用自動(dòng)完成功能，以使該屬性生效。

<form> novalidate 屬性

novalidate 屬性是一個(gè) boolean(布爾) 屬性.

novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。

示例：無(wú)需驗(yàn)證提交的表單數(shù)據(jù)

<form action="demo-form.php" novalidate>   E-mail: <input type="email" name="user_email">   <input type="submit"> </form>

<input> formaction 屬性

The formaction 屬性用于描述表單提交的URL地址.

The formaction 屬性會(huì)覆蓋<form> 元素中的action屬性.

注意: The formaction 屬性用于 type="submit" 和 type="image".

示例：以下HTMLform表單包含了兩個(gè)不同地址的提交按鈕：

<form action="demo-form.php">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="提交"><br>   <input type="submit" formaction="demo-admin.php"   value="提交"> </form>

<input> formenctype 屬性

formenctype 屬性描述了表單提交到服務(wù)器的數(shù)據(jù)編碼 (只對(duì)form表單中 method="post" 表單)

formenctype 屬性覆蓋 form 元素的 enctype 屬性。

主要: 該屬性與 type="submit" 和 type="image" 配合使用。

示例：

第一個(gè)提交按鈕已默認(rèn)編碼發(fā)送表單數(shù)據(jù)，第二個(gè)提交按鈕以 "multipart/form-data" 編碼格式發(fā)送表單數(shù)據(jù):

<form action="demo-post_enctype.php" method="post">   First name: <input type="text" name="fname"><br>   <input type="submit" value="提交">   <input type="submit" formenctype="multipart/form-data"   value="以 Multipart/form-data 提交"> </form>

<input> formmethod 屬性

formmethod 屬性定義了表單提交的方式。

formmethod 屬性覆蓋了 <form> 元素的 method 屬性。

注意: 該屬性可以與 type="submit" 和 type="image" 配合使用。

示例：重新定義表單提交方式實(shí)例:

<form action="demo-form.php" method="get">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="提交">   <input type="submit" formmethod="post" formaction="demo-post.php"   value="使用 POST 提交"> </form>

<input> formnovalidate 屬性

novalidate 屬性是一個(gè) boolean 屬性.

novalidate屬性描述了 <input> 元素在表單提交時(shí)無(wú)需被驗(yàn)證。

formnovalidate 屬性會(huì)覆蓋 <form> 元素的novalidate屬性.

注意: formnovalidate 屬性與type="submit一起使用

示例：

兩個(gè)提交按鈕的表單(使用與不適用驗(yàn)證 ):

<form action="demo-form.php">   E-mail: <input type="email" name="userid"><br>   <input type="submit" value="提交"><br>   <input type="submit" formnovalidate value="不驗(yàn)證提交"> </form>

【推薦課程：HTML5視頻教程、web前端入門(mén)教程】