<input type="hidden">
<input> 要素の hidden 型は、フォームの送信時にユーザーが見たり変更したりすることができないデータをウェブ開発者が含めることができます。例えば、現在注文中又は編集中の ID や、一意のセキュリティトークンなどに利用できます。隠し入力欄はページの表示で完全に非表示になり、ページの中で表示させる方法はありません。
メモ: input および change の各イベントは、この入力型には適用されません。隠し入力欄は JavaScript (hiddenInput.focus() など) を使用してもフォーカスを与えることはできません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
基本構文
HTML
<form action="/submit" method="post">
<input type="hidden" name="csrf_token" value="abc123">
<input type="hidden" name="user_id" value="42">
<button type="submit">Send</button>
</form>ライブデモ
Campaign metadata
Include tracking metadata in a form submission without exposing it in the UI.
プレビュー全画面表示
Wizard step state
Persist a current step value in the form while only rendering the next action button.
プレビュー全画面表示
Profile update token
Attach a server-issued token to a visible form and inspect the final payload.
プレビュー全画面表示
実務での使いどころ
-
<input type="hidden"> の活用
<input> 要素の hidden 型は、フォームの送信時にユーザーが見たり変更したりすることができないデータをウェブ開発者が含めることができます。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。