HTML Form子元素name属性是否会覆盖父表单的原有内置属性？

你观察到的运行表现属于HTML标准规定的正常现象。

HTMLFormElement 存在原生的快捷索引规则：表单内所有带name或id属性的表单控件（input、select、textarea等），都会被自动映射为父form元素的同名属性，直接指向对应的控件DOM节点。如果映射的名称和form元素的原生全局属性（比如id、name、action等）重名，就会覆盖原生属性的取值。

你提供的示例中：

• id为thing1的表单内存在name="id"的input元素，因此form.id被覆盖为该input节点，所以输出为input元素对象，类型是object
• id为thing2的表单内没有名称为id的控件，因此form.id仍然取原生属性值，为字符串thing2

针对你需要把input的name和数据库字段对齐的场景，可以选择以下方案规避冲突：

• 读取form原生属性时，统一使用getAttribute方法，不受子控件映射影响，例如form.getAttribute('id')可以始终拿到正确的form自身id值
• 读取表单内控件时，统一使用form.elements集合获取，例如form.elements['id']可以明确拿到name为id的input元素，语义更清晰，不会和原生属性混淆
• 若不想修改取值逻辑，也可以给表单内的input name加统一前缀（例如db_id），提交数据时再做映射转换，从根源避免和form原生属性重名

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