Emely.Net Banner Exchange
Home, Forum diskusi, Chatting, Download

Bekerja dengan Form

Untuk membuat halaman yang interaktif dengan pengunjung, anda tentu saja membutuhkan Form untuk mendapatkan masukkan dari pengunjung. Biasanya hasil input tersebut akan diproses dengan suatu CGI Script atau mekanisme sejenisnya. Jika anda tidak/ terbiasa dengan form dan CGI script, anda harus membaca An Instantaneous Introduction to CGI Scripts and HTML Forms.

• Membuat suatu form
• Validasi form dengan penanganan event onSubmit()
• Mengatur focus
• Jika anda anggota GeoCities . . .

Membuat suatu form

Berikut ini suatu contoh form dengan tiga field, sebuat tombol submit dan sebuah tombol reset.

Masukkan nama anda : 
         Umur anda : 
     Tanggal lahir : 
 
					

Form diatas dibuat dengan menggunakan kode HTML berikut ini:

<FORM NAME="contoh" METHOD=POST
  ACTION="/cgi-bin/homestead/mail.pl?member_name">
    Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama" SIZE=30><BR>
             Umur anda : <INPUT TYPE=TEXT NAME="umur" SIZE=3><BR>
         Tanggal lahir : <INPUT TYPE=TEXT NAME="lahir" SIZE=10><BR>
    <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>
				

Kita dapat membuat acuan ke form diatas dengan objek  document.contoh, dimana contoh adalah nama form diatas. Untuk mendapatkan nilai pada field pertama kita menggunakan acuan:

objek document.contoh.nama

dan

document.contoh.umur

untuk field yang kedua. Untuk mendapatkan text yang mana dimasukkan kedalam field nama, dapat digunakan 

document.contoh.nama.value

Berikutnya akan kita pelajari bagaimana melakukan validasi terhadap data yang dimasukkan pada masing-masing field.

Validasi form

Untuk menambahkan validasi pada form anda, ada dua hal perlu dilakukan. Yang pertama adalah menulis suatu rutin JavaScript yang akan melakukan validasi (yang pada contoh ini, kita akan menamainya sebagai fungsi validasiForm()) dan kedua adalah melakukan modifikasi pada tag  <FORM> menjadi

<FORM NAME="contoh" METHOD=POST ACTION="..." onSubmit="return validasiForm()">  

Baris diatas memberitahukan browser untuk memanggil validateForm() ketika pemakai melakukan klik pada tombol submit di form tersebut. Kode berikut ini untuk validasiForm()

<SCRIPT LANGUAGE="JavaScript">
    <!-- Menyembunyikan kode dari browser non-js
    function validasiForm()
    {
        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>
				

Dan berikut ini adalah form yang telah ditambahi validasi.

Masukkan nama anda : 
         Umur anda : 
      Tanggal lahir: 
 
					

Jika salah satu field dikosongkan, suatu kotak peringatan akan muncul dan form tidak di submit. Form di submit jika rutin validasi mengembalikan suatu nilai true; jika dikembalikan nilai false, operasi submit dibatalkan.

Mengatur focus

Catatan: Contoh berikut ini tidak akan bekerja pada Microsoft Internet Explorer 3.x. Anda akan menemukan bahwa focus bukanlah properti yang dapat diset. Jika ada yang  tahu apa penyebab  masalah tersebut, tolong beritahukan pada saya.

Pada contoh sebelumnya, pesan yang diberikan tidak menjelaskan field mana yang menyebabkan masalah. Biasanya form lebih besar dan suatu pesan tidak cukup. Pada form berikut, tidak hanya pesan yang lebih informatif, tetapi juga kursor diletakkan pada tempat dimana pemakai dapat langsung mengetik. Sebagai contoh untuk memposisikan kursor pada field pertama (nama anda). Kita menggunakan fungsi JavaScript document.contoh.nama.focus(). Berikut ini fungsi hasil modifikasi.

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

Berikut ini form baru kita.

Masukkan nama anda :  
         Umur anda :   
     Tanggal lahir : 
 
					

Jika anda anggota  GeoCities

Anda mungkin memiliki  catatan bahwa <FORM> tag mengandung suatu field  ACTION  yang mana diset ke "/cgi-bin/homestead/mail.pl?member_name". Ini adalah suatu CGI Script yang disediakan oleh  GeoCities untuk digunakan anggotanya. Jika anda merupakan anggota  GeoCities, anda dapat menggunakan script ini untuk mendapatkan informasi yang dimasukkan pengunjung ke form. Hanya ganti  member_name ke nama anggota  GeoCities anda yang sebenarnya. Ketika seseorang masuk ke halaman anda dan mengisi pada form serta submit, anda akan mendapatkan suatu mail dengan informasi yang dimasukkan. Juga jangan lupa METHOD=POST pada bagian  <FORM> tag.