如何在 HTML 中指定某个元素尚不相关?

htmlweb developmentfront end technology更新于 2025/4/10 3:24:17

hidden 属性由布尔值组成。

它表示某个元素尚不重要，或者即使存在也不再相关。指定了 hidden 属性的元素不会被浏览器显示。hidden 属性的另一个应用是阻止用户查看元素，直到满足其他要求为止。

语法

<p hidden> ……… </p>

以下是示例……

示例

我们使用 hidden 属性来隐藏不相关的 HTML 脚本元素。


<!DOCTYPE html>
<html>
<body>
   <h2>Heading</h2>
   <p>This is a demo paragraph and visible.</p>
   <p hidden>This is a demo paragraph and hidden.</p>
</body>
</html>

输出

执行上述脚本后的输出为:-

示例

在下面的示例中，我们使用 hidden 属性来指定该元素不相关。


<!DOCTYPE html>
<html>
<body>
   <p hidden>A laptop, laptop computer, or notebook computer is a small, portable personal computer with a screen and alphanumeric keyboard.</p>
   <p>A laptop is a personal computer that can be easily moved and used in a variety of locations.</p>
</body>
</html>

输出

执行上述脚本后，隐藏部分中的文本将被显示，其余文本将被显示。

示例:隐藏表单内容

也可以使用 hidden 属性隐藏表单中的无关信息。但是，语法略有不同 -

语法

<input type = "hidden">

我们来看一个用于申请职位的表单，其中有三个输入框:姓名、招聘经理提出的问题和薪资待遇。但是，薪资待遇被隐藏了，因为它与职位申请表无关。


<form>
   <div>
      <label for="title">Enter Name:</label>
      <input type="text" id="title" name="title" value="My Name">
   </div>
   <div>
      <label for="content">Why should we hire you? Write in 300 words:</label>
      <textarea id="content" name="content" cols="60" rows="5">
         Some Content Here.
      </textarea>
   </div>
   <div>
      <label for="text"> Salary (Is hidden):</label>
      <input type="hidden" id="text" name="text" value="Hidden Content">
   </div>
   <div>
      <button type="submit">Update post</button>
   </div>
   <input type="hidden" id="postId" name="postId" value="34657">
</form>