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視訊教學、】

以上就是html5有哪些新表單屬性的詳細內容，更多請關注TW511.COM其它相關文章！