這篇文章主要介紹“html5的新表單屬性有哪些”，在日常操作中，相信很多人在html5的新表單屬性有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5的新表單屬性有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供平羅網(wǎng)站建設、平羅做網(wǎng)站、平羅網(wǎng)站設計、平羅網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、平羅企業(yè)網(wǎng)站模板建站服務，十多年平羅做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

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>標簽添加了幾個新屬性.

<form>新屬性：

• autocomplete

• novalidate

<input>新屬性：

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

• autofocus：自動獲得輸入焦點。

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

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

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

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

• formnovalidate：描述了 <input> 元素在表單提交時無需被驗證。

• formtarget：指定一個名稱或一個關鍵字來指明表單提交數(shù)據(jù)接收后的展示。

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

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

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

• multiple：是否允許多個輸入值，若聲明該屬性，那么輸入框中允許輸入多個用逗號隔開的值。

• pattern (regexp)：指定一個正則表達式，對輸入進行驗證。(正則默認首尾加^$)

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

• required：在表單提交時會驗證是否有輸入，沒有則彈出提示消息。

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

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

• minlength：限制最小長度，但它不是H5標準屬性，僅部分瀏覽器支持。

<form> novalidate 屬性

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

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

示例：無需驗證提交的表單數(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 域應該擁有自動完成功能。

當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。

提示: autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關閉的。

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

示例：form 中開啟 autocomplete (一個 input 字段關閉 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>

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

<form> novalidate 屬性

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

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

示例：無需驗證提交的表單數(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 屬性會覆蓋<form> 元素中的action屬性.

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

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

<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 屬性描述了表單提交到服務器的數(shù)據(jù)編碼 (只對form表單中 method="post" 表單)

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

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

示例：

第一個提交按鈕已默認編碼發(fā)送表單數(shù)據(jù)，第二個提交按鈕以 "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" 配合使用。

示例：重新定義表單提交方式實例:

<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 屬性是一個 boolean 屬性.

novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。

formnovalidate 屬性會覆蓋 <form> 元素的novalidate屬性.

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

示例：

兩個提交按鈕的表單(使用與不適用驗證 ):

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

到此，關于“html5的新表單屬性有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文名稱：html5的新表單屬性有哪些
轉載來源：http://jinyejixie.com/article36/pshcpg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、虛擬主機、網(wǎng)站收錄、商城網(wǎng)站、網(wǎng)站導航、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)