Home, Forum diskusi, Chatting, Download


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.

TIP

Praktek pemrograman yang baik adalah menggunakan fungsi karena mereka membuat kode lebih mudah dibaca dan dapat digunakan kembali.

NOTE

Sampai suatu dokumen HTML selesai di muat ke window yang mengandung  tag <BODY></BODY>, suatu window tidak mengandung penanganan event.

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

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.

Objek Penanganan Event
button onClick
checkbox onClick
form onSubmit
link onClick, onMouseOver
radio onClick
reset onClick
select onBlur, onChange, onFocus
submit onClick
text onBlur, onChange, onFocus, onSelect
textarea onBlur, onChange, onFocus, onSelect
window onLoad, onUnload

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 :

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.

Element object Properti
button name, value
checkbox name, value, checked, defaultChecked
hidden name, value
password name, value, defaultValue
radio name, value, checked, defaultChecked, length
reset name, value
select name, length, options array, selectedIndex
submit name, value
text name, value, defaultValue
textarea name, value, defaultValue

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:

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.

Elemen objek Metode
button click
checkbox click
hidden (tidak ada metode)
password blur, focus, select
radio click
reset click
select blur, focus
submit click
text blur, focus, select
textarea blur, focus, select

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:

Dibuat  oleh hendra@indoprog.com
Medan - Sumatera Utara
Indonesia

1