<input type="hidden">

型別為hidden的<input>元素允許 Web 開發人員包含在提交表單時使用者無法檢視或修改的資料。例如，當前正在訂購或編輯的內容的 ID，或唯一的安全令牌。隱藏輸入在渲染的頁面中完全不可見，並且無法在頁面的內容中使其可見。

注意：input和change事件不適用於此輸入型別。即使使用 JavaScript（例如hiddenInput.focus()），也無法聚焦隱藏輸入。

值

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

警告：雖然該值不會在頁面的內容中顯示給使用者，但它可以透過任何瀏覽器的開發者工具或“檢視原始碼”功能檢視和編輯。不要依賴hidden輸入作為安全措施。

其他屬性

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

name

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

使用隱藏輸入

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

跟蹤編輯內容

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

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

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

您可以在下面的示例部分中看到此操作的完整示例。

提高網站安全性

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

這將阻止惡意使用者建立虛假表單，假裝是銀行，並將表單傳送給毫無戒心的使用者，以誘騙他們將資金轉入錯誤的地方。這種型別的攻擊稱為跨站點請求偽造 (CSRF)；幾乎所有信譽良好的伺服器端框架都使用隱藏金鑰來防止此類攻擊。

注意：將金鑰放在隱藏輸入中本身並不能使其安全。金鑰的組成和編碼將起到作用。隱藏輸入的價值在於它使金鑰與資料相關聯，並在將表單傳送到伺服器時自動包含它。您需要使用精心設計的金鑰來真正保護您的網站。

驗證

隱藏輸入不參與約束驗證；它們沒有要約束的實際值。

示例

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

編輯表單的 HTML 可能如下所示

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

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;
}

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

輸出如下所示

注意：您也可以在 GitHub 上找到此示例（請參閱原始碼，以及檢視其執行效果）。

提交表單後，傳送到伺服器的表單資料將類似於以下內容

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

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

技術摘要

值	表示您想要傳遞迴伺服器的隱藏資料值的字串。
事件	無。
支援的通用屬性	`autocomplete`
IDL 屬性	`value`
DOM 介面	`HTMLInputElement`
方法	無。
隱式 ARIA 角色	無對應角色

規範

規範
HTML 標準 # hidden-state-(type=hidden)

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱

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