title: Best Practice: Access form elements by HTML id or name attribute?
body: <p>As any seasoned JavaScript developer knows, there are many (too many) ways to do the same thing.  For example, say you have a text field as follows:</p>
  
  <pre><code>&lt;form name="myForm"&gt;  
      &lt;input type="text" name="foo" id="foo" /&gt;
  </code></pre>
  
  <p>There are many way to access this in JavaScript:</p>
  
  <pre><code>[1]  document.forms[0].elements[0];
  [2]  document.myForm.foo;
  [3]  document.getElementById('foo');
  [4]  document.getElementById('myForm').foo;
       ... and so on ...
  </code></pre>
  
  <p>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 <em>somewhat</em> redundant, especially if the id isn't necessary for any css, and increases the likelihood of typos, etc).</p>
  
  <p>[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).</p>
  
  <p>So what's best practice here?  Can anyone point to something in the DOM documentation or W3C specification that could resolve this?</p>
  
  <p>Note I am specifically interested in a non-library solution (jQuery/Prototype).</p>