?
This document uses PHP Chinese website manual Release
<input>的"hidden"設(shè)web開(kāi)發(fā)者包括能夠當(dāng)表單提交不會(huì)被用戶(hù)看到或修改的數(shù)據(jù)。例如，當(dāng)前正在訂購(gòu)或編輯的內(nèi)容的ID，或唯一的安全令牌。隱藏的輸入在呈現(xiàn)的頁(yè)面中完全不可見(jiàn)，并且無(wú)法在頁(yè)面的內(nèi)容中顯示。
注意：下面的代碼行下面有一個(gè)實(shí)例 - 如果它正常工作，你什么也看不到！
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
值 | 表示要傳回服務(wù)器的隱藏?cái)?shù)據(jù)的值的DOMString。 |
|---|---|
活動(dòng) | 沒(méi)有。 |
支持的通用屬性 | 自動(dòng)完成 |
IDL屬性 | 值 |
方法 | 沒(méi)有。 |
值
該<input>元素的value屬性包含一個(gè)DOMString包含要當(dāng)表單提交給服務(wù)器，包括隱藏的數(shù)據(jù)。盡管您可以通過(guò)瀏覽器開(kāi)發(fā)工具編輯該值，但用戶(hù)無(wú)法通過(guò)用戶(hù)界面對(duì)其進(jìn)行編輯或查看。
雖然該值不會(huì)顯示給頁(yè)面內(nèi)容中的用戶(hù)，但可以使用任何瀏覽器的開(kāi)發(fā)人員工具或“查看源代碼”功能進(jìn)行查看并進(jìn)行編輯。不要依賴(lài)hidden投入作為一種安全形式。
使用隱藏的輸入
如上所述，隱藏的輸入可以用在任何你希望包含數(shù)據(jù)的地方，用戶(hù)在提交給服務(wù)器時(shí)不能看到或者與表單一起編輯。我們來(lái)看一些例子來(lái)說(shuō)明它的用法。
跟蹤編輯的內(nèi)容
隱藏輸入最常見(jiàn)的用途之一是跟蹤提交編輯表單時(shí)需要更新的數(shù)據(jù)庫(kù)記錄。典型的工作流程如下所示：
用戶(hù)決定編輯他們控制的某些內(nèi)容，例如博客文章或產(chǎn)品條目。他們通過(guò)按編輯按鈕開(kāi)始。
要編輯的內(nèi)容從數(shù)據(jù)庫(kù)中獲取并加載到HTML表單中以允許用戶(hù)進(jìn)行更改。
編輯完成后，用戶(hù)提交表單，并將更新后的數(shù)據(jù)發(fā)送回服務(wù)器，在數(shù)據(jù)庫(kù)中進(jìn)行更新。
這里的想法是，在步驟2中，正在更新的記錄的ID保存在隱藏的輸入中。在步驟3中提交表單時(shí)，ID會(huì)自動(dòng)發(fā)回到記錄內(nèi)容的服務(wù)器。該ID使站點(diǎn)的服務(wù)器端組件準(zhǔn)確知道哪些記錄需要使用提交的數(shù)據(jù)進(jìn)行更新。
您可以在下面的“示例”部分查看完整示例。
提高網(wǎng)站的安全性
隱藏的輸入也用于存儲(chǔ)和提交安全令牌或秘密，以提高網(wǎng)站的安全性。其基本思想是，如果用戶(hù)正在填寫(xiě)一個(gè)敏感的表格，比如他們的銀行網(wǎng)站上的一個(gè)表格，以便將一些錢(qián)轉(zhuǎn)移到另一個(gè)帳戶(hù)，那么他們將提供的秘密將證明他們是他們所說(shuō)的那個(gè)人，他們正在使用正確的表單提交轉(zhuǎn)移請(qǐng)求。
這樣做可以阻止惡意用戶(hù)偽造假表單，偽裝成銀行，并通過(guò)電子郵件將表單發(fā)送給不知情的用戶(hù)，從而誘騙他們將資金轉(zhuǎn)移到錯(cuò)誤的地方。這種攻擊稱(chēng)為跨站點(diǎn)請(qǐng)求偽造（CSRF）（https://developer.mozilla.org/en-US/docs/Learn/Server-side/First steps / Website_security＃Cross_Site_Request_Forgery（CSRF％29） ;漂亮許多有信譽(yù)的服務(wù)器端框架使用隱藏的秘密來(lái)防止這種攻擊。
如前所述，將秘密置于隱藏的輸入中本身不會(huì)使其安全。密鑰的組成和編碼將做到這一點(diǎn)。隱藏輸入的值是保存與數(shù)據(jù)關(guān)聯(lián)的秘密，并在表單發(fā)送到服務(wù)器時(shí)自動(dòng)包含它。您需要使用精心設(shè)計(jì)的秘密來(lái)保護(hù)您的網(wǎng)站。
驗(yàn)證器
隱藏的輸入不參與約束驗(yàn)證; 他們沒(méi)有真正的價(jià)值被約束。
例子
讓我們看看我們?nèi)绾螌?shí)現(xiàn)前面描述的編輯表單的簡(jiǎn)單版本（請(qǐng)參閱跟蹤編輯的內(nèi)容），使用隱藏的輸入來(lái)記住正在編輯的記錄的ID。
編輯表單的HTML可能看起來(lái)有點(diǎn)像這樣：
<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>
我們還要添加一些簡(jiǎn)單的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ā)送到用戶(hù)的瀏覽器之前，服務(wù)器將把隱藏的輸入的值設(shè)置為其數(shù)據(jù)庫(kù)中的帖子的ID，并且在表單返回時(shí)使用該信息來(lái)知道要更新哪個(gè)數(shù)據(jù)庫(kù)記錄信息。內(nèi)容中不需要腳本處理。
輸出如下所示：
注意：您也可以在GitHub上找到示例。
提交時(shí)，發(fā)送到服務(wù)器的表單數(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) | 評(píng)論 |
|---|---|---|
WHATWG HTML生活標(biāo)準(zhǔn)該規(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) |