在用于填充后端返回值的<span>中使用name属性是否为不良实践？为何？

不符合HTML标准的设计初衷 #

HTML规范对name属性的适用范围有明确限定：它是专门为表单交互类元素设计的属性，核心功能是在表单发起提交请求时，作为字段的参数标识，把对应的值传递给后端。它的法定适用范围只有<input>、<select>、<textarea>、<button>、<form>这类和表单提交直接绑定的元素。
对于<span>、<div>这类纯展示用途的元素，规范从未给name属性定义过任何生效的语义——你给这些元素加的name值，本质只是碰巧复用了一个大家眼熟的属性名，和自己随便写的自定义属性没有任何区别。

实际开发中会碰到的隐性问题 #

• 浏览器历史兼容性坑：早年不同浏览器对非表单元素的name属性解析规则不统一，用document.getElementsByName做元素选择时，很容易出现漏选目标span、或者错选页面上其他带同name值的表单元素的问题，这类非预期的选择错误排查起来往往要花不少时间。
• 增加维护和可访问性成本：读屏类辅助工具对非表单元素上的name属性没有任何解析逻辑，这个属性对辅助技术来说完全是冗余信息；同时后续接手的开发看到span上的name属性，很容易误以为这是表单字段，对页面结构产生误判。
• 存在意外触发表单行为的风险：如果哪天有人不小心把这些带name的span挪到了某个<form>标签内部，浏览器会自动把这些span识别为可提交字段，把对应name和空内容作为参数一起发往后端，产生毫无意义的无效参数，排查这类问题的成本往往比一开始做规范改造高得多。

适配当前场景的无侵入优化方案 #

完全可以保留你原本“按对应字段名匹配填充值”的逻辑，只需要把复用的name属性换成标准的自定义属性即可：
把原本的结构

<div id="result-display">
  <span name="name-one"></span>
  <span name="name-two"></span>
</div>

替换为

<div id="result-display">
  <span data-field="name-one"></span>
  <span data-field="name-two"></span>
</div>

之后脚本遍历元素时，通过document.querySelectorAll('#result-display [data-field]')获取所有目标节点，读取节点的dataset.field属性拿到对应的字段名填充值即可，整个逻辑和你现有写法完全一致，但完全符合HTML规范，也避开了上面提到的所有隐性问题。

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