Skip to content

Latest commit

 

History

History
184 lines (137 loc) · 9.54 KB

index.md

File metadata and controls

184 lines (137 loc) · 9.54 KB
Raw
title slug
<form>：表單元素
Web/HTML/Element/form

{{HTMLSidebar}}

<form> HTML 元素代表了一個包含用於提交信息的交互式控制項的文件章節。

{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}

可以使用 {{cssxref(':valid')}} 和 {{cssxref(':invalid')}} CSS 偽類根據表單內的{{domxref("HTMLFormElement.elements", "元素", "", 1)}}是否有效來設置 <form> 元素的樣式。

屬性

該元素包含全域屬性。

  • accept {{deprecated_inline}}

    • : 伺服器接受的逗號分隔的內容類型。

      備註： 此屬性已被廢棄，不應再使用。 請改用 <input type=file> 元素上的 accept 屬性。

  • accept-charset

    • : 伺服器接受的空格分隔的{{Glossary("character encoding", "字元編碼")}}。瀏覽器將按照列出的順序使用它們。默認值表示與頁面相同的編碼。（在 HTML 的之前版本中，字符編碼也可以用逗號分隔。）

  • autocapitalize

    • : 控制輸入文本是否自動大寫，以及如何自動大寫。有關更多信息，請參見 autocapitalize 全域屬性頁面。

  • autocomplete

    • : 指示瀏覽器是否可以默認情況下自動完成輸入元素的值。表單元素上的 autocomplete 屬性會覆蓋 <form> 上的它。可能的值：

      • off：瀏覽器可能不會自動完成輸入。（瀏覽器傾向於忽略對懷疑的登錄表單的此屬性；請參見自動完成屬性和登入欄）
      • on：瀏覽器可能會自動完成輸入。

  • name

    • : 表單的名稱。該值不能為空字符串，且必須在其所在的表單集合中唯一（如果有的話）。

  • rel

提交表單的屬性

以下屬性控制表單提交時的行為。

  • action

  • enctype

    • : 如果 method 屬性的值為 post，則 enctype 是表單提交的 MIME 類型。可能的值：

      • application/x-www-form-urlencoded：默認值。
      • multipart/form-data：如果表單包含帶有 type=file 的 {{HTMLElement("input")}} 元素，請使用此值。
      • text/plain：用於調試目的。

      這個值可以被 {{HTMLElement("button")}}、<input type="submit"> 或 <input type="image"> 元素上的 formenctype 屬性覆蓋。

  • method

    • : 提交表單時使用的 HTTP 方法。 允許的方法/值只有（不區分大小寫）：

      • post：{{HTTPMethod("POST")}} 方法；表單數據作為請求主體發送。
      • get（默認值）：{{HTTPMethod("GET")}}；表單數據附加到 action URL 上，使用 ? 分隔符。當表單沒有副作用時使用此方法。
      • dialog：當表單位於 {{HTMLElement("dialog")}} 內部時，關閉對話框並導致提交時觸發 submit 事件，而不提交數據或清除表單。

      這個值可以被 {{HTMLElement("button")}}、<input type="submit"> 或 <input type="image"> 元素上的 formmethod 屬性覆蓋。

  • novalidate

  • target

    • : 提交表單後在哪裡顯示響應。它是一個用於瀏覽上下文的名稱/關鍵字（例如，標籤、窗口或 iframe）。以下關鍵字具有特殊含義：

      • _self（默認值）：加載到與當前瀏覽上下文相同的位置。
      • _blank：加載到新的未命名瀏覽上下文。這提供了與設置 rel="noopener" 相同的行為，該屬性不設置 window.opener。
      • _parent：加載到當前瀏覽上下文的父級。如果沒有父級，則與 _self 的行為相同。
      • _top：加載到頂級瀏覽上下文（即，當前上下文的祖先，並且沒有父級）。如果沒有父級，則與 _self 的行為相同。
      • _unfencedTop：將表單中的響應加載到嵌入式圍欄頁框的頂級框架（即穿越圍欄頁框的根，與其他保留目的地不同）。僅在圍欄頁框內可用。

      這個值可以被 {{HTMLElement("button")}}、<input type="submit"> 或 <input type="image"> 元素上的 formtarget 屬性覆蓋。

範例

<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

結果

{{EmbedLiveSample('範例')}}

技術摘要

內容類型 流內容、捫及內容
允許的內容 流內容，但不包含 <form> 元素
標籤省略 不允許，開始和結束標籤都是必需的。
允許的父元素 任何接受流內容的元素
隱含的 ARIA 角色 form
允許的 ARIA 角色 search、 none 或 presentation
DOM 介面 {{domxref("HTMLFormElement")}}

規範

{{Specifications}}

瀏覽器相容性

{{Compat}}

參見

  • HTML 表單指南
  • 在創建表單時使用的其他元素：{{HTMLElement("button")}}、{{HTMLElement("datalist")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("input")}}、{{HTMLElement("label")}}、{{HTMLElement("legend")}}、{{HTMLElement("meter")}}、{{HTMLElement("optgroup")}}、{{HTMLElement("option")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。
  • 獲取表單中元素的列表：{{domxref("HTMLFormElement.elements")}}
  • ARIA：表單角色
  • ARIA：搜索角色