html5有哪些新表單屬性

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

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

HTML5 新的表單屬性

HTML5 的

和標籤新增了幾個新屬性.

< form>新屬性：

• autocomplete

• #novalidate

##新屬性：

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

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

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

• formaction：用來描述表單提交的URL位址

• #formenctype：描述了表單提交到伺服器的資料編碼(只對form表單中method="post" 表單)

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

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

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

• height 與 width：規定用於 image 類型的 標籤的圖像高度和寬度。

• list：規定輸入域的 datalist。 datalist 是輸入域的選項清單。

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

• #multiple：是否允許多個輸入值，若宣告該屬性，那麼輸入框中允許輸入多個用逗號隔開的值。

• pattern (regexp)：指定一個正規表示式，對輸入進行驗證。 (正規預設首尾加^$)

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

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

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

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

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

novalidate 屬性##novalidate 屬性是一個boolean(布林) 屬性.

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

範例：

無需驗證提交的表單資料

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

# 或 autocomplete 屬性#autocomplete 屬性規定form 或input 網域應該擁有自動完成功能。

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

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

注意: autocomplete 適用於 標籤，以及以下類型的 標籤：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>

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

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

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

範例：無需驗證提交的表單資料

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

formaction 屬性The formaction 屬性用於描述表單提交的URL位址.

The formaction 屬性會覆寫 元素中的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>

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>

formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 元素的 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>

formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 元素的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视频教程、web前端入门教程】

以上是html5有哪些新表單屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！