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, 2022 in HTML by Tejashwini
• 3,820 points
652 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 Aug 8, 2022 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, 2022 in HTML by Tejashwini
• 3,820 points
224 views
0 votes
0 answers

Difference between id and name attributes in HTML

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

Jun 3, 2022 in HTML by Tejashwini
• 3,820 points
234 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, 2022 in HTML by Ashwini
• 5,430 points
239 views
0 votes
0 answers

Is HTML "is" attribute?

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

Jun 3, 2022 in HTML by Tejashwini
• 3,820 points
280 views
0 votes
0 answers

Uncaught TypeError: Cannot read property 'top' of undefined

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

May 11, 2022 in Java-Script by Kichu
• 19,050 points
2,671 views
0 votes
0 answers

Expand form based on radio selection in jQuery & Bootstrap

I am trying to show a part ...READ MORE

Jul 22, 2022 in Web Development by gaurav
• 23,260 points
431 views
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, 2022 in HTML by Tejashwini
• 3,820 points
1,268 views
0 votes
0 answers

Chrome extension HTML Tree Generator is not working

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

Jul 27, 2022 in HTML by Tejashwini
• 3,820 points
906 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,880 points
4,244 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, 2022 in HTML by Deepak
• 980 points
358 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP