Interaksi dengan objek HTML ~ Bloglieken

Objek Form

Format tag <FORM>	Objek form pada javaScript
<form name="namaForm" action="URL" method="POST\|GET" enctype="tipeMime" target="frameAtauHalaman" onSubmit="penangananKejadian" onReset="penangananKejadian" elementFormulir1 ......... elementFormulirN </form>	name action method encoding target onSubmit onReset elements[] length

Keterangan :

- Atribut NAME menyatakan untuk nama formulir. Pada JavaScript atribut ini dinyatakan dengan properti name.

- Atribut ACTION menentukan URL yang akan diproses oleh formulir ketika tombol Submit diklik. Pada JavaScript, atribut ini dinyatakan dengan properti action.

- Atribut METHOD menentukan metode yang digunakan untuk mengirimkan formulir. Metode yang biasa digunakan berupa GET atau POST. Pada JavaScript, atribut ini dinyatakan dengan properti method.

- Atribut ENCTYPE menentukan jenis data pada URL. Misalnya, berisi “text/ascii”. Pada JavaScript, atribut ini dinyatakan dengan properti encoding

- Atribut TARGET menentukan hasil formulir akan ditempatkan pada frame atau halaman.

- onSubmit adalah penanganan kejadian jika tombol Submit diklik.

- onReset adalah penanganan kejadian jika tombol Reset diklik.

document.formTes.name

document.formTes.action

document.formTes.method

----------------------

document.forms[0].action

document.forms[0].name

Contoh pemakaian Javascript untuk mengakses nilai atribut-atribut pada tag <FORM>

Objek Button

Format tag <INPUT> untuk BUTTON	Objek button pada JavaScript
<input type="button" name="namaTombol" value="judulTombol" onClick="penangananKejadian">	type name value onClick

Penjelasan :

- Atribut NAME menyatakan untuk nama tombol, pada JavaScript, atribut ini dinyatakan dengan properti name.

- Atribut VALUE menyatakan untuk judul pada tombol. Pada JavaScript, atribut ini dinyatakan dengan properti value.

- onClick adalah penanganan kejadian ketika tombol ini diklik.

document.formTes.tombolSimpan.value

Contoh penggunaan JavaScript untuk mengakses objek button.

Penanganan tombol Reset dan Submit serupa dengan TYPE=”BUTTON”.

Objek Text

Format tag <INPUT> untuk TEXT	Objek text pada JavaScript
<input type="text" name="namaField" value="isiField" size="ukuranKolom" maxlength="panjangMaksimalKolom" onBlur="penangananKejadian" onFocus="penangananKejadian" onSelect="penangananKejadian" onChange="penangananKejadian">	type name value defaultValue onBlur onFocus onSelect onChange Metode: blur() focus() select()

Penjelasan berbagai properti pada JavaScript yang terkait dengan field teks dapat dilihat pada tabel – tabel dibawah ini :

Tabel T001. Properti untuk field teks.

Properti	Keterangan
type	Menyatakan nilai atribut TYPE
name	Menyatakan nama field teks
defaultValue	Menyatakan nilai awal field teks
Value	Menyatakan isi field teks

Tabel T002. Penanganan kejadian pada field teks

Properti	Keterangan
onBlur	Penanganan kejadian saat field teks ini tidak disorot lagi
onChange	Penanganan kejadian saat isi field teks ini berubah
onFocus	Penanganan kejadian saat field teks ini menjadi fokus
onSelect	Penanganan kejadian saat isi field teks ini dipilih(diblok)

Tabel T003. Metode untuk field teks

Properti	Keterangan
Focus()	Identik kalau field teks ini diklik
Blur()	Identik kalau field teks ini ditinggalkan
Select()	Identik dengan memblok teks pada field teks ini

document.formTes.elements[0].focus();

Contoh penggunaan javaScript untuk objek text.

Objek Checkbox

Format tag <INPUT> untuk CHECKBOX	Objek checkbox pada JavaScript
<input type="checkbox" name="namaKotakCek" value="nilai kalau dicentang" checked OnClick="penangananKejadian">	type name value defaultChecked checked onClick

Perlu diketahui :

- Atribut CHECKED digunakan untuk memberi keadaan awal agar kota cek dalam keadaan dicentang. Pada JavaScript, atribut ini identik dengan properti defaultChecked.

- Properti checked berguna untuk mengetahui keadaan kota cek. Nilainya true kalu kotak cek dalam keadaan tercentang dan false untuk keadaan sebaliknya.

- onClick menyatakan penanganan kejadian saat kotak cek diklik.

document.formTest.elements[0].checked

Contoh penggunaan javaScript untuk objek checked.

Objek radio

Format tag <INPUT> untuk RADIO	Objek radio pada javaScript
<input type="radio" name="namaTombolRadio" value="nilai" checked onClick="penangananKejadian">	type name value defaultChecked checked onClick

Perlu diketahui :

- Atribut CHECKED digunakan untuk memberi keadaan awal agar suatu tombol radio dalam keadaan dipilih. Pada JavaScript, atribut ini identik dengan properti defaultChecked.

- Properti checked berguna untuk mengetahui keadaan kotak cek. Nilainya true kalau kotak cek dalam keadaan tercentang dan false untuk keadaan sebaliknya.

- Atribut VALUE identik dengan properti value yang menyatakan nilai tombol radio kalau tombol radio ini dipilih.

- onClick menyatakan penanganan kejadian saat kotak cek diklik.

document.formTest.elements[0].checked

document.formTest.elements[0].value

Contoh penggunaan javaScript untuk objek radio.

Objek Password

Sebagaimana telah diketahui jika anda menggunakan TYPE yang diisi dengan “PASSWORD” maka segala karakter yang diketik oleh pemakai akan ditampilkan menjadi *. Objek seperti ini juga dapat diakses oleh JavaScript seperti halnya element formulir yang lain. Properti yang paling umum digunakan adalah value.

document.formTes.password_1.value

Contoh penggunaan javaScript untuk objek password.

Objek Hidden
Element hidden pada formulir biasa digunakan untuk melewatkan nilai dari satu halaman ke halaman lain. Berbeda dengan element password, elemen hidden tidak terlihat pada layar. Properti terpenting pada elemen ini yang biasa diakses melalui JavaScript adalah value.
document.formTes.okehidden.value	Contoh penggunaan javaScript untuk objek hidden.

Objek Textarea

Format tag <TEXTAREA>	Objek text pada javaScript
<textarea name="namaAreaText" rows=integer cols=integer wrap=ON\|OFF onBlur="penangananKejadian" onFocus="penangananKejadian" onSelect="penangananKejadian" onchange="penangananKejadian"> teks bawaan </textarea>	type name value defaultValue onBlur onFocus onSelect onchange Metode: blur() focus() select()

Penanganan kejadian dan metode pada objek textarea via JavaScript pada dasarnya sama dengan pada objek button.

document.form1.sumber.value

Contoh penggunaan javaScript untuk objek textarea.

Objek Select

Format tag <SELECT>	Objek select pada javaScript
<select name="namaPilihan" size=integer multiple onBlur="penangananKejadian" onFocus="penangananKejadian" onSelect="penangananKejadian" onChange="penangananKejadian"> <option value="nilai" [SELECTED]>Label ...... <option value="nilai">label </select>	name length type selectedIndex onBlur onFocus onSelect onChange option[i] option[i].default option[i].selected option[i].text option[i].value Metode: blur() focus() select()

Penjelasan :

- Properti name dapat digunakan untuk mengakses atribut NAME.

- Properti type dapat diisi dengan select-one (pilihan hanya satu) atau select-multiple (pilihan bisa lebih dari satu). Nilai select-multiple identik kalau anda menyertakan MULTIPLE dalam tag <SELECT>.

- Properti selectedIndex menyatakan indeks untuk pilihan yang sedang dipilih (khusus untuk pilihan tunggal).

- Array option menyimpan informasi untuk setiap tag <OPTION>. Array ini memiliki properti berupa default, selected, text, dan value.

- Properti defaultSelected berisi true jika tag <OPTION> berisi atribut SELECTED.

- Properti selected berisi true jika pemakai meilih pilihan ini.

- Properti value berisi null kalau atribut VALUE tidak digunakan.

- Properti text berisi label pilihan.

- Penanganan kejadian seperti onBlur dan metode seperti blur() sama seperti objek button.

var indeks = document.forms[0].selectMusik.selectedIndex;

Contoh penggunaan javaScript untuk objek select.

Upload berkas

var info = document.formTes.upload.value;

Contoh penggunaan javaScript untuk upload berkas.