Objek Form

HTML tag <FORM></FORM> adalah fasilitas input data oleh pemakai, dan output data variabel kepada pemakai. Input oleh pemakai memiliki efek pemilihan pada sisi klien yang dapat dikirm ke server. Pada sisi lain, data variabel seperti  marquees dapat ditampilkan pada form. Pada sisi input, event handle adalah fasilitas untuk membangkitkan rutin JavaScript untuk melakukan aktifitas pada proses edit data seperti validasi. Pada sisi output, JavaScript memegang peranan penting dalam mengatur bagaimana data ditampilkan.

penanganan events

Event adalah hasil dari aksi pemakai, seperti klik pada suatu tombol mouse, checking pada suatu kotak, dan pengiriman form. Penanganan Event didefinsikan dalam tag HTML sepanjang JavaScript berkaitan dengan event tersebut. Berikut ini adalah contoh yang merupakan kode dari suatu penanganan event.

<INPUT TYPE="button" VALUE="Submit" onClick="validate(this.form)">

Pada contoh sebelumnya, kata kunci this mengacu pada objek tersebut, yang mana adalah objek button. Dengan menyebutkan this.form, adalah acuan  ke objek form yang mengandung button tersebut.  Ketika contoh sebelumnnya menjalankan suatu fungsi, perintah JavaScript juga sah. Kalau lebih dari satu perintah, tiap perintah harus dipisahkan dengan suatu titik koma.

Berikut ini adalah daftar dari penanganan event yang didukung oleh JavaSCript:

• onBlur.JavaScript menjalankan penanganan event ini ketika pemakai meninggalkan field yang menyebabkan kehilangan fokus.
• onChange. dijalankan ketika user meninggalkan field dan terjadi perubahan nilai object tersebut.
• onClick. event onClick terjadi ketika pemakai klik pada window atau link..
• onFocus. event ini terjadi ketika suatu form mendapatkan fokus.
• onLoad. event ini terjadi ketika browser selesai memuat suatu dokumen atau semua frame didalam tag <FRAMESET>.
• onMouseOver. event ini terjadi ketika mouse bergerak melewati object dari luar object tersebut. Rutin JavaScript harus mengembalikan true untuk  status dan properti defaultStatus yang ditentukan..
• onSelect. event ini terjadi ketika pemakai melakukan select text pada text area..
• onSubmit. terjadi ketika user submit suatu form. Jika JavaScript mengembalikan false, form tersebut tidak akan di submit, nilai lainnya atau tidak ada nilai balik, membuat form di submit.
• onUnload. event ini terjadi ketika dokument di exit.

Penanganan Event adalah bagian dari berbagai object. Beberapa object mendukung lebih dari satu penanganan event, dan beberapa penanganan event terjadi pada banyak objek. Tabel.8 menunjukkan hubungan antara penanganan event dan objek-objek.

Table 8. Hubungan antara  penanganan event dan objek.

Contoh:

<SCRIPT LANGUAGE="JavaScript">
    <!-- menyembunyikan kode dari browser non-js
    function periksa()
    {
        formObj = document.contoh;
        if ((formObj.nama.value == "") ||
            (formObj.umur.value  == "") ||
            (formObj.lahir.value  == "")) 
        {
            alert("Anda tidak mengisi seluruh field.");
            return false;
        }
        else
            return true;
    }
    // akhir dari penyembunyian -->
</SCRIPT>

<FORM NAME="contoh" METODE=GET ACTION="" onSubmit="return periksa()">
<PRE>
Nama Anda : <INPUT TYPE=TEXT NAME="nama" SIZE=30 MAXLENGTH=30>
     Umur : <INPUT TYPE=TEXT NAME="umur" SIZE=3 MAXLENGTH=3>
Tgl. Lahir: <INPUT TYPE=TEXT NAME="lahir" SIZE=10 MAXLENGTH=10>
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</PRE>
</FORM>

Hasil:

Nama Anda : 
     Umur : 
Tgl. Lahir: 
 

FORM>. Untuk JavaScript, hal tersebut adalah suatu read-only array yang membentuk properti berikut :

• action. property ini mengandung nilai dari atribut ACTION.
• element. ini adalah suatu array dari elemen object yang didefinsikan untuk form.
• encoding. property ini mengandung nilai dair atribut ENCTYPE.
• length. property ini mengandung jumlah dari isian didalam element array.
• metode. property ini mengandung nilai dari atribut METODE.
• target. property ini mengandung nilai dari atribut TARGET .

Berikut ini adalah arti yang sah dari pengalamatan bentuk object ::

formName.propertyName

formName.metodeName(parameters)

forms[index].propertyName

forms[index].metodeName(parameters)

Metode Objek Form  

Object form hanya memiliki satu metode-submit. Metode submit melakukan aksi yang sama seperti tombol submit pada HTML form dan memiliki tata cara penulisan sebagai berikut:

document.formName.submit()

Objek element

Objek elemen berpengaruh pada isi elemen dalam tag <FORM></FORM>. Tabel 9 menperlihatkan elemen objek dan properti-nya.

Tabeel 9. Properti dari objek element.

Properti adalah mengunakan pengalamatan seperti document.elementName.property, atau  document.formName. elements[index].propertyName, dimana elementName adalah nilai dari nama property untuk objek elemen.

Metode element

Metode element melakukan emulasi dari sepupu mereka, yaitu penanganan event:

• blur(). Metode ini memindahkan fokus dari object yang ditentukan, tetap tidak membuat fokus pada objek lain.
• click(). Metode ini melakukan suatu simulasi klik mouse pada suatu objek yang ditentukan. Ketika mengacu pada element radio, bentuknya adalah document.radioName[index].click().
• focus(). Metode ini memberikan fokus pada objek tertentu.
• select(). Metode ini men-select seluruh text area.

Kecuali objek radio, metode dialamatkan sebagai document.elementName.metodename(). Tabel 10 mendaftarkan element objek-objek dan metode yang bersesuaian

Table 10. Metode-metode dari elemen objek-objek.

Contoh :

<form>

F: 
<input type="text" name="F" value="32" 
onChange="C.value = 100/(212-32) * (this.value - 32 )"><br>
C: 
<input type="text" name="C" value="0" 
onChange="F.value = (212-32)/100 * this.value + 32 "><br>

</form>

Hasil :

F:
C: