“hidden”属性について

“hidden”属性は要素が文書の現在の状態とまだ関連性がない、もしくは関連性がなくなったことを示す属性です。

hidden="hidden"

“hidden”属性の値に“hidden”が指定された要素は表示されません。また、“hidden”属性が指定された要素は音声ブラウザなどがらも隠されます。

文書のほかの部分で使用され、ユーザーが直接アクセスすることが意図されていないコンテンツを隠しておくために使用することができます。また、今は文書のコンテンツと関連がないが、ユーザーの操作によって関連がある状態になった時に使用されるコンテンツを隠しておくために使用することができます。

タブ付きダイアログの他のパネルなど、正当な方法で表示することが可能なコンテンツを隠すために“hidden”属性を使用するのは適切ではありません。

関連性のないコンテンツへリンクするのは不自然なため、自身が“hidden”属性で隠された状態でない要素から“hidden”属性が指定された要素へハイパーリンクするべきではありません。また、“label”要素や“output”要素でもその要素自身が“hidden”属性で隠された状態でない場合に“for”属性で“hidden”属性が指定された要素に関連付けるべきではありません。

hidden="until-found"

“hidden”属性の値に“until-found”が指定された要素は見つかるまで隠された状態(hidden until found state)となります。

見つかるまで隠された状態の要素は値が“hidden”である場合と同様に隠された状態となりますが、ブラウザのページ内検索機能やアンカーリンクによってアクセス可能で、アクセスされると“hidden”属性が取り除かれて要素が現れます。また、“hidden”属性が取り除かれる前に“onbeforematch”イベントが発生します。

指定できる値

属性値	説明
until-found	検索されるまで要素を隠す
hidden	要素の内容が関連性がないことを表す

属性値は空文字列とすることができます。空文字列とした場合は“hidden”として扱われます。

“hidden”属性は列挙属性であり、無効な値が指定された場合の既定値は“hidden”です。

サンプルコード

値が“hidden”の場合

<form method="post" action="sample-formtag3.php" target="_blank">

<p>同意する場合はチェックしてください</p>
<p><label><input type="checkbox" name="agree" value="1" id="agree" onchange="visible()">私は3歳以上です</label></p>
<p>＊同意しないと入力欄が表示されません</p>
<div id="form1" hidden="hidden">

<fieldset>

<legend>あなたの猫の情報</legend>
<p><label>名前：<input type="text" name="name" required></label></p>
<p>

<label>色：

<select name="color" required>

<option value="白">白</option>>
<option value="黒">黒</option>
<option value="白黒">白黒</option>
<option value="キジトラ">キジトラ</option>
<option value="茶トラ">茶トラ</option>
<option value="三毛">三毛</option>
<option value="その他">その他</option>

</select>

</label>

</p>

</fieldset>
<p><input type="submit" value="送信する"></p>

</div>

</form>
<script>

function visible(){
if (document.getElementById("agree").checked) {
document.getElementById("form1").hidden = false;
}
else {
document.getElementById("form1").hidden = true;
}
}

</script>

同意する場合はチェックしてください

私は3歳以上です

＊同意しないと入力欄が表示されません

＊送信すると入力内容が表示されます。

値が“until-found”の場合

<section>

<p><a href="#mangosteen">マンゴスチンについて</a></p>

</section>

<section id="mangosteen" hidden="until-found">

<h1>マンゴスチンについて</h1>
<p>

「マンゴスチン」はフクギ科フクギ属の常緑高木及びその果実のことである。

</p>
<p>

マンゴスチンの木は7メートルから25メートル程度の直立する幹を持つ円形または円錐形の樹冠を形成する高木である。肉厚で淡桃色の花を咲かせる。

</p>
<p>

マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。

</p>

</section>

マンゴスチンについて