hidden とは
- ここで説明する hidden とは次の語句からなる HTML 要素の属性です。
- hidden
- 読み: ヒドゥン
意味: 隠れた
hidden 属性の概要
この属性は、現時点では関連性がないが、これから関連するかもしれない要素や、 以前は関連性があったが今はもう関連していない要素の表示をコントロールするために使用します。
サンプルコードと実行結果
この属性は、現時点で関連性はあるが、デザイン上の問題などで単純に隠しておきたいだけの理由で利用してはならないとされています。
ここでは、ユーザーの同意があった場合のみに関連性をもつ要素を予め隠しておき、 同意を得られた場合に、その要素を表示するといったサンプルを作成してみました。
このサンプルでは javascript を使用していますので、参考にコードを掲載しておきますが、説明は割愛させていただきます。
サンプルコード: HTML
<body>
<div>
このチェックボックスにチェックすると無意味な利用規約に同意することになります:<br>
<input id="idCheckBox" type="checkbox" onchange="funChange(this.checked)">
</div>
<div>
<input id="idButton" type="button" value="次へ" onclick="funOnClick()" hidden>
<p id="idP" hidden>
以上の様に利用規約に同意するまでは無関係な
[ 次へ ] のボタンと、ボタンを押すまでは無関係な このコメントがサンプルです。
</p>
</div>
<script>...</script>
</body>
サンプルコード: script
<script>
function funChange(checked){
if(checked == false){
idButton.hidden = true;
idP.hidden = true;
}
else{
idButton.hidden = false;
}
}
function funOnClick(){
idP.hidden = false;
}
</script>
このチェックボックスにチェックすると無意味な利用規約に同意することになります:
以上の様に利用規約に同意するまでは無関係な [ 次へ ] のボタンと、ボタンを押すまでは無関係な このコメントがサンプルです。