使用id而不是name属性来标识表单字段有什么隐藏的原因吗？

Question

我正在从事一个大型Web应用程序项目，之前的设计师更喜欢使用ID作为表单字段的句柄，而不是使用名称属性。我认为这样做的一个优点是，通过ID查找该字段比通过名称属性更快。

然而，我现在遇到的一个大问题是，ID具有全局范围。我想将一组大型数据库列名重构为更标准的命名方案，其中不包括任何列名前缀以标识列属于哪个表。这将在使用ID的那些表单中引起问题，因为字段ID直接对应列名。列名例如"zon_name"和"pro_name"现在都将变成"name"，这将在HTML中导致非唯一ID。

因此，在尝试通过将所有表单更改为使用名称属性而不是ID来解决此作用域问题之前，是否有其他原因我没有考虑过，原始开发人员可能使用ID除了它们的查找速度之外？

在这里，我有一个问题...在此长篇介绍之前，感谢勇敢阅读并给出好的答案的人。谢谢！

- David Sanders

Answer 1

名称和ID有不同的用途，虽然它们有一些重叠之处，但它们在最重要的功能上是不可替代的。

使用名称

• 确定表单提交到服务器时将为数据分配哪个键
• 创建单选按钮组
• 从JS/CSS引用多个表单控件时（并且添加类或使用元素类型不太合适时）

使用ID

• 在控件的的for属性中
• 从JS/CSS引用特定输入时

我想其中一个优点是通过ID查找该字段的Javascript更快。

不会显著提高速度（尤其是当名称是唯一的时候）。

听起来原始设计者没有遵循标准惯例，并且想出了一些高度依赖JavaScript的东西。

- Quentin

---

对我来说也是这样。你和下面的人提到的另一个用途是，label的for属性必须对应一个id。但是，这似乎只设置了一个真正的功能，即当您单击标签时，它会通过id引用到相应的字段中。如果这意味着您必须在页面上为每个表单字段添加唯一的id（可能有数千个），那么这似乎并不是特别有用的事情。 - David Sanders

如果您想点击单选按钮或复选框，这是一个重要的好处。 大的点击目标更好。但它还将标签与控件相关联，以使屏幕阅读器等受益。如果您有数千个输入，则（除了页面可能已经很难处理）您可能正在通过程序生成它们并为自动生成的前缀添加计数器也不困难。 - Quentin

好的，很高兴知道还有其他用途。我认为主要问题是这种做法缺乏前瞻性的采纳。同一个表单已经存在许多重复的副本，并且一开始使用相同的id。因此，最初的设计者要么没有意识到这一点，要么没有意识到id属性的预期用途。此外，表单序列化程序在构建向服务器发送的请求时查找ids。因此，这种做法已经成为应用程序工作方式的基本部分。虽然这很困难，但我认为我必须开始清理这个问题。 - David Sanders

@Quentin，使用id的两个原因都可以避免。将表单元素包装在label中并避免使用for。仅对form使用id进行快速查找，然后使用name访问表单字段。 - Mic

@Mic - for 拥有更好的浏览器支持，并且允许比将控件放在表单内更灵活的布局。 - Quentin

Answer 2

如果您在使用表单，应该同时使用<label for="aFormElement">与您的表单元素。
label上的for属性与id属性相匹配，而不是name属性。 因此，您真的需要同时拥有id（对于label等其他内容）和name（用于服务器端代码）。

- thirtydot

---

我想他的意思是使用name与id来从JavaScript中访问表单元素的好处是什么？ - David Thomas

其实，我记得这是他似乎做这件事的另一个原因。该应用程序还使用了许多标签元素，并且这些元素链接到ID。谢谢你提醒我！ - David Sanders

如果您将表单元素包装在标签内，就可以避免使用ID：<label><input type="checkbox"/> <span>标题</span></label> - Mic

Answer 3

为了更快地找到您的元素，您可以在表单上设置id。
然后对于字段，请使用name进行读取，例如：

var form = document.getElementById('theForm'),
    productName = form.productName.value;

- Mic