HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのhidden属性とは？要素を非表示にする方法とサンプルコード

HTMLのhidden属性は、その属性が付与された要素が現時点ではドキュメントに関連していないこと、つまりユーザーに表示すべきではないことをブラウザへ伝えるための属性です。hidden属性が指定された要素は、画面上に表示されなくなります。

hidden属性は論理型（ブーリアン）の属性なので、「hidden」と記述するだけで機能します。また、JavaScriptから element.hidden = false のように値を操作することで、条件に応じて動的に表示・非表示を切り替えることも可能です。

それでは、hidden属性を使った具体例を見ていきましょう。次のサンプルでは、テキストボックスに入力された権限レベルに応じて、2つのセレクトボックスのうちどちらか一方だけを表示する仕組みを実装しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML hidden attribute</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-hidden-attribute</legend>
<input type="text" id="textSelect" placeholder="Your Authorization Level">
<select id="selection1" hidden>
<option>Add user</option>
<option>Delete user</option>
<option>Modify user</option>
</select>
<select id="selection2" hidden>
<option>Mail admin</option>
<option>Call admin</option>
</select>
<input type="button" value="go" onclick="displaySelection()">
<div id="divDisplay">Hello</div>
</fieldset>
</form>
<script>
   var textSelect = document.getElementById("textSelect");
   var divDisplay = document.getElementById("divDisplay");
   var selection1 = document.getElementById("selection1");
   var selection2 = document.getElementById("selection2");
   function displaySelection() {
      if(textSelect.value === 'admin'){
         selection1.hidden = false;
         selection2.hidden = true;
         divDisplay.textContent = 'Welcome Admin';  
      } else if(textSelect.value === 'user'){
         selection2.hidden = false;
         selection1.hidden = true;
         divDisplay.textContent = 'Welcome User';
      } else{
         selection2.hidden = true;
         selection1.hidden = true;
         divDisplay.textContent = 'Your input does not match any authorization';
      }
   }
</script>
</body>
</html>

このコードでは、初期状態で両方のセレクトボックスにhidden属性が設定されています。「go」ボタンをクリックすると displaySelection() 関数が実行され、入力内容に応じて各セレクトボックスのhiddenプロパティが切り替わります。

実行結果

1）権限レベル「user」を入力して「go」ボタンをクリックした場合

管理者向けメニューが非表示になり、一般ユーザー向けの選択肢のみが表示されます。

HTMLのhidden属性とは？要素を非表示にする方法とサンプルコード

2）権限レベル「admin」を入力して「go」ボタンをクリックした場合

今度はユーザー向けメニューが非表示となり、管理者向けの選択肢が表示されます。

HTMLのhidden属性とは？要素を非表示にする方法とサンプルコード

3）未定義の権限レベルを入力して「go」ボタンをクリックした場合

どちらのセレクトボックスも非表示のままとなり、権限が一致しない旨のメッセージが表示されます。

HTMLのhidden属性とは？要素を非表示にする方法とサンプルコード

hidden属性使用時の注意点

hidden属性の挙動はCSSの display: none; と似ていますが、要素自体はHTML内に残り続けるという点が異なります。なお、対象の要素に対してCSSで明示的に display プロパティが指定されている場合、hidden属性による非表示が無効化されることがあります。確実に非表示にしたいケースでは、CSSでの制御を併用するのが安全です。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以