HTML Input form* 屬性

本章介紹 HTML <input> 元素的不同 form* 屬性。

form 屬性

input 的 form 屬性規定 <input> 元素所屬的表單。

此屬性的值必須等于它所屬的 <form> 元素的 id 屬性。

實例

位于 HTML 表單（但仍是表單的一部分）之外的輸入字段：

<form action="/action_page.php" id="form1">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
</form>
<label for="lname">名字：</label>
<input type="text" id="lname" name="lname" form="form1">

親自試一試

formaction 屬性

input 的 formaction 屬性規定當提交表單時，對輸入（數據）進行處理的文件的 URL。

注釋：該屬性會覆蓋 <form> 元素的 action 屬性。

formaction 屬性適用于以下輸入類型：submit 和 image。

實例

帶有兩個提交按鈕的 HTML 表單，它們具有不同的操作（action）：

<form action="/action_page.php">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formaction="/action_page2.php" value="以管理員提交">
</form>

親自試一試

formenctype 屬性

input 的 formenctype 屬性指定提交時應如何編碼表單數據（僅適用于 method="post" 的表單）。

注釋：此屬性將覆蓋 <form> 元素的 enctype 屬性。

formenctype 屬性適用于以下輸入類型：submit 和 image。

實例

有兩個提交按鈕的表單。第一個發送使用默認編碼的表單數據，第二個發送編碼為 "multipart/form-data" 的表單數據：

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 編碼提交">
</form>

親自試一試

formmethod 屬性

input 的 formmethod 屬性定義了將表單數據發送到 action URL 的 HTTP 方法。

注釋：此屬性將覆蓋 <form> 元素的 method 屬性。

formmethod 屬性適用于以下輸入類型：submit 和 image。

表單數據可以作為 URL 變量（method="get"）或作為 HTTP post 事務（method="post"）發送。

關于 GET 的注意事項：

  • 以名稱/值對的形式將表單數據追加到 URL
  • 永遠不要使用 GET 發送敏感數據！（提交的表單數據在 URL 中可見！）
  • URL 的長度受到限制（2048 個字符）
  • 對于用戶希望將結果添加為書簽的表單提交很有用
  • GET 適用于非安全數據，例如 Google 中的查詢字符串

關于 POST 的注意事項：

  • 將表單數據附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單數據）
  • POST 沒有大小限制，可用于發送大量數據。
  • 帶有 POST 的表單提交無法添加書簽

提示：如果表單數據包含敏感信息或個人信息，請務必使用 POST！

實例

有兩個提交按鈕的表單。第一個使用 method="get" 發送表單數據。第二個使用 method="post" 發送表單數據：

<form action="/action_page.php" method="get">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">
</form>

親自試一試

formtarget 屬性

input 的 formtarget 屬性指定一個名稱或關鍵字，該名稱或關鍵字規定在提交表單后在何處顯示收到的響應。

注釋：此屬性將覆蓋 <form> 元素的 target 屬性。

formtarget 屬性適用于以下輸入類型：submit 和 image。

實例

有兩個提交按鈕且有不同目標窗口的表單：

<form action="/action_page.php">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formtarget="_blank" value="提交到新窗口/標簽頁">
</form>

親自試一試

formnovalidate 屬性

input 的 formnovalidate 屬性規定提交時不應驗證 <input> 元素。

注釋：此屬性將覆蓋 <form> 元素的 novalidate 屬性。

formnovalidate 屬性適用于以下輸入類型：submit。

實例

有兩個提交按鈕的表單（進行和不進行驗證）：

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formnovalidate="formnovalidate"
  value="不進行驗證的提交">
</form>

親自試一試

novalidate 屬性

novalidate 屬性是 <form> 屬性。

如果已設置，novalidate 屬性規定在提交時不應驗證所有表單數據。

實例

規定在提交時不驗證任何表單數據：

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

親自試一試

HTML Form 和 Input 元素

標簽 描述
<form> 為用戶輸入定義 HTML 表單。
<input> 定義輸入控件。

如需所有可用 HTML 標簽的完整列表，請訪問我們的 HTML 標簽參考手冊。