<input type="hidden"> 👉 隠しフィールドを設置する

HTMLの<input type="hidden">は、ユーザーには見えない隠しフィールドを設置するために使います。

input hiddenはブラウザには表示されない

👆ソースコード(HTML)上で<input type="hidden">を使っても、ブラウザには表示されません。

  • hiddenの読み方は「ヒドゥン」です。
  • <input type="text">をCSSでdisplay: noneしているのと同じです。
  • あくまでもブラウザ上で表示されていないだけで、ソースコード上では閲覧可能なことに注意しましょう。

input type="hidden"の使いどころ

<input type="hidden">を使う目的は、ユーザーは知る必要がないけど、サーバーには送りたい情報を格納するためです。具体的には以下のようなシーンで使います。

  • データベースにユーザーの情報を保存するときにユーザーIDが必要。でもユーザー自身はIDを知る必要がない。そこで<input type="hidden">にユーザーIDをセットしておく。
  • ブラウザからファイルをアップロードしたときのファイル名をサーバーに伝えたい。ファイル名はユーザーに見える必要がないので<input type="hidden">にセットしておく。
  • あらかじめセキュリティ用のトークンを<input type="hidden">にセットしておく。フォーム送信後、サーバーでトークンを検証し、本人かどうかチェックする。

input type="hidden"の使い方

name属性:フィールドの名前をセット

<input type="hidden">を使うときに欠かせないのがname属性です。name="◯◯"により、そのフィールドに名前がつきます。

<input type="hidden" name="example">

👆name="example"なので、この隠しフィールドの名前はexampleです。サーバーにはexample=値というような形で送信されることになります。

value属性:値をセット

value="◯◯"により、フィールドの値を決めておくことができます。例えば、ページが読み込まれた時点の日時を、隠しフィールドにセットしておき、サーバーに送信したい場合は、以下のようにします。

<input type="hidden" name="example" value="< 現時点の時刻を出力するコード >">

👆< 日時を出力するコード >の部分は、プログラミング言語により異なります。たとえばPHPなら<?php echo date("Y-m-d-H-i-s"); ?>のようにします。

これを他のフォームの内容と一緒にサーバーに送り、サーバー側で処理する…のようなことができるわけですね。

value属性は必須ではない

value属性は必須ではありません。省略するとページが読み込まれた時点では、フィールドの値(value)は空になっています。ユーザーの操作により<input type="hidden">に値をセットするというような場合にはvalue属性を書いておく必要はありません。

JavaScriptで隠しフィールドに値をセットする

ブラウザ上でフィールドの値をセットする or 変更するためにはJavaScriptを使います。

HTML
<input type="hidden" name="example" id="example-id">

👆例えば、JavaScriptによりid="example-id"を持つ<input type="hidden">に値をセットしてみましょう。

JavaScript
// まず隠しフィールド要素を取得
const hiddenField = document.getElementById('example-id');
// 値をセット
hiddenField.value = "好きな値"

👆隠しフィールド要素.value = ◯◯で値(value)をセットできます。この状態でフォームを送信すると、サーバーには隠しフィールドの値(example=好きな値)が送信されます。

対応ブラウザ

<input type="hidden">は、主要ブラウザすべてで使用可能です。


その他の種類のinputタグの使い方は、下記リンク先で解説しています。