How to Hide a Value or Text from the HTML Input control ?
Last Updated :
02 Apr, 2024
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.
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
HTML
<!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:
OutputUsing CSS color: transparent Property
In this approach, we will use the CSS color: transparent property to hide a value or text from the HTML input control. The color property in CSS controls the color of the text content of an element. Setting color: transparent makes the text completely transparent, effectively hiding it from view while still preserving its space in the layout.
Example: Hiding a value or text from the HTML Input control using CSS color: transparent Property
HTML
<!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: #789335;
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 transparent
</h6>
<input type="text">
<input type="text" style="color: transparent;" value="">
<br>
</body>
</html>
Output:
OutputUsing CSS display: none Property
In this approach, we will use the CSS display: none property to hide a value or text from the HTML input control. The display property in CSS controls how an element is rendered in the layout.
Example: Hiding a value or text from the HTML Input control using CSS display: none Property
HTML
<!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: #3c7e71;
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 display: none Property
</h6>
<input type="text">
<input type="text" id="input1"
style="display: none;"
value="Hidden Value (Visibility)">
<br>
<button class="button" onclick="revealHiddenInputs()">
Show Hidden Inputs
</button>
<script>
function revealHiddenInputs() {
document.getElementById("input1")
.style.display = "block";
}
</script>
</body>
</html>
Output:
Output Using CSS visibility: hidden Property
In this approach, we will use CSS visibility: hidden Property to hide a value or text from the HTML Input control. The visibility property in CSS controls whether an element is visible or hidden while still occupying space in the layout. Set the visibility property to hidden to hide an element while preserving its space in the document flow.
Example: Hiding a value or text from the HTML Input control using CSS visibility: hidden Property
HTML
<!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;
}
input[type="text"] {
margin-top: 10px;
}
</style>
</head>
<body>
<h6>Hiding a Value or Text from the HTML Input
Control using visibility: hidden Property
</h6>
<input type="text">
<input type="text" id="input2"
style="visibility: hidden;"
value="Hidden Value (Visibility)">
<br>
<button class="button"
onclick="revealHiddenInputs()">
Show Hidden Inputs
</button>
<script>
function revealHiddenInputs() {
document.getElementById("input2")
.style.visibility = "visible";
}
</script>
</body>
</html>
Output:
OutputUsing CSS Opacity Property
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
HTML
<!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:
Output
Similar Reads
How to Hide Value or Text From Input Control in HTML ?
Hiding a value or text from an input control is a common requirement in web development. Whether for security purposes, such as password fields, or to maintain a clean user interface, HTML and CSS offer several methods to achieve this. This article explores various approaches to hide text or values
2 min read
How to specify the value of an input element using HTML ?
In this article, we will set the value of an input element using HTML. The value attribute for <input> element in HTML is used to specify the initial value of the input element. It has different meaning for different input type: The “buttonâ€, “reset†and “submit†property specifies the text on
1 min read
How to Get the Value of an Input Text Box using jQuery?
When working with forms or interactive web pages, sometimes need to get the values entered into the input fields. This article provide a complete guide on how to get the value o an input text box using jQuery. Below are the different approaches to get the value of an input text box using jQuery:Get
2 min read
How to create a hidden input field in form using HTML ?
In this article, we will learn how to add a hidden input field into our form using HTML. A hidden control stores the data that is not visible to the user. It is used to send some information to the server which is not edited by the user. Normally, this hidden field usually contains the value which i
2 min read
HTML | DOM Input Hidden value Property
The Input Hidden value property in HTML DOM is used to set or return the value of the value attribute of the hidden input field. The value attribute defines the default value of the input hidden field. Syntax: It returns the value property.hiddenObject.valueIt is used to set the value property.hidde
2 min read
How to set the input field value dynamically in AngularJS ?
Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o
2 min read
How to specify the type of an input element using HTML ?
In this article, we will specify the type of an input element using HTML. The HTML <input> type attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text. Syntax: <input type="value"> Attribute Values: button: It i
4 min read
How to Add Input Field inside Table Cell in HTML ?
In HTML, adding input fields inside the table cells can be done to make the application user interactive and useful in the scenarios of building forms, data entry systems, etc. Below are the approaches to add input field inside a Table Cell in HTML: Table of Content Using 'input' tagUsing data Attri
3 min read
How to specify a short hint that describes the expected value of an input element using HTML ?
The placeholder attribute specifies a short hint for input field that describes the expected value of an input field/text area. The short hint is displayed in the field before the user enters a value. Syntax: <element placeholder="value"> Attribute Value: This attribute describes the short hin
1 min read
How to disable the drop-down list in HTML5 ?
In this article, we will learn how to disable the drop-down list in HTML5. The drop-down is used to create a list of items that need to select an element. We use <select> and <option> elements to create a drop-down list and use the disabled attribute in <select> element to disable
2 min read