JavaScript

Forms and Controls

Forms <form> and controls: <input>, <select>, etc

Form properties and methods

Navigate forms

Navigate elements

Document forms are members of the special collection document.forms.

Named collection: it's both named and ordered. We can use both name or number in the document to get the form.

<form name="zoo">
    <input name="cat" value="Kitten">
    <input name="dog" value="Doggie">
</form>
<p>catElem.value = <span id="result1"></span></p>
<p>dogElem.value = <span id="result2"></span></p>

<script>
    let zooForm = document.forms.zoo;
    let catElem = zooForm.elements.cat;
    let dogElem = zooForm.elements.dog;
    document.querySelector("#result1").textContent = catElem.value;
    document.querySelector("#result2").textContent = dogElem.value;
</script>

Navigate a collection of elements with the same name

It's possible to have multiple elements with one same name. This is typical for radio buttons and checkboxes. In this case, formName.elements.elementName is a collection and can be referred individually using their index (the order of the element being listed).

Explanations:

• The form
  • Form name: "student"
  • Form order in the document: 2
  • Addresing the form:
    • document.forms.student
    • document.forms[1]
• The element collections
  • Elements name: "age", type: "radio"
    • 3 element members: value "7", "8", and "9"
    • Addressing the first element (value "7"):
      • studentForm.elements.age[0].value
      • studentForm.elements[0].value
  • Elements name: "sex", type: "radio"
    • 3 element members: value "f" and "m"
    • Addressing the first element (value "F"):
      • studentForm.elements.sex[0].value
      • studentForm.elements[3].value
      • document.forms[1].elements[3].value

Form learning put in halt, moving on to object.

Main resources:

• Javascript.info: Form and Control Elements