HTML input type hidden 表單隱藏欄位應用 - HTML 網頁設計筆記

HTML input type hidden 表單隱藏欄位應用的方式主要是在表單內，將部分不想要顯示在網頁上的資料，透過隱藏的方式夾帶並隨著送出表單的動作，將資料傳遞給後端的 PHP 接收程式。換句話說 input type hidden 必須寫在 HTML 表單標籤的範圍內才有效果，這點與絕大多數表單元素的存在意義相似。inpput type hidden 是 HTML 表單的基本功能，所有主流的瀏覽器都支援 hidden 隱藏欄位的功能。

HTML input type hidden 表單隱藏欄位語法

HTML input type hidden 隱藏欄位的 name 與 value 分別用來標示欄位的名稱與欄位值，由於同一個表單中可以有數個隱藏欄位，所以在標示隱藏欄位的名稱 name 時，要標示清楚，不可以有重覆的，因為那會造成後端接收資料的 PHP 程式判斷錯誤。

另外，隱藏欄位的資料並不會顯示在網頁上，所以一般人是看不到內容的，必須透過瀏覽器的檢視原始碼才能閱讀，換句話說，hidden 並不需要用來設計樣式的 style 屬性。

HTML input type hidden 表單隱藏欄位範例

範例所呈現的結果（僅供示意，無實際功能）

什麼都不用填寫，請直接送出表單

我們在範例中準備了一個 HTML 表單，並將表單設定為透過 post 方法傳遞表單資料，而表單中總共有兩個元素，第一個就是本篇的主角 input type hidden 隱藏欄位，我們給這個隱藏欄位一個名稱叫 hidden_string 以及一個值為 s1，我們從範例所呈現的結果可以到，這個隱藏欄位的內容並沒有出現在頁面上，但是當網友送出表單後，負責接收資料的 test.php 程式可以判斷出表單傳遞了一個名稱為 hidden_string 的欄位，其值為 s1。

表單中的第二個元素 input type submit 是送出表單的按鈕，這個 submit 也相當有趣，想了解的朋友請閱讀：HTML input type submit 送出表單按鈕。

使用注意事項提醒：input type hidden 的隱藏內容在傳遞表單時，若採用的傳遞方式為 get，則 hidden 隱藏的內容會出現在網址欄，因為 get 資料會透過 url 傳值，假設不想要讓 hidden 的隱藏資料顯示在網址欄，必須使用 post 方式來傳遞表資料，關於網頁表單的設計與資料傳遞規則，請參閱此篇《HTML Form 表單設計》的詳細介紹。

更多 HTML 表單元素