html5的新表單屬性有哪些

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

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

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML5 新的表單屬性

HTML5 的 <form> 和 <input>標簽添加了幾個新屬性.

<form>新屬性：

• autocomplete

• novalidate

<input>新屬性：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<form> novalidate 屬性

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

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

示例：無需驗證提交的表單數據

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

<form> 或<input> autocomplete 屬性

autocomplete 屬性規定 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 屬性規定在提交表單時不應該驗證 form 或 input 域。

示例：無需驗證提交的表單數據

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

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

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

示例：

第一個提交按鈕已默認編碼發送表單數據，第二個提交按鈕以 "multipart/form-data" 編碼格式發送表單數據:

<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的新表單屬性有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！