FormData与表单直接提交的输入值提取逻辑差异及文档咨询

其实这个现象的核心是DOM元素的Property和HTML Attribute的区别，以及两种提交方式读取数据的逻辑不同，相关行为在HTML标准里是有明确规定的。

先给你理清楚两个容易混淆的概念：

• DOM Property：就是你用JS操作DOM时访问的对象属性，比如input.value，它代表控件的当前状态——比如输入框显示的内容、用户输入后的最新值，或者你用JS直接设置的显示值。
• HTML Attribute：是HTML标签上写的属性（比如<input value="b">），它代表控件的初始值，除非你用setAttribute主动修改，否则不会随用户输入或JS修改Property而自动变化。

接下来分别说两种提交方式的逻辑：

1. 浏览器默认表单提交（直接点击提交按钮） #

浏览器默认提交表单时，会根据控件的「脏标记（dirty flag）」来决定读取哪个值：

• 如果控件从未被用户修改过，也没有通过JS修改过value Property，脏标记为false，此时会读取与value Attribute绑定的defaultValue Property（也就是你用setAttribute设置的'b'）。
• 如果控件被修改过（用户输入或JS改了value Property），脏标记为true，此时会读取当前的value Property。

在你的示例里，先设置input.value = 'a'后又用setAttribute修改了value Attribute，导致浏览器默认提交时读取了同步更新后的defaultValue，也就是'b'。

2. 使用FormData提交 #

FormData的构造逻辑很直接：它会读取每个表单控件当前的value Property，也就是用户看到的显示值（你的示例里就是'a'），不管value Attribute是什么。这是因为FormData的设计就是为了获取表单的当前状态，模拟用户提交时的实时数据。

关于规范文档的说明 #

这些行为都在HTML标准中有明确定义：

• 表单控件的defaultValue属性与value Attribute的绑定关系、脏标记的判定逻辑，属于表单控件的基础状态规范。
• FormData的构造规则明确要求读取控件的当前值（即value Property），而非初始的Attribute值。

简单来说，如果你想让两种提交方式的结果一致，最好统一操作逻辑：要么只修改value Property来控制显示和提交值，要么同时同步修改value Property和value Attribute。

内容的提问来源于stack exchange，提问作者KWeiss