hidden属性とは

hidden属性は、現在その要素が関連性が無いことを示す属性です。この属性を使うとその要素は非表示になりますが、非表示にすることを目的とした属性ではありません。従って、タブ付きメニュー等で、非表示のコンテンツに利用するような使い方は誤りになります。

属性値
"hidden": 関連性が無いことを示す
利用できるバージョン(HTML4.01以降)
HTML5 〜
対応ブラウザ
  • Chrome
  • Firefox
  • Internet Explorer11 〜
  • Opera
  • Safari

hidden属性を使ったサンプル

基本的なhidden属性の例
<form action="">
  <label>
    <input type="checkbox" name="question" id="other" value="other" onchange="toggle()">その他
  </label>
  <label id="other_text"  hidden>
    <input type="text" name="question" id="other_text" value="">
  </label>
</from>
function toggle() {
  var radio = document.getElementById("other");
  var text = document.getElementById("other_text");
  if (radio.checked) {
    text.removeAttribute("hidden");
  } else {
    text.setAttribute("hidden", "hidden");
  }
}
ブラウザでの表示例

RERUN

仕様

HTML5.1
5.1. The hidden attribute
HTML5
7.1 The hidden attribute

関連する属性

関連するレッスン