Form dan validasi dengan javascript

Posted on June 15, 2010. Filed under: Desain Web 1 ( Semester 2) |

Form
  • Digunakan untuk mengumpulkan data dari user
Elemen-elemen Form
  • Textfield
            Berupa kolom isian satu baris yang digunakan untuk memasukkan data.
  • Password Field
            Prinsip kerjanya sama dengan textfield, hanya saja karakter yang diinput akan diubah menjadi ******
  • Textarea
            Berupa kolom isian yang bisa diisi lebih dari 1 baris.
  • Checkbox
            Kotak pilihan yang bisa diberi tanda “cek” dan bisa dipilih lebih dari 1.
  • Radio Button
            Lingkaran pilihan yang hanya bisa dipilih 1 dari beberapa pilihan yang ada.
  • List / Menu
            Digunakan untuk membuat daftar pilihan menu yang bisa dipilih oleh user.
  • File Field
            Digunakan untuk memilih file pada saat proses upload.
  • Button

            1. Submit Button
                Digunakan untuk mengirimkan data yang diinputkan
            2. Reset Button
                Digunakan untuk mengembalikan isian form seperti semula          
         (kosong)
Pada beberapa kasus, kolom isian yang ada pada form harus diisi atau tidak boleh kosong.
Validasi Form
  1. Buatlah sebuah form dengan 2 texfield dan 1 tombol submit
  1. Bukalah Window->Behaviors, kemudian klik icon ‘+’ pada window behaviors tersebut dan pilih Validate Form
  1. Pada pop-up window yang muncul pilihlah field mana yang diinginkan untuk divalidasi, kemudian klik OK
Validasi Form dengan JavaScript
JavaScript merupakan scripting language untuk membuat web menjadi interaktif dan dinamik.
  1. Buatlah sebuah form dengan 2 texfield dan 1 tombol submit
  1. Ketikkan program di bawah ini diantara ..

<!–

function cek(){

   if(document.form1.textfield.value==””){

     alert(“nim belum terisi\ncek kembali”); 

      return false;

    }

   if(document.form1.textfield2.value==””){

     alert(“nama belum terisi\ncek kembali”); 

      return false;

    }

   }

//–>

  1. Klik icon ‘+’ pada Window Behaviors dan pilih Call JavaScript
  2. Masukkan nama fungsi JavaScript yang digunakan
  1. Pastikan default event yang diinginkan, kemudian cek validasi dengan menjalankan file di browser

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • Blog Stats

    • 53,773 hits
  • Top Rated

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: