Thuộc tính ẩn HTML được sử dụng để thông báo với người dùng rằng phần tử có thuộc tính ẩn không còn liên quan đến tài liệu và sẽ không hiển thị với người dùng.
Hãy để chúng tôi xem ví dụ về ẩn thuộc tính -
Ví dụ
<!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) Nhấp vào ‘Go’ nút với cấp độ ủy quyền của người dùng -
2) Nhấp vào ‘Go’ nút với cấp độ ủy quyền của quản trị viên -
3) Nhấp vào ‘Go Nút 'với cấp độ trái phép -
