HTML DOM Input Hidden オブジェクト详解
このドキュメントでは、HTML の <input type="hidden"> 要素について詳しく解説します。この要素を使用して、Web ページに非表示のフォームフィールドを作成する方法、および JavaScript を使用して操作する方法について説明します。
Hidden Input 要素とは
<input type="hidden"> は、ユーザーには見えないフォームフィールドを定義します。ユーザーには表示されませんが、このフィールドの値は、他のフォームデータと共にサーバーに送信できます。これは、ユーザーが直接操作する必要のない情報を保存して送信する場合に便利です。
Hidden Input の用途
- 状態情報の保存: ユーザーセッション、ページの状態、またはショッピングカートの内容に関連する情報を保存します。
- ユーザー行動の追跡: 訪問したページやクリックしたリンクなど、ユーザーと Web サイトとの対話を追跡します。
- クロスサイトリクエストフォージェリ (CSRF) 攻撃の防止: サーバーが生成したトークンを保存して、ユーザーからのリクエストを検証します。
- 事前定義された値の受け渡し: 製品 ID やユーザーロールなど、事前定義された値をサーバーに渡します。
Hidden Input 属性
すべての <input> 要素に共通する属性に加えて、<input type="hidden"> は次の属性もサポートしています。
| 属性 | 説明 |
|---|---|
name |
サーバーに送信される際にフィールドの名前を定義します。 |
value |
フィールドの値を定義します。 |
JavaScript を使用した Hidden Input の操作
JavaScript を使用して、hidden input 要素の値にアクセスしたり、変更したりできます。
値の取得
const hiddenInput = document.getElementById('myHiddenInput');
const value = hiddenInput.value; // 値の取得
値の設定
const hiddenInput = document.getElementById('myHiddenInput');
hiddenInput.value = 'newValue'; // 値の設定
例
<form action="/process_data" method="post">
<input type="hidden" id="userId" name="userId" value="12345">
<label for="userName">ユーザー名:</label>
<input type="text" id="userName" name="userName"><br><br>
<input type="submit" value="送信">
</form>
この例では、hidden input 要素はユーザーの ID を保存し、フォームの送信時にユーザー名と共にサーバーに送信されます。
注意事項
- 機密情報を
hiddeninput 要素に保存しないでください。ユーザーはページのソースコードを表示することで、これらの情報に簡単にアクセスできます。 hiddeninput 要素から受信したデータは、常に検証してください。悪意のあるユーザーによって改ざんされている可能性があります。
よくある質問
Q1: hidden input 要素の値はどのように設定しますか？
A1: hidden input 要素の値は、HTML の value 属性、または JavaScript を使用して設定できます。詳細については、上記の「JavaScript を使用した Hidden Input の操作」セクションを参照してください。
Q2: hidden input 要素はセキュリティ対策として信頼できますか？
A2: いいえ、hidden input 要素はセキュリティ対策として信頼できません。ユーザーはページのソースコードを表示することで、hidden input 要素の値を見ることができます。機密情報は、hidden input 要素に保存しないでください。
Q3: hidden input 要素の代わりに、他にどのような方法で情報をサーバーに送信できますか？
A3: hidden input 要素の代わりに、次のような方法で情報をサーバーに送信できます。
- Cookie: ユーザーのコンピュータに少量のデータを保存します。
- セッション: サーバー側にユーザー固有のデータを保存します。
- URL パラメータ: URL に情報を埋め込みます。
どの方法が適切かは、送信する情報の種類やセキュリティ要件によって異なります。