Metode dan properti form

Form dan elemen kontrol, contohnya seperti <input> memiliki banyak properti khusus dan event.

Bekerja dengan form akan lebih mudah ketika kita mempelajarinya.

Navigasi: form dan elemen

Form dokumen adalah anggota dari koleksi khusus document.forms.

Itu disebut “named collection”: itu keduanya memiliki nama(name) dan terurut(index). Kita bisa menggunakan keduanya baik dengan nama atau nomor(index) pada dokumen untuk mendapatkan form.

          document.forms.my; // the form with name="my"
document.forms[0]; // the first form in the document
        

Ketika kita mempunyai sebuah form, maka elemen apapun tersedia di dalam named collection/koleksi nama form.elements.

Misalnya:

<form name="my">
  <input name="one" value="1" />
  <input name="two" value="2" />
</form>

<script>
  // dapatkan form
  let form = document.forms.my; // <form name="my"> elemen

  // dapatkan element
  let elem = form.elements.one; // <input name="one"> elemen

  alert(elem.value); // 1
</script>

Ada suatu saat dimana ada beberapa elemen dengan nama yang sama, hal itu sering terjadi dengan radio buttons.

Dalam hal tersebut form.elements[name]adalah sebuah collection/koleksi, misalnya:

<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

<script>
let form = document.forms[0];

let ageElems = form.elements.age;

alert(ageElems[0]); // [object HTMLInputElement]
</script>

Navigasi properti ini tidak bergantung pada struktur tag. Semua elemen kontrol, tak peduli seberapa dalam mereka didalam form, mereka tersedia di dalam form.elements.

Sebuah form mungkin punya satu atau banyak elemen <fieldset> didalamnya. Mereka juga punya elements properti yang mencatumkan form kontrol didalamnya.

Misalnya:

<body>
  <form id="form">
    <fieldset name="userFields">
      <legend>info</legend>
      <input name="login" type="text">
    </fieldset>
  </form>

  <script>
    alert(form.elements.login); // <input name="login">

    let fieldset = form.elements.userFields;
    alert(fieldset); // HTMLFieldSetElement

     // kita bisa mendapatkan input dengan nama baik dari form maupun dari fieldset
    alert(fieldset.elements.login == form.elements.login); // true
  </script>
</body>

Dengan kata lain, daripada menulisnya dengan form.elements.login kita bisa menulis form.login.

Itu juga berkeja, tetapi disana ada sebuah kesalahan kecil: jika kita akses sebuah elemen, dan lalu mengubah name, maka elemen tersebut masih tersedia dengan nama lamanya (sama juga dengan nama barunya).

Itu akan lebih mudah saat kita lihat pada sebuah contoh: