HTML 隐藏元素

2025 年 3 月 25 日 | 阅读 2 分钟

您可以使用布尔属性 hidden 来隐藏元素。当您在 HTML 文件中指定 hidden 属性时，浏览器将不会显示指定了此属性的元素。

语法

示例： 以下示例用于轻松理解如何在不同元素或标签中使用 hidden 属性

示例 1： 此示例将 hidden 属性与段落标签一起使用。

<!DOCTYPE html>
<html>
<head>
<title> 
First Example of Hidden attribute
</title>
</head>
<body>
<center>
<h1> tpointtech </h1>
</center>
<p hidden> This paragraph should be hidden.
</p>
</body>
</html>

输出

示例 2： 以下示例将 hidden 属性与 <input type=text> 元素一起使用。

在此示例中，我们将 hidden 属性与两个 input 标签一起使用。当执行以下程序时，这些输入字段将不会显示在网页上。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of Hidden attribute in input tag
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
} 
/* Following container class used padding for generate space around it, and also use a background-color for specify the color lightblue as a background */  
.container {
padding: 50px;
background-color: lightblue;
}
/* The following tag selector input use the different properties for the text filed. */
input[type=text] {
  width: 100%;
  padding: 15px;
margin: 5px 0 22px 0;
 border: none;
 background: #f1f1f1;
}

input[type=text]:focus {
background-color: orange;
outline: none;
}
/* The following div tag selector is used to provide the space or gap between the content or elements on a web page. */
div {
            padding: 10px 0;
}    
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>  <h1> Registration Form</h1> </center>
  
<hr>
<label for="fn"> Firstname: </label> 
<!-- The following input field not display on the web page because the hidden attribute is used in this <input> tag. -->
<input hidden type="text"  name="firstname" id= "fn" size="15" required /> 
<div>
<label for="mn"> Middlename: </label> 
<input type="text" name="middlename" id="mn" size="15" required /> 
</div>
<label for="Ln"> Lastname: </label>  
<input type="text" name="lastname" id="Ln" size="15"required /> 

<label for="pn"> 
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code"  value="+91" size="2"/> 
<!-- The following input field not display on the web page because it is also use the hidden attribute-->
<input hidden type="text"  name="phone" id="pn" size="10"/ required> 
</hr>
</div>
</form>
</body>
</html>

输出