Best Practice Access form elements by HTML id or name attribute

0 votes

There are many (too many) different ways to do the same task, as any seasoned JavaScript developer is aware. Consider the following text field as an illustration:

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

In JavaScript, there are several ways to access this:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

Methods [1] and [3] are well documented in the Mozilla Gecko documentation, but neither are ideal. [1] is just too general to be useful and [3] requires both an id and a name (assuming you will be posting the data to a server side language). Ideally, it would be best to have only an id attribute or a name attribute (having both is somewhat redundant, especially if the id isn't necessary for any css, and increases the likelihood of typos, etc).

[2] seems to be the most intuitive and it seems to be widely used, but I haven't seen it referenced in the Gecko documentation and I'm worried about both forwards compatibility and cross browser compatiblity (and of course I want to be as standards compliant as possible).

So what's best practice here? Can anyone point to something in the DOM documentation or W3C specification that could resolve this?

Note I am specifically interested in a non-library solution (jQuery/Prototype).

Aug 5 in HTML by Tejashwini
• 1,660 points
15 views

1 answer to this question.

0 votes
It is a good idea to use the form object itself to retrieve named components contained in a form.

Use getElementById and the element's id to retrieve any element in the DOM tree that you might occasionally find within a form.
answered 6 days ago by Vikas

Related Questions In HTML

0 votes
0 answers

Should I make HTML Anchors with 'name' or 'id'?

What should one use when using the ...READ MORE

Jul 27 in HTML by Tejashwini
• 1,660 points
6 views
0 votes
0 answers

Difference between id and name attributes in HTML

The "id" and "name" attributes serve the ...READ MORE

Jun 3 in HTML by Tejashwini
• 1,660 points
27 views
0 votes
0 answers

What are valid values for the id attribute in HTML?

What guidelines apply to the value of ...READ MORE

Jul 21 in HTML by Ashwini
• 1,160 points
9 views
0 votes
0 answers

Is HTML "is" attribute?

What is "is" in HTML, I have ...READ MORE

Jun 3 in HTML by Tejashwini
• 1,660 points
52 views
0 votes
0 answers

Uncaught TypeError: Cannot read property 'top' of undefined

I have two different kinds of sticky ...READ MORE

May 11 in Java-Script by Kichu
• 19,040 points
319 views
0 votes
0 answers
0 votes
0 answers

How to do calculations in HTML forms using JavaScript?

I'm developing a straightforward app that multiplies ...READ MORE

Jul 26 in HTML by Tejashwini
• 1,660 points
14 views
0 votes
0 answers

Chrome extension HTML Tree Generator is not working

I installed HTML Tree Generator to observe ...READ MORE

Jul 27 in HTML by Tejashwini
• 1,660 points
23 views
+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,740 points
3,069 views
0 votes
1 answer

How to add/update an attribute to an HTML element using JavaScript?

You can read here about the behaviour of attributes ...READ MORE

answered Aug 4 in HTML by Deepak
• 760 points
10 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP