为什么输入元素的“值”属性有时不会出现在 HTML 中？答案

【问题标题】：Why input elements "value" attributes are sometimes not presented in the HTML?为什么输入元素的“值”属性有时不会出现在 HTML 中？
【发布时间】：2021-06-03 14:30:58
【问题描述】：

有时input 元素会在视觉上显示它们的值，但是这些值不会显示在元素 HTML 中。不是“文本”，也不是“值”属性。喜欢here
实际上，它是一个value 属性，但它是隐藏的。
我的意思是即使value 属性本身的存在也是隐藏的。
我想知道为什么那些value 属性被隐藏了？

【问题讨论】：

标签： html selenium

【解决方案1】：

在前端开发方面，我相信有几种方法可以确保value 保持为空，同时元素仍显示来自DOMString 的用户输入。例如，来自this HTML documentation

input 和 textarea 元素有一个脏值标志。这用于跟踪值和默认值之间的交互。如果为 false，则 value 反映默认值。如果为真，则忽略默认值。

因此，如果默认值为空，并且设置了此 dirty value flag，则无论用户输入如何，value 属性都将保持为空。

【讨论】：

【解决方案2】：

<button> , <input> and <option>元素，value属性指定元素的初始值。这就是为什么 HTML 中没有显示输入元素“值”属性的原因？

【讨论】：

【解决方案3】：

我们需要了解value属性是什么？

一般来说，value属性指定<input> element的值。

假设button - 它定义了button 上的text。

对于password input 字段，它必须是hidden。

因此，对于任何sensitive field，值属性都应该被隐藏。

更新 1：

为了更详细地回答您的问题，我创建了 2 个 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>

这里的值是

value="My excellent blog post"

在 UI 中看起来像这样：

现在让我们假设如果它是 username 输入字段，正如您所描述的那样，我们不想在这种情况下传递 value 属性，而应该是 placeholder attribute。

让我删除value attribute 并改成placeholder。

HTML：

<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 开发人员和业务部门。

【讨论】：

在我展示的屏幕截图中，值显示在 UI 中，但未显示在 HTML 中。此外，value 本身的存在是隐藏的，这就是我要问的。
@Prophet ：更新了上面的答案。这取决于 UI 开发人员正在开发哪种 HTML 标签。对于大多数用户名或密码字段，您将看不到 value 属性。
我明白了，谢谢。但是，在我展示的 HTML 中，没有 placeholder 属性，什么都没有。另外，如果我想获得该值，我必须获得 value 属性，这会给我它的价值。
在我展示的 HTML 中没有占位符属性 - 这取决于 UI 开发人员，他是否想在 UI 上显示。您也可以删除占位符属性，这不是强制性的。对于你的第二个问题： - 必须获取 value 属性，这会给我它的价值 - 一旦你在输入字段中提供了一些东西，你就可以得到这个值。否则你应该得到空值。
好吧，我已经询问了我们的 FE 开发人员。他是一位经验丰富的工程师。所以我只是发布了正确的答案。

【解决方案4】：

对于文本类型的输入元素（以及其他一些元素），在原生 HTML 中，元素的 value 属性呈现其默认值。
用户插入的文本值不会显示在那里，所以只有默认值将始终显示在value 属性中。
如果没有为该元素设置默认值，value 属性将不会出现在元素 HTML 中。
与所附屏幕截图中的类似。

【讨论】：

屏幕截图显示了用户在其中插入一些文本输入后的情况。因此文本在页面上直观地呈现，它可以通过 element.getAttribute("value") 使用 Selenium 接收，但 value 属性不会出现在 HTML 视图中，因为它没有默认值并且没有使用外部库在那里呈现元素的实际动态值。