input type=”hidden”とは？

2024年7月8日2024年7月20日

HTMLのフォーム要素にはさまざまな種類がありますが、

その中でも特殊な役割を持つのがinput type="hidden"です。

この要素は、ユーザーには見えないデータをフォームに含めるために使用されます。

今回はこれについて解説していきます。

おねしゃす

hiddenの意味と使い方

input type="hidden"は、その名の通り、隠された入力フィールドを定義します。

通常の入力フィールドやボタンとは異なり、

ブラウザ上では見えないため、ユーザーが直接編集することはできません。

しかし、フォームが送信された際には、他の入力フィールドと同じようにデータがサーバーに送信されます。

以下は簡単な使用例です。

<form action="/submit" method="post">
    <input type="hidden" name="userID" value="12345">
    <input type="text" name="username">
    <input type="submit" value="送信">
</form>

上記の例では、userIDという名前の隠しフィールドが定義されており、

その値は12345です。このフィールドはユーザーに見えませんが、

フォームが送信されるときにサーバーに送られます。

どのような挙動になるか

input type="hidden"は、ユーザーがブラウザを通じてフォームを操作する際には見えません。

これは、フォームの外観を乱さずに追加のデータを送信するために役立ちます。

例えば、ユーザーIDやトークン、セッション情報など、

ユーザーが直接編集する必要がないデータを含めることができます。

フォームが送信されると、

他のフィールドと同様にinput type="hidden"のデータもサーバーに送信されます。

これにより、バックエンド側で必要な情報を受け取り、処理することができます。

ユースケース

input type="hidden"はさまざまな場面で役立ちます。

以下にいくつかの例を挙げてみましょう。

1. ユーザー認証情報の保持

ユーザーがログインしている状態でフォームを送信する場合、

セッション情報やユーザーIDを隠しフィールドに格納して送信することで、

バックエンドでユーザーを認識できます。

<form action="/update-profile" method="post">
    <input type="hidden" name="sessionToken" value="abc123xyz">
    <input type="text" name="username" value="currentUsername">
    <input type="submit" value="更新">
</form>

2. ページ間のデータ引き継ぎ

あるページから別のページにデータを引き継ぐ場合、

隠しフィールドを使用してデータを保持することができます。

例えば、ショッピングカートの情報や選択されたオプションなどを次のページに渡す際に便利です。

<form action="/checkout" method="post">
    <input type="hidden" name="cartID" value="cart123">
    <input type="submit" value="チェックアウト">
</form>

3. フォームの動的なデータ

JavaScriptを使用して、動的にデータを変更したい場合にも隠しフィールドは役立ちます。

例えば、ユーザーのアクションに応じて特定の値を更新し、それをフォーム送信時に含めることができます。

<script>
    function updateHiddenField(value) {
        document.getElementById('dynamicField').value = value;
    }
</script>

<form action="/process" method="post">
    <input type="hidden" id="dynamicField" name="dynamicData" value="initialValue">
    <button type="button" onclick="updateHiddenField('newValue')">Update Data</button>
    <input type="submit" value="送信">
</form>