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

HTML Hidden属性を活用する方法を学ぶ初心者HTML
この記事は約10分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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属性を使用する際には、いくつかの注意点があります。

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

    そのため、JavaScriptやCSSで要素を非表示にする代替手段を検討することが重要です。

  2. Hidden属性を持つ要素は、ブラウザ上では見えませんが、ページのソースコードには表示されます。

    そのため、機密性の高い情報をHidden要素に格納するのは避けるべきです。

  3. ユーザーがページのソースコードを操作して、Hidden要素の値を変更する可能性があります。

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

●カスタマイズ方法

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

以下に例を挙げます。

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

まとめ

この記事では、HTMLのHidden属性の基本的な使い方や応用例、注意点、カスタマイズ方法について解説しました。

Hidden属性を活用することで、フォームのデータ送信やページ内の要素の表示・非表示など、さまざまな機能を実現できます。

ただし、Hidden属性を使用する際には、ブラウザの互換性や機密性の問題、サーバー側でのデータ検証が重要であることを念頭に置いてください。

これらの注意点を考慮しながら、Hidden属性を活用してウェブページの機能を充実させていきましょう。