<input type="hidden">

值

<input> 元素的 value 屬性包含一個字串，該字串包含您希望在表單提交到伺服器時包含的隱藏資料。使用者無法透過使用者介面編輯或檢視此內容，但您可以透過瀏覽器開發者工具編輯此值。

附加屬性

除了所有 <input> 元素共有的屬性之外，hidden 輸入還提供以下屬性。

name

這實際上是常見屬性之一，但它對隱藏輸入具有特殊含義。通常，name 屬性在隱藏輸入上的功能與在任何其他輸入上相同。但是，當提交表單時，name 設定為 _charset_ 的隱藏輸入將自動報告其值設定為用於提交表單的字元編碼。

使用隱藏輸入

如上所述，隱藏輸入可以在任何您希望在表單提交到伺服器時包含使用者無法看到或編輯的資料的地方使用。讓我們看一些說明其用法的示例。

跟蹤編輯內容

隱藏輸入最常見的用途之一是跟蹤在提交編輯表單時需要更新的資料庫記錄。典型的工作流程如下：

1. 使用者決定編輯他們可以控制的一些內容，例如部落格文章或產品條目。他們透過按下編輯按鈕開始。
2. 要編輯的內容從資料庫中取出並載入到 HTML 表單中，以允許使用者進行更改。
3. 編輯後，使用者提交表單，更新的資料傳送回伺服器以在資料庫中更新。

這裡的想法是，在步驟 2 中，正在更新的記錄的 ID 儲存在一個隱藏輸入中。當表單在步驟 3 中提交時，ID 會自動與記錄內容一起傳送回伺服器。ID 允許站點的伺服器端元件準確知道需要使用提交的資料更新哪個記錄。

您可以在下面的示例部分中看到這可能是什麼樣子的完整示例。

提高網站安全性

隱藏輸入還用於儲存和提交安全令牌或秘密，以提高網站安全性。基本思想是，如果使用者正在填寫敏感表單，例如銀行網站上的表單以將資金轉賬到另一個賬戶，他們將獲得的秘密將證明他們是他們聲稱的那個人，並且他們正在使用正確的表單提交轉賬請求。

這將阻止惡意使用者建立虛假表單，假裝是銀行，並透過電子郵件將表單傳送給不知情的使用者，誘騙他們將資金轉移到錯誤的地方。這種攻擊被稱為跨站請求偽造 (CSRF)；幾乎所有信譽良好的伺服器端框架都使用隱藏的秘密來防止此類攻擊。

驗證

隱藏輸入不參與約束驗證；它們沒有真正的價值需要約束。

示例

讓我們看看如何實現我們前面描述的編輯表單的一個版本（參見跟蹤編輯內容），使用隱藏輸入來記住正在編輯的記錄的 ID。

編輯表單的 HTML 可能看起來像這樣：

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post" />
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>

我們還新增一些 CSS：

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

伺服器在將表單傳送到使用者瀏覽器之前，會將 ID 為 postID 的隱藏輸入的值設定為其資料庫中帖子的 ID，並在表單返回時使用該資訊來知道要用修改後的資訊更新哪個資料庫記錄。內容中不需要指令碼來處理這個問題。

輸出如下所示

提交時，傳送到伺服器的表單資料將看起來像這樣：

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

即使隱藏輸入完全不可見，其資料仍然會提交。

技術摘要

規範

瀏覽器相容性

另見

• HTML 表單指南
• <input> 及其所基於的 HTMLInputElement 介面