hidden属性

hidden属性は、関連性がある要素かどうかを指定するグローバル属性。

例えば、要素にhidden属性を指定すると、まだ関連性がない要素、もしくは、既に関連性がなくなった要素であることを示す。

ブラウザ対応

構文

<element hidden>

要点

  • まだ関連性がない要素、もしくは、既に関連性がなくなった要素であることを示す。
  • 全てのHTML要素で使用できるグローバル属性である。
  • HTML5にて新たに導入された属性である。

サンプルコード

<p hidden>テキスト</p>

サンプル

HTMLソースコード

<script>
function sampleAgree(){
	$checked = document.getElementById("sampleAgree").checked;
	$sampleInput = document.getElementById("sampleInput");
	if( $checked ) {
		$sampleInput.hidden = false;
	}else{
		$sampleInput.hidden = true;
	}
}
</script>
<p>
	<label>
		<input type="checkbox" id="sampleAgree" onchange="sampleAgree()">
		同意
	</label>
</p>
<fieldset id="sampleInput" hidden>
	<legend>入力欄</legend>
	<p>ＩＤ：<input type="text" name="name"></p>
	<p>パスワード：<input type="password" name="password"></p>
</fieldset>

実際の表示

サンプルの動作について

「同意」にチェックを入れると、「入力欄」が現れる。