<input> 要素の hidden 型は、フォームの送信時にユーザーが見たり変更したりすることができないデータをウェブ開発者が含めることができます。例えば、現在注文中又は編集中の ID や、一意のセキュリティトークンなどに利用できます。隠し入力欄はページの表示で完全に非表示になり、ページの中で表示させる方法はありません。

メモ: 以下のコードにはライブサンプルがあります。正しく動作していれば、何も見えないはずです。

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

サーバーに送り返したい隠しデータの値を表す DOMString
イベント なし。
対応する共通属性 autocomplete
IDL 属性 value
メソッド なし。

<input> 要素の value 属性は、フォームをサーバーに送信する時に含めたい隠しデータを含みます。これは特に、ユーザーインターフェイスを通じで編集したり確認したりすることはできませんが、ブラウザーの開発者ツールから値を編集することはできます。

ページのコンテンツ内では値がユーザーに表示されませんが、ブラウザーの開発者ツールや「ソースを表示」機能を使用して、見たり編集したりすることができます。 hidden の入力欄をセキュリティの形として当てにしないでください。

追加の属性

すべての <input> 要素で共通する属性に加え、 hidden 型の入力欄は次の属性にも対応しています。

属性 説明
name 他の入力型と同様、フォームを送信した場合に報告される入力欄の名前です。特殊な値 _charset_ は、その入力欄の値がフォームの送信に使用される文字エンコーディングとして報告されます。

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 を設定し、フォームが戻されたときにこの情報を、変更された情報を更新するデータベースのレコードを知るために使用します。コンテンツの中でこれを扱うためにスクリプトは必要はありません。

出力結果は次のようになります。

メモ: この例は GitHub にもあります(ソースコードおよびライブでの動作の確認も参照してください)。

送信されるとき、サーバーへ送信されるフォームデータは以下のようになります。

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

隠し入力欄は全く表示されなくても、データは送信されています。

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="hidden"> の定義
現行の標準 初回定義
HTML 5.1
<input type="hidden"> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 2Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,