Navigation: form and elements**

Shorter notation: form.name
There’s a shorter notation: we can access the element as form[index/name].
In other words, instead of form.elements.login we can write form.login.
That also works, but there’s a minor issue: if we access an element, and then change its name, then it is still available under the old name (as well as under the new one).
That’s easy to see in an example:

  1. <form id="form">
  2. <input name="login">
  3. </form>
  4. <script>
  5. alert(form.elements.login == form.login); // true, the same <input>
  6. form.login.name = "username"; // change the name of the input
  7. // form.elements updated the name:
  8. alert(form.elements.login); // undefined
  9. alert(form.elements.username); // input
  10. // form allows both names: the new one and the old one
  11. alert(form.username == form.login); // true
  12. </script>

Backreference: element.form

For any element, the form is available as element.form. So a form references all elements, and elements reference the form.
Here’s the picture:
image.png