?
This document uses PHP Chinese website manual Release
<input>的"hidden"設web開發(fā)者包括能夠當表單提交不會被用戶看到或修改的數(shù)據(jù)。例如，當前正在訂購或編輯的內(nèi)容的ID，或唯一的安全令牌。隱藏的輸入在呈現(xiàn)的頁面中完全不可見，并且無法在頁面的內(nèi)容中顯示。
注意：下面的代碼行下面有一個實例 - 如果它正常工作，你什么也看不到！
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
值 | 表示要傳回服務器的隱藏數(shù)據(jù)的值的DOMString。 |
|---|---|
活動 | 沒有。 |
支持的通用屬性 | 自動完成 |
IDL屬性 | 值 |
方法 | 沒有。 |
值
該<input>元素的value屬性包含一個DOMString包含要當表單提交給服務器，包括隱藏的數(shù)據(jù)。盡管您可以通過瀏覽器開發(fā)工具編輯該值，但用戶無法通過用戶界面對其進行編輯或查看。
雖然該值不會顯示給頁面內(nèi)容中的用戶，但可以使用任何瀏覽器的開發(fā)人員工具或“查看源代碼”功能進行查看并進行編輯。不要依賴hidden投入作為一種安全形式。
使用隱藏的輸入
如上所述，隱藏的輸入可以用在任何你希望包含數(shù)據(jù)的地方，用戶在提交給服務器時不能看到或者與表單一起編輯。我們來看一些例子來說明它的用法。
跟蹤編輯的內(nèi)容
隱藏輸入最常見的用途之一是跟蹤提交編輯表單時需要更新的數(shù)據(jù)庫記錄。典型的工作流程如下所示：
用戶決定編輯他們控制的某些內(nèi)容，例如博客文章或產(chǎn)品條目。他們通過按編輯按鈕開始。
要編輯的內(nèi)容從數(shù)據(jù)庫中獲取并加載到HTML表單中以允許用戶進行更改。
編輯完成后，用戶提交表單，并將更新后的數(shù)據(jù)發(fā)送回服務器，在數(shù)據(jù)庫中進行更新。
這里的想法是，在步驟2中，正在更新的記錄的ID保存在隱藏的輸入中。在步驟3中提交表單時，ID會自動發(fā)回到記錄內(nèi)容的服務器。該ID使站點的服務器端組件準確知道哪些記錄需要使用提交的數(shù)據(jù)進行更新。
您可以在下面的“示例”部分查看完整示例。
提高網(wǎng)站的安全性
隱藏的輸入也用于存儲和提交安全令牌或秘密，以提高網(wǎng)站的安全性。其基本思想是，如果用戶正在填寫一個敏感的表格，比如他們的銀行網(wǎng)站上的一個表格，以便將一些錢轉(zhuǎn)移到另一個帳戶，那么他們將提供的秘密將證明他們是他們所說的那個人，他們正在使用正確的表單提交轉(zhuǎn)移請求。
這樣做可以阻止惡意用戶偽造假表單，偽裝成銀行，并通過電子郵件將表單發(fā)送給不知情的用戶，從而誘騙他們將資金轉(zhuǎn)移到錯誤的地方。這種攻擊稱為跨站點請求偽造（CSRF）（https://developer.mozilla.org/en-US/docs/Learn/Server-side/First steps / Website_security＃Cross_Site_Request_Forgery（CSRF％29） ;漂亮許多有信譽的服務器端框架使用隱藏的秘密來防止這種攻擊。
如前所述，將秘密置于隱藏的輸入中本身不會使其安全。密鑰的組成和編碼將做到這一點。隱藏輸入的值是保存與數(shù)據(jù)關(guān)聯(lián)的秘密，并在表單發(fā)送到服務器時自動包含它。您需要使用精心設計的秘密來保護您的網(wǎng)站。
驗證器
隱藏的輸入不參與約束驗證; 他們沒有真正的價值被約束。
例子
讓我們看看我們?nèi)绾螌崿F(xiàn)前面描述的編輯表單的簡單版本（請參閱跟蹤編輯的內(nèi)容），使用隱藏的輸入來記住正在編輯的記錄的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;}"postID"在將表單發(fā)送到用戶的瀏覽器之前，服務器將把隱藏的輸入的值設置為其數(shù)據(jù)庫中的帖子的ID，并且在表單返回時使用該信息來知道要更新哪個數(shù)據(jù)庫記錄信息。內(nèi)容中不需要腳本處理。
輸出如下所示：
注意：您也可以在GitHub上找到示例。
提交時，發(fā)送到服務器的表單數(shù)據(jù)將如下所示：
title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657
即使隱藏的輸入根本看不到，它的數(shù)據(jù)仍然被提交。
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
WHATWG HTML生活標準該規(guī)范中'<input type = hidden'>''的定義。 | 生活水平 | 初始定義 |
HTML 5.1該規(guī)范中'<input type ='hidden'>''的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | (Yes) | 1.0 | 1.0 |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | iOS WebKit (Safari/Chrome/Firefox/etc) |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |