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

HTMLの隠し属性

HTMLのhidden属性は、hidden属性を持つ要素がドキュメントに関連しなくなったため、ユーザーに表示されないようにすることをユーザーに通知するために使用されます。

非表示の例を見てみましょう 属性-

例

<!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>

1）「実行」をクリックします ユーザー認証レベルのボタン-

HTMLの隠し属性

2）「実行」をクリックします 管理者認証レベルのボタン-

HTMLの隠し属性

3）「実行」をクリックします 不正なレベルの’ボタン-

HTMLの隠し属性


  1. HTMLラップ属性

    HTML wrap属性は、フォームがHTMLドキュメントで送信されたときにテキスト領域のテキストをどのように折り返すかを定義します。 構文 以下は構文です- <textarea wrap=”hard | soft”></textarea> HTMLラップ属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height:

  2. HTMLドラッグ可能属性

    HTML DOMドラッグ可能属性は、要素がドラッグ可能かどうかを指定するブール値を返す/設定します。 注 −リンクと画像はデフォルトでドラッグ可能です。 HTMLドラッグ可能の例を見てみましょう 属性- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM draggable</title> <style>    * {       padding: 2px;       margin:5px; &n