为什么要输入元素；“价值”；属性有时不在HTML中显示？

有时，

input

元素会直观地显示它们的值，但是这些值不会显示在元素HTML中。不作为“文本”和“值”属性。像
实际上，它是一个

值

属性，但它是隐藏的。
我的意思是，甚至属性本身的

值的存在都是隐藏的。

我想了解为什么那些
值
属性是隐藏的？
和
元素，值属性指定元素的初始值。这就是为什么HTML中没有显示输入元素的“值”属性？
我们需要了解什么是
value
属性

通常，value属性指定
元素的值

比如说
按钮
——它定义了
按钮上的
文本

对于
密码
输入
字段，它必须是
隐藏的

因此，对于任何
敏感
字段
而言，应隐藏值属性

更新1:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post">
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657">
</form> 

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" placeholder="Enter your title here">
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657">
</form>

为了更详细地回答您的问题，我创建了两个html文件

HTML文件1:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post">
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657">
</form> 

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" placeholder="Enter your title here">
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657">
</form>

在UI中，它如下所示：


现在让我们假设它是一个
用户名
输入字段，正如您所描述的，我们不希望在这种情况下传递值属性，而是应该是
占位符属性

让我删除
值属性
，并放置
占位符

HTML:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post">
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657">
</form> 

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" placeholder="Enter your title here">
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657">
</form>


职位名称：
帖子内容：
这是我优秀博客文章的内容。我希望你喜欢！
更新帖子

在UI中，它如下所示：


话虽如此，占位符属性并不是必填字段，它取决于UI开发人员和业务部门。
从前端开发方面来看，我相信有几种方法可以确保
值保持为空，而元素仍然显示用户从
DOMString
输入的内容。例如，从

input和textarea元素具有脏值标志。这用于跟踪值和默认值之间的交互。如果为false，则该值将镜像默认值。如果为true，则忽略默认值

因此，如果默认值为空，并且设置了此
脏值标志
，
值
属性将保持为空，无论用户输入如何。
对于文本类型的输入元素（以及其他一些元素），在本机HTML中，元素的
值
属性将显示其默认值。

此处不显示用户插入的文本值，因此只有默认值始终显示在
value
属性中。

如果没有为该元素设置默认值，则元素HTML中将不会显示
value
属性。

与所附屏幕截图中显示的值类似。
在我显示的屏幕截图中，值显示在UI中，但未显示在HTML中。此外，
值本身的存在是隐藏的，这就是我要问的。@Prophet:更新了上面的答案。这取决于UI开发人员正在开发哪种HTML标记。对于大多数用户名或密码字段，您不会看到值属性。我知道了，谢谢。但是，在我介绍的HTML中，仍然没有占位符属性，什么也没有。另外，如果我想获得该值，我必须获得
值
属性，这将为我提供它的值。在我展示的HTML中，没有占位符属性-这取决于UI开发人员是否希望在UI上显示。您也可以删除占位符属性，它不是必需的。对于你的第二个问题：-必须得到value属性，这将给我它的值-一旦你在输入字段中提供了一些东西，你就可以得到值。否则你应该得到空值。好吧，我已经问过我们的FE开发者了。他是一位经验丰富的工程师。所以我刚刚发布了正确的答案。屏幕截图显示了用户在那里插入一些文本输入后的情况。因此，文本在页面上以可视方式显示，可以使用Selenium by element.getAttribute（“value”）接收，但HTML视图中不显示
value
属性，因为它没有默认值，并且没有使用外部库来显示元素的实际动态值。