Best Practice: Access Form Elements by HTML Id or Name Attribute

Should I access a form by name, id or by array index?

ID and Name are 2 different things:

var a='f0';
var c=document.forms[0].elements[a];

is accessing the element by name

example

<input name="f0" value="value" />

accessing by id is doene this way

var a='f0';
var c=document.getElementById(a);

Difference between id and name attributes in HTML

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

Of course, there's more to it than that, but it will definitely get you thinking in the right direction.

Form elements with a name attribute that is the same as a form-property, shadow/override the native form-property. Is there a workaround?

I can't think of a way of doing it directly on the <form> element. The best I can think of is creating a clone of the element without any descendants and examining the clone's properties:

var clonedForm = f.cloneNode(false);
console.log(clonedForm.nodeName);

UPDATE

As pointed out in the comments, this has the same problem in that cloneNode can be overridden in the same way as nodeName. Since any property of the form can be overridden, this makes it a difficult problem to overcome.

What is best practice to force form elements onto their own line, p or div element?

Instead of <div> or <p> use <li>s in an <ol> or <ul> (if you need <div> or <p>, use <div> because it's more for interactivity than a paragraph)

was the name attribute really needed in html?

name, id, and class have fundamentally different purposes.

• name is for form element names and is not required to be unique (in fact, sometimes you need to reuse the same name).
• id is, as the name indicates, an identifier for an element and must be unique in the document as a whole.
• class is primarily for presentation (although it sometimes used for hooking up client-side UI as well) and contains a list of classes for the element, not just a single class. If you used class for form field identification, which of the possibly-several classes would you use?

Ways you might use the same name on more than one field:

1. You can use the same name in different forms without there being any conflict.

2. You use the same name within a form for radio buttons that should be grouped together.

3. You can use the same name within a form for multiple other kinds of elements whose values should all be sent to the server.

In contrast, id must be unique — not only within the form, but within the entire document.

#3 might need an example for clarity. Suppose you have:

<form action="example" method="get">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="submit" value="Send">
</form>

If the user fills in a, b, and c in those three text fields and sends the form, this is the query string:

?foo=a&foo=b&foo=c

Notice that foo was repeated. The receiving resource can access all three of those values. (Perhaps you're listing tags for a post, or all of your children's names, or...)

Best Practice for Naming the Id Attribute of Dom Elements

• Keep it semantic. Use complete, simple, (preferably English) words. Don't try to come up with something fancy or technical, and don't describe what it is - we know that. Describe what it does. Describing purpose adds informational value.

• Don't abbreviate anything! BW_RCB01_SW meant something to the team who did our CSS to years ago, but it doesn't mean anything to me now and I have to work backwards to try to translate what BW_RCB01_SW corresponds to for my purposes, and either remember that translation or document it somewhere. Better? blackwhite-boxtype1-bottomleft. It's longer but also doesn't require a Rosetta stone.

• Keep it all lower-case and use underscores or hyphens. I prefer hyphens, but that's totally a preference. There should be no impediment to using hyphens, since they are not reserved in CSS or HTML and IDs are treated as literal strings in every other language. Lower case is all experience - too many hours wasted wondering why the heck won't this style apply oh. pageContainerLeft is not the same as pageContainerleft.

• Identify exactly what that element is, but no more. Think seriously about each piece of information you're embedding in the name and whether it's necessary. In your example - do you need to know it's a checkbox by the ID? Unlikely. You already know what element you're referring to because it's a unique ID and you have to code against that element anyway.

---

Related Topics