HTML Hiddenを活用！初心者でも簡単にできる10の使い方とサンプルコード

はじめに
●HTML Hidden属性とは
- ○Hidden属性の基本
●Hidden属性の使い方
●Hidden属性の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、HTML Hidden属性を活用することができるようになります。

Hidden属性は、ウェブページ上で見えない要素を作成するための便利な機能です。

この記事では、Hidden属性の基本的な使い方から応用例、注意点やカスタマイズ方法まで、初心者目線で詳しく解説します。

●HTML Hidden属性とは

Hidden属性は、HTML要素をブラウザ上で表示しないようにする属性です。

主にフォーム内のデータを送信する際に使用されますが、他にもさまざまな応用例があります。

○Hidden属性の基本

Hidden属性は、input要素に適用されることが一般的です。

下記のように記述します。

<input type="hidden" name="example" value="hidden-data">

この例では、input要素にtype=”hidden”を指定することで、要素がブラウザ上で表示されなくなります。

また、name属性とvalue属性を使って、送信されるデータを指定できます。

●Hidden属性の使い方

○サンプルコード1：フォーム内でHidden属性を使う

フォーム内でHidden属性を利用する場合、下記のように記述します。

<form action="/submit" method="post">
  <input type="hidden" name="userid" value="12345">
  <input type="text" name="username" placeholder="名前を入力">
  <input type="submit" value="送信">
</form>

この例では、useridという名前のHidden要素がフォーム内に配置されており、フォームが送信されると、useridとusernameの両方のデータがサーバーに送信されます。

○サンプルコード2：JavaScriptでHidden属性を操作する

JavaScriptを使用して、Hidden属性を操作することもできます。

下記の例では、ボタンをクリックすると、Hidden要素のvalueが変更されます。

<button onclick="changeHiddenValue()">値を変更</button>
<input type="hidden" id="hiddenExample" value="初期値">

<script>
function changeHiddenValue() {
  document.getElementById('hiddenExample').value = '変更後の値';
}
</script>

○サンプルコード3：CSSでHidden要素を扱う

CSSを使用して、要素にdisplay: none;を指定することで、要素を非表示にすることができます。

ただし、この方法では要素が完全に見えなくなるわけではなく、DOM内には存在し続けます。

<div class="hidden">これは非表示になる要素です。</div>

<style>
.hidden {
  display: none;
}
</style>

●Hidden属性の応用例

○サンプルコード4：条件付き表示

Hidden属性を使って、条件に応じて要素を表示・非表示にすることができます。

下記の例では、チェックボックスがオンになったときに、要素が表示されます。

<label><input type="checkbox" id="showElement"> 要素を表示する</label>
<div id="conditionalElement" hidden>条件付きで表示される要素です。</div>

<script>
document.getElementById('showElement').addEventListener('change', function() {
  const element = document.getElementById('conditionalElement');
  element.hidden = !this.checked;
});
</script>

この例では、チェックボックスがオンになると、conditionalElementのHidden属性がfalseになり、要素が表示されます。

チェックボックスがオフになると、Hidden属性がtrueになり、要素が非表示になります。

○サンプルコード5：ユーザートラッキング

Hidden属性を利用して、ユーザーのアクションや情報をサーバーに送信することができます。

下記の例では、ユーザーがページ内のリンクをクリックした際に、クリックされたリンクのIDをHidden要素に格納し、サーバーに送信します。

<a href="#" id="link1" onclick="trackClick('link1')">リンク1</a>
<a href="#" id="link2" onclick="trackClick('link2')">リンク2</a>

<form action="/tracking" method="post" id="trackingForm">
  <input type="hidden" name="clickedLinkId" id="clickedLinkId">
</form>

<script>
function trackClick(linkId) {
  document.getElementById('clickedLinkId').value = linkId;
  document.getElementById('trackingForm').submit();
}
</script>

○サンプルコード6：ページ内アンカー

ページ内で特定の位置にジャンプするアンカーリンクを作成する際に、Hidden属性を利用することができます。

下記の例では、ページ内の各セクションへジャンプするリンクが作成されています。

<nav>
  <a href="#section1">セクション1</a>
  <a href="#section2">セクション2</a>
  <a href="#section3">セクション3</a>
</nav>

<section id="section1">
  <input type="hidden" id="anchor1">
  <h2>セクション1</h2>
  <p>ここはセクション1です。</p>
</section>

<section id="section2">
  <input type="hidden" id="anchor2">
  <h2>セクション2</h2>
  <p>ここはセクション2です。</p>
</section>

<section id="section3">
  <input type="hidden" id="anchor3">
  <h2>セクション3</h2>
  <p>ここはセクション3です。</p>
</section>

○サンプルコード7：メタデータの格納

Hidden属性を使用して、HTML要素に関連するメタデータを格納することができます。

下記の例では、画像の説明やキャプションなどの情報をHidden要素に格納しています。

<img src="image.jpg" alt="サンプル画像">
<input type="hidden" id="imageCaption" value="サンプル画像のキャプション">
<input type="hidden" id="imageDescription" value="サンプル画像の説明">

○サンプルコード8：状態管理

アプリケーションの状態を管理するために、Hidden属性を使用することができます。

下記の例では、状態管理のためのHidden要素が用意されています。

<input type="hidden" id="appState" value="init">

JavaScriptを使って、状態を更新することができます。

function updateAppState(newState) {
  document.getElementById('appState').value = newState;
}

○サンプルコード9：ウィジェットの切り替え

Hidden属性を利用して、ページ内のウィジェットを切り替えることができます。

下記の例では、ラジオボタンを使ってウィジェットを切り替えています。

<label><input type="radio" name="widget" value="widget1" onclick="switchWidget('widget1')">ウィジェット1</label>
<label><input type="radio" name="widget" value="widget2" onclick="switchWidget('widget2')">ウィジェット2</label>

<div id="widget1" hidden>ここはウィジェット1です。</div>
<div id="widget2" hidden>ここはウィジェット2です。</div>

<script>
function switchWidget(widgetId) {
  document.getElementById('widget1').hidden = widgetId !== 'widget1';
  document.getElementById('widget2').hidden = widgetId !== 'widget2';
}
</script>

○サンプルコード10：アクセシビリティの向上

アクセシビリティを向上させるために、Hidden属性を利用することができます。

下記の例では、スクリーンリーダー向けの補足情報をHidden要素に格納しています。

<button aria-describedby="buttonDescription">詳細</button>
<input type="hidden" id="buttonDescription" value="このボタンを押すと詳細情報が表示されます。">

●注意点と対処法

Hidden属性を使用する際には、いくつかの注意点があります。

ブラウザでHidden属性をサポートしていない場合があります。

そのため、JavaScriptやCSSで要素を非表示にする代替手段を検討することが重要です。
Hidden属性を持つ要素は、ブラウザ上では見えませんが、ページのソースコードには表示されます。

そのため、機密性の高い情報をHidden要素に格納するのは避けるべきです。
ユーザーがページのソースコードを操作して、Hidden要素の値を変更する可能性があります。

そのため、サーバー側で受け取ったデータの検証が重要です。

●カスタマイズ方法

Hidden属性を使ったカスタマイズ方法もいくつかあります。

以下に例を挙げます。

JavaScriptを使用して、フォーム内の他の入力欄の値に基づいてHidden属性の値を動的に変更することができます。
サーバー側で生成された一時的なトークンをHidden属性に格納し、フォーム送信時にトークンを検証することで、CSRF（クロスサイトリクエストフォージェリ）攻撃を防ぐことができます。