HTML 表單屬性

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

Action 屬性

action 屬性定義提交表單時要執行的操作。

通常，當用戶單擊“提交”按鈕時，表單數據將發送到服務器上的文件中。

在下面的例子中，表單數據被發送到名為 "action_page.php" 的文件。該文件包含處理表單數據的服務器端腳本：

實例

提交后，將表單數據發送到 "action_page.php"：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

親自試一試

提示：如果省略 action 屬性，則將 action 設置為當前頁面。

Target 屬性

target 屬性規定提交表單后在何處顯示響應。

target 屬性可設置以下值之一：

值 描述
_blank 響應顯示在新窗口或選項卡中。
_self 響應顯示在當前窗口中。
_parent 響應顯示在父框架中。
_top 響應顯示在窗口的整個 body 中。
framename 響應顯示在命名的 iframe 中。

默認值為 _self，這意味著響應將在當前窗口中打開。

實例

此處，提交的結果將在新的瀏覽器標簽中打開：

<form action="/action_page.php" target="_blank">

親自試一試

Method 屬性

method 屬性指定提交表單數據時要使用的 HTTP 方法。

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

提交表單數據時，默認的 HTTP 方法是 GET。

實例

此例在提交表單數據時使用 GET 方法：

<form action="/action_page.php" method="get">

親自試一試

實例

此例在提交表單數據時使用 POST 方法：

<form action="/action_page.php" method="post">

親自試一試

關于 GET 的注意事項：

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

關于 POST 的注意事項：

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

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

Autocomplete 屬性

autocomplete 屬性規定表單是否應打開自動完成功能。

啟用自動完成功能后，瀏覽器會根據用戶之前輸入的值自動填寫值。

實例

啟用自動填寫的表單：

<form action="/action_page.php" autocomplete="on">

親自試一試

Novalidate 屬性

novalidate 屬性是一個布爾屬性。

如果已設置，它規定提交時不應驗證表單數據。

實例

未設置 novalidate 屬性的表單：

<form action="/action_page.php" novalidate>

親自試一試

所有 <form> 屬性的列表

屬性 描述
accept-charset 規定用于表單提交的字符編碼。
action 規定提交表單時將表單數據發送到何處。
autocomplete 規定表單是否應打開自動完成（填寫）功能。
enctype 規定將表單數據提交到服務器時應如何編碼（僅供 method="post"）。
method 規定發送表單數據時要使用的 HTTP 方法。
name 規定表單名稱。
novalidate 規定提交時不應驗證表單。
rel 規定鏈接資源和當前文檔之間的關系。
target 規定提交表單后在何處顯示接收到的響應。