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

<div hidden>この要素は表示されません</div>
<p hidden>このテキストも非表示です</p>

// 要素を非表示にする
element.hidden = true;
// 要素を表示する
element.hidden = false;

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

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

<button onclick="toggleElement()">表示切替</button>
<div id="targetElement">切り替え対象の要素です</div>

<script>
function toggleElement() {
  const element = document.getElementById('targetElement');
  element.hidden = !element.hidden;
}
</script>

<div class="css-hidden">CSSで非表示にする要素</div>
<div hidden>hidden属性で非表示にする要素</div>

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

<label>
  <input type="checkbox" id="showElement"> 詳細情報を表示
</label>
<div id="detailInfo" hidden>
  <h3>詳細情報</h3>
  <p>ここに詳細な情報が表示されます。</p>
</div>

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

<button onclick="recordAction('button1')">ボタン1</button>
<button onclick="recordAction('button2')">ボタン2</button>

<form action="/analytics" method="post" id="actionForm">
  <input type="hidden" name="lastAction" id="lastAction">
  <input type="submit" value="送信">
</form>

<script>
function recordAction(actionId) {
  document.getElementById('lastAction').value = actionId;
}
</script>

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

<section id="section1">
  <h2>セクション1</h2>
  <p>セクション1の内容です。</p>
</section>

<section id="section2">
  <h2>セクション2</h2>
  <p>セクション2の内容です。</p>
</section>

<section id="section3">
  <h2>セクション3</h2>
  <p>セクション3の内容です。</p>
</section>

<form id="dataForm">
  <input type="text" id="userName" placeholder="名前">
  <input type="email" id="userEmail" placeholder="メールアドレス">
  <input type="hidden" id="savedData" name="savedData">
  <button type="button" onclick="saveData()">一時保存</button>
  <input type="submit" value="送信">
</form>

<script>
function saveData() {
  const data = {
    name: document.getElementById('userName').value,
    email: document.getElementById('userEmail').value
  };
  document.getElementById('savedData').value = JSON.stringify(data);
  alert('データを一時保存しました');
}
</script>

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

<button onclick="changeState('loading')">読み込み開始</button>
<button onclick="changeState('completed')">完了</button>

<div id="statusDisplay">現在の状態: initial</div>

<script>
function changeState(newState) {
  document.getElementById('appState').value = newState;
  document.getElementById('statusDisplay').textContent = '現在の状態: ' + newState;
}
</script>

<div class="tabs">
  <button onclick="showTab('tab1')">タブ1</button>
  <button onclick="showTab('tab2')">タブ2</button>
  <button onclick="showTab('tab3')">タブ3</button>
</div>

<div id="tab1" class="tab-content">
  <h3>タブ1の内容</h3>
  <p>タブ1に関する情報です。</p>
</div>

<div id="tab2" class="tab-content" hidden>
  <h3>タブ2の内容</h3>
  <p>タブ2に関する情報です。</p>
</div>

<div id="tab3" class="tab-content" hidden>
  <h3>タブ3の内容</h3>
  <p>タブ3に関する情報です。</p>
</div>

<script>
function showTab(tabId) {
  // すべてのタブを非表示
  document.querySelectorAll('.tab-content').forEach(tab => {
    tab.hidden = true;
  });
  // 選択されたタブを表示
  document.getElementById(tabId).hidden = false;
}
</script>

<button aria-describedby="helpText">ヘルプ</button>
<span id="helpText" class="visually-hidden">
  このボタンをクリックすると詳細なヘルプ情報が表示されます
</span>

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
</style>