【実例付】HTMLのhidden属性｜基本から応用までを徹底解説

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLのhidden属性はどのように機能するのだろうか？」
「hidden属性の書き方を学びたい」
「hidden属性の具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

hidden属性の基本的な使い方
hidden属性を活用するためのテクニック
hidden属性を用いた具体的な使用例

当記事では、HTMLのhidden属性の基本的な使い方だけでなく、フォームデータの非表示や、JavaScriptとの連携による動的な内容の表示制御など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

HTMLとは？

こちらでは、HTMLについてお伝えしていきます。

HTMLについて知ることのメリットを伝えるとともに、その基本的な構造とタグの種類についても解説していきます。

HTMLの概要
HTMLの基本的な構造
HTMLタグとその種類

HTMLの概要

HTMLとは、HyperText Markup Languageの略で、ウェブページを作成するためのマークアップ言語です。

HTMLはウェブブラウザによって解釈され、ユーザーが見るウェブページの骨格を作ります。

HTML自体はプログラミング言語ではなく、データを構造化し、意味付けするマークアップ言語です。

HTMLの基本的な構造

基本的なHTML文書の構成は、必要なメタデータを含むヘッド（head）と、表示されるコンテンツを含むボディ（body）からなるHTML要素の2つです。

いずれもルート要素であるタグ内に配置されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>タイトルt</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>これは簡易なHTML文書です。</p>
</body>
</html>

HTMLタグとその種類

HTMLタグは、HTML文書の各部分を定義するために使われます。

例えば、<p>は段落を、<h1>から<h6>は見出しを、<a>はハイパーリンクを定義します。

タグは一般的に開始タグと終了タグのペアで構成され、それらの間のコンテンツをマークアップします。

しかし、いくつかのタグは終了タグを必要とせず、これらは空要素と呼ばれるものも存在します。

タグ名	説明	例
`<a>`	リンクを作成するための要素	`<a href="https://example.com">リンク</a>`
`<div>`	コンテンツをグループ化する要素	`<div class="container">コンテンツ</div>`
`<p>`	段落を作成するための要素	`<p>これは段落です。</p>`
`<h1>`	見出しを作成するための要素	`<h1>見出し</h1>`
`<img>`	画像を表示するための要素	`<img src="image.jpg" alt="画像">`
`<ul>`	順序なしリストを作成するための要素	`<ul><li>アイテム1</li><li>アイテム2</li></ul>`
`<li>`	リストの項目を作成するための要素	`<li>項目1</li>`
`<table>`	テーブルを作成するための要素	`<table><tr><td>セル</td></tr></table>`
`<form>`	フォームを作成するための要素	`<form action="/submit" method="POST">...</form>`
`<input>`	入力フィールドを作成するための要素	`<input type="text" name="username">`

それぞれのタグには特定の目的があり、ウェブページの構造やコンテンツを制御するために使用されます。

HTMLのhidden属性とは？

こちらでは、HTMLのhidden属性についてお伝えしていきます。

hidden属性の定義と目的、対象要素、基本的な使い方について解説します。

hidden属性の定義と目的
hidden属性の対象要素
hidden属性の基本的な使い方

hidden属性の定義と目的

hidden属性は、HTML要素をブラウザに表示させないためのものです。

情報をユーザーから隠したい、またはJavaScriptで後から表示させたい場合に、役立ちます。

<form action="/submit" method="POST">
  <input type="hidden" name="user_id" value="12345">
  <input type="hidden" name="session_id" value="ABCDEF123456">
  <input type="submit" value="Submit">
</form>

この属性が設定された要素は、ページ上に表示されませんが、HTMLコード内には存在し続けるのです。

hidden属性の対象要素

hidden属性は、全てのHTML要素に適用することが可能です。

これにより、以下のようなさまざまな項目を隠せます。

段落
画像
リンク

ただし表示されていないからといって、その情報がウェブ上から完全に消えるわけではありません。

HTMLコード内で確認するは可能になります。

hidden属性の基本的な使い方

hidden属性の使い方は非常にシンプルです。

表示させたくないHTML要素にhiddenと記述するだけです。

<p hidden>これは隠された段落です。</p>

「これは隠された段落です。」という文章はページ上に表示されません。

hidden属性の活用法

こちらでは、hidden属性の活用法についてお伝えしていきます。

フォーム内での利用やJavaScriptとの連携、さらにCSSとの比較について説明します。

フォーム内でのhidden属性の利用
JavaScriptとの連携
CSSとhidden属性：display:noneとの比較

フォーム内でのhidden属性の利用

hidden属性は、フォームの要素に頻繁に使われます。

これにより、ユーザーが入力しないで欲しいデータを保持できるのです。

たとえば、ユーザーIDや一意のトランザクションIDのようなものを、フォーム送信時にサーバーに送ることができます。

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input type="hidden" name="transaction_id" value="123456789">
  <input type="submit" value="Submit">
</form>

JavaScriptとの連携

hidden属性はJavaScriptと組み合わせて使うことも可能です。

要素がクリックされた時、時間が経過した時、あるいは特定の条件が満たされた時など、特定のイベントに応じて要素を表示したり隠したりすることができます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden-element {
      display: none;
    }
  </style>
</head>
<body>
  <button id="toggle-button">Toggle Element</button>
  <div id="target-element" class="hidden-element">
    This is a hidden element.
  </div>

  <script>
    const toggleButton = document.getElementById('toggle-button');
    const targetElement = document.getElementById('target-element');

    toggleButton.addEventListener('click', function() {
      targetElement.classList.toggle('hidden-element');
    });
  </script>
</body>
</html>

CSSとhidden属性：display:noneとの比較

CSSのdisplay:noneプロパティも要素を非表示にすることができますが、hidden属性とはいくつかの違いがあります。

CSSのdisplay:noneプロパティは、要素を非表示にするだけでなく、その存在自体を否定します。

display:noneを適用した要素は、ページのレイアウト上から完全に消え、空間も占有しません。

一方、hidden属性を持つ要素は存在自体は認識されますが、視覚的には非表示となります。

hidden属性の注意点

こちらでは、hidden属性の使用にあたって注意すべきポイントをお伝えしていきます。

アクセシビリティ、SEO、ブラウザ間の互換性について説明します。

hidden属性のアクセシビリティについて
hidden属性とSEOの関係
hidden属性のブラウザー間の互換性

hidden属性のアクセシビリティについて

hidden属性を持つ要素は、一般的にスクリーンリーダーや他のアシスティブテクノロジーからは無視されます。

しかし、これは全てのスクリーンリーダーが同じように機能するわけではなく、一部のスクリーンリーダーはhidden属性を無視して読み上げることもあります。

重要な情報を、hidden属性で隠すのは辞めましょう。

hidden属性とSEOの関係

検索エンジンによって認識させたい重要な情報を、hidden属性で隠すことはやめましょう。

なぜならGoogleなどの検索エンジンは、hidden属性を持つ要素の内容をインデックス化しないからです。。

hidden属性を間違って使うと、SEOに悪影響を及ぼす可能性があります。

hidden属性のブラウザー間の互換性

hidden属性はHTML5で導入されたため、旧バージョンのブラウザではサポートされていない場合があります。

特にInternet Explorer 10以前ではhidden属性は認識されません。

これに対して、display:noneプロパティを使うと、ほとんどのブラウザで要素を非表示にすることが可能です。

これらの違いを理解して、目的に合った方法で非表示設定おこないましょう。

hidden属性を利用した隠し入力欄

こちらでは、hidden属性を利用した隠し入力欄についてお伝えしていきます。

具体的な利用方法や、追加属性の利用、さらには値の意味と利用法について説明します。

<input type="hidden">の利用方法
隠し入力欄の追加属性：name属性の利用
隠し入力欄の値の意味と利用法

<input type="hidden">の利用方法

HTMLフォーム内で、ユーザーに見えない入力フィールドを作成する際に、<input type="hidden">を利用します。

この隠しフィールドは、ユーザーが変更できないデータを保持するために使用されます。

例えば、ユーザーごとの一意なIDや、セッションID、トランザクションIDなど、サーバー側で処理するためのデータを送信する際に活用されます。

<form action="/submit" method="post">
  <input type="hidden" name="user_id" value="123456">
  <input type="hidden" name="session_id" value="abcdefg">
  <input type="hidden" name="transaction_id" value="987654321">
  <input type="submit" value="Submit">
</form>

隠し入力欄の追加属性：name属性の利用

隠し入力欄は、name属性と組み合わせて使用することが一般的です。

name属性は、フォームデータがサーバーに送信される際に、そのデータの識別子として働きます。

<input type="hidden" name="userid" value="12345">

サーバー側でこのデータを”userid”として認識し、その値が”12345″であることがわかります。

隠し入力欄の値の意味と利用法

隠し入力欄の値は、value属性で設定します。

この値がサーバーに送信され、データの処理に使用されるのです。

サーバー側で、この値を用いてユーザー認証やデータの整合性確認、処理のトラッキングなどをおこないます。

例えば、ユーザーがフォームを送信したとき、そのフォームが特定のユーザーに紐づけられたものであることを確認するために、この隠しフィールドの値を使います。

<form action="/submit" method="post">
  <input type="hidden" name="user_id" value="123456">
  <input type="text" name="name" placeholder="Name">
  <input type="submit" value="Submit">
</form>

隠し入力欄の利用事例

こちらでは、隠し入力欄の具体的な利用事例についてお伝えします。

内容の追跡、セキュリティの向上、そして検証方法について詳しく解説します。

編集された内容の追跡
ウェブサイトのセキュリティ向上のための利用法
隠し入力欄の検証方法

編集された内容の追跡

隠し入力欄は、ユーザーによるフォームの編集内容を追跡するためにも使用できます。

例えば、ユーザーがフォーム内のフィールドを変更したとき、その情報を隠し入力欄に保存しておくことが可能です。

ユーザーがフォームを送信すると、隠し入力欄のデータも一緒に送信され、サーバー側で編集履歴を確認できます。

ウェブサイトのセキュリティ向上のための利用法

隠し入力欄は、ウェブサイトのセキュリティを向上させる手段としても利用されます。

なぜなら公開したくない情報を隠せるからです。

ただしソースコードを見ればわかってしまうのと、特定のツールを使えば、値を書き換えることも可能。

機密性の高い情報はhidden属性といえど、送受信しないことをおすすめします。

隠し入力欄の検証方法

隠し入力欄の内容は、ブラウザの開発者ツールを使って確認できます。

このツールを用いてHTMLソースを表示させれば、隠し入力欄のname属性やvalue属性の値が確認できてしまうのです。

開発段階では、隠し入力欄が正しく機能しているか、または適切な値が設定されているかを検証するために活用してください。

hidden属性の使用例

こちらでは、hidden属性の実際の使用例について詳しく解説します。

具体的なデモ、実践的なサンプル、そして仕様書に基づいた利用例を提供します。

hidden属性を用いた具体的なデモ
実践的なサンプルの展示
仕様書に基づいたhidden属性の利用例

hidden属性を用いた具体的なデモ

以下はhidden属性を用いた一例です。

この例では、ユーザーには見えない<input type="hidden">タグを利用し、ユーザー固有のIDを保持しています。

<form method="post" action="/submit">
    <input type="hidden" name="userid" value="12345">
    <input type="submit" value="Submit">
</form>

ユーザーがSubmitボタンをクリックすると、useridの値が12345の情報が一緒に送信されます。

実践的なサンプルの展示

次に、より実践的なサンプルを展示します。

ここでは、JavaScriptを使ってhidden属性の値を動的に変更する例を見てみましょう。

<form id="myForm">
    <input type="hidden" id="hiddenInput" name="hiddenInput" value="">
    <input type="button" value="Click me" onclick="changeHiddenInput()">
</form>

<script>
function changeHiddenInput() {
    document.getElementById('hiddenInput').value = 'New value';
}
</script>

このサンプルでは、ユーザーが”Click me”ボタンをクリックすると、hidden属性の値が”New value”に変更されます。

仕様書に基づいたhidden属性の利用例

最後に、HTML5の仕様書に基づいたhidden属性の利用例を挙げます。

hidden属性は、要素がまったく表示されないことを示します。

この属性が存在すると、ユーザーエージェントはその要素をレンダリングしません。

以下はその一例です。

<div hidden>
  <p>この文は表示されません。</p>
</div>

この例では、<div>要素にhidden属性が設定されているため、その中の<p>要素はユーザーに表示されません。

ただし、この情報はウェブページのHTMLソースに存在し、開発者ツールなどで確認が可能です。

まとめ

当記事を通じて、HTMLのhidden属性について学び、その利用法と注意点を理解することができました。

HTMLのhidden属性とは何か
その利用法、活用事例、注意点
隠し入力欄の使用例として、<input type="hidden">タグの利用方法

hidden属性はHTMLの中でも特殊な部分であり、適切に利用することでウェブページの機能やセキュリティを向上させられます。

しかしその使用には注意が必要であり、適切な理解と知識が求められるのです。

さらなる理解を深めるためには、HTMLやJavaScriptの基本を学ぶことから始めましょう。

当サイトでも、さまざまな記事をご用意してますので、ぜひご覧ください。