cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > タグ・属性対応表 > 属性の説明
WEBページ作成
広告
hidden 「関連性無の指定」[読み方：ヒドゥン]
hidden属性は、ページの現在の状態には直接的に、まだ関連性がない、または、もう関連性がないことを意味します。
hidden属性を指定した要素は、非表示となります。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
広告
hidden の属性値
| 値 | 意味 | 注意事項 |
|---|---|---|
| － | － | － |
hidden のサンプル
同意するまで入力欄を非表示にするサンプル
<script>
function js1(){
//チェックされた場合
if (document.getElementById('ok').checked) {
//入力域を表示
document.getElementById('uinf').hidden = false;}
else {
//入力域を隠す
document.getElementById('uinf').hidden = true;}
}
</script>
<p>規約に同意の場合、下記をチェックして下さい。入力欄が表示されます。</p>
<input type="checkbox" name="ok" id="ok" onclick="js1()">規約に同意します。
<div id="uinf" hidden>
<p>ユーザー名：<input type="text" name="uname"></p>
<p>メールアドレス：<input type="text" name="email"></p></div>
function js1(){
//チェックされた場合
if (document.getElementById('ok').checked) {
//入力域を表示
document.getElementById('uinf').hidden = false;}
else {
//入力域を隠す
document.getElementById('uinf').hidden = true;}
}
</script>
<p>規約に同意の場合、下記をチェックして下さい。入力欄が表示されます。</p>
<input type="checkbox" name="ok" id="ok" onclick="js1()">規約に同意します。
<div id="uinf" hidden>
<p>ユーザー名：<input type="text" name="uname"></p>
<p>メールアドレス：<input type="text" name="email"></p></div>
規約に同意の場合、下記をチェックして下さい。入力欄が表示されます。
規約に同意します。ユーザー名：
メールアドレス：
留意事項
- hidden属性は、要素を隠す目的での指定は不可です。 例えば、タブ付きボックスの表示/非表示の切り替えに、hidden属性の指定は不可です。これは、大量の項目を分割して表示すると捉えるべきで、要素として関連性が無いわけではありません。
- CSSで全ての要素に"display:block;"を指定する場合など、hiddenの指定が取り消される事があるため、CSSでの指定は注意が必要です。
- hiddenが指定された要素にハイパーリンクの指定は、非表示の要素へのリンクとなり、ユーザーが混乱するため不可です。
- hiddenが指定された要素は非表示となるだけで項目は存在するため、送信する前に項目を初期化する等の注意が必要です。
広告