How to use CSS Opacity Property In HTML
In this approach, we will use CSS Opacity Property to hide a value or text from the HTML Input control. Opacity refers to the transparency level of an element. Setting an element’s opacity to 0 makes it completely transparent, effectively hiding it from view.
Example: Hiding a value or text from the HTML Input control using CSS Opacity Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Hidden Input Value</title>
<style>
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 15px;
margin-right: 15px;
}
input[type="text"] {
margin-top: 10px;
}
</style>
</head>
<body>
<h6>Hiding a value or text from the HTML
Input control using CSS Opacity Property
</h6>
<!-- Opacity Method -->
<input type="text">
<input type="text" id="input3" style="opacity: 0;"
value="Hidden Value (Opacity)">
<br>
<button class="button" onclick="revealHiddenInputs()">
Show Hidden Inputs
</button>
<script>
function revealHiddenInputs() {
document.getElementById("input3")
.style.opacity = 1;
}
</script>
</body>
</html>
Output:
How to Hide a Value or Text from the HTML Input control ?Using HTML
Hiding values or text from HTML input controls involves concealing information within the web page’s structure so that it’s not immediately visible to the user but can still be accessed and processed by the web application.
This technique is often used for storing sensitive data or for managing information that doesn’t need to be directly displayed to the user.
Table of Content
- Using CSS color: transparent Property
- Using CSS display: none Property
- Using CSS visibility: hidden Property
- Using CSS Opacity Property
Using HTML <input type=”hidden”>
In this approach, we will use the HTML <input type=”hidden”> property to hide a value or text from the HTML Input control. The type=”hidden” attribute specifies that the input field should be hidden from the user interface. While hidden, the input still retains its value but is not visible to the user.
Example: Hiding a value or text from the HTML Input control using Using HTML <input type=”hidden”> Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Hidden Input Value</title>
<style>
.button {
background-color: #48874a;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<h6>Hiding a Value or Text from the HTML Input Control
using <input type="hidden"> Property
</h6>
<input type="hidden" id="hiddenInput"
value="Hidden Value">
<br>
<button class="button" onclick="revealHiddenInput()">
Show Hidden Input Value
</button>
<script>
function revealHiddenInput() {
let hiddenInput =
document.getElementById("hiddenInput").value;
alert("Hidden Input Value: " + hiddenInput);
}
</script>
</body>
</html>
Output: