Any hidden reasons to use ids instead of name attributes to identify fields in forms?

Question

I am working on a large web application project and the previous designer favored the use of ids as handles to form fields over name attributes.

I suppose one advantage of this is that the lookup of that field via Javascript is faster through ids.

A big problem I'm now running into, however, is that ids have global scope. I want to refactor a large set of database column names to a more standard naming scheme, which doesn't include any column name prefix to identify which table the column belongs to. This is going to cause problems in those forms that use ids, since the field ids correspond directly to the column names. Column names which were things like "zon_name" and "pro_name" are now going to both be just "name". This will cause non-unique ids in the html.

So, after that long preamble, here's my question...

Before I try to address this scoping issue by changing all the forms to use name attributes instead of ids, are there any other reasons I'm not considering that the original developer may have had for using ids besides the speediness of their lookup?

I know this is a long one so I appreciate anyone who is brave enough to read through and give a good answer. Thanks!

Answer 1

Name and id do different things and, while there is some overlap, they are not interchangeable for the most important things they do.

Use name

• To determine what key will be given to the data when the form is submitted to the server
• To create radio groups
• From JS/CSS when you need to reference multiple form controls at once (and when adding a class or using the element type is not more appropriate)

Use id

• In the for attribute of the control's <label>
• From JS/CSS when you need to reference a specific input

I suppose one advantage of this is that the lookup of that field via Javascript is faster through ids.

Not significantly (especially when the name is a unique one).

It sounds like the original designer hasn't been following standard conventions and has come up with something highly JavaScript dependant.

Answer 2

If you're using forms, you should be using <label for="aFormElement"> along with your form elements.

The for attribute on label matches up with an id attribute, not a name attribute.

So, you really need both id (for the label, amongst other things) and name for server-side code.

Answer 3

For the speed to find your elements, you can set just id on the form.
Then for the fields use name to read them like:

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