catnose
catnose
HTMLの<input type="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タグの使い方は、下記リンク先で解説しています。
