HTML教程-HTML隐藏元素
你可以通过在元素中使用布尔属性hidden来隐藏元素。当在HTML文件中指定了hidden属性时，浏览器将不会显示带有该属性的元素。
语法
<element hidden>任何语句或内容</element>示例：以下示例演示了如何在不同的元素中使用hidden属性：
示例1：该示例在<p>段落标签中使用hidden属性。
<!DOCTYPE html>
<html>
<head>
<title>Hidden属性示例1</title>
</head>
<body>
<center><h1>JavaTpoint</h1></center>
<p hidden>This paragraph should be hidden.</p>
</body>
</html>输出结果：
示例2：该示例在<input type="text">输入框元素中使用hidden属性。
在此示例中，我们使用了hidden属性与两个<input>标签一起使用。当执行以下程序时，这些输入框将不会在网页上显示。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hidden属性在input标签中的示例</title>
<style>
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}
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;
}
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>
<!-- 由于在此<input>标签中使用了hidden属性，因此该输入框不会在网页上显示。 -->
<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">
<!-- 由于该输入框还使用了hidden属性，因此它也不会在网页上显示。 -->
<input hidden type="text" name="phone" id="pn" size="10" required>
<hr>
</div>
</form>
</body>
</html>输出结果：
浏览器支持
| 元素 |  Chrome |  IE |  Firefox |  Opera |  Safari |
|---|---|---|---|---|---|
<tag hidden> | 支持 | 支持 | 支持 | 支持 | 支持 |
