Implications when an input has the same name as another input's ID

The following script surprised me. It produces the following results:

InternetExplore

aaa: undefined bbb: undefined ccc: value3 ddd: value4 eee: value5

FireFox and Chrome

aaa: bbb: ccc: value3 ddd: value4 eee: value5

Why when one input has the same ID as another input's name (or by reverse), the input doesn't have a value?

function testResults(form) {
  alert([
    "aaa: " + form.aaa.value,
    "bbb: " + form.bbb.value,
    "ccc: " + form.ccc.value,
    "ddd: " + form.ddd.value,
    "eee: " + form.eee.value
  ].join(',    '));
}

<form>
  <input type="text" name="aaa" id="bbb" value="value1" />
  <input type="text" name="bbb" id="aaa" value="value2" />
  <input type="text" name="ccc" id="ccc" value="value3" />
  <input type="text" name="ddd" value="value4" />
  <input type="text" id="eee" value="value5" />
  <input type="submit" onclick="testResults(this.form)"/>
</form>