Belajar dari Pengalaman
MODUL 7
JavaScript (Validasi Form)
I. TUJUAN PRAKTIKUM
Peserta Praktikum dapat memahami dan mengimplementasikan JavaScript untuk
validasi form
II. TUGAS PENDAHULUAN
1. Apakah yang Anda ketahui tentang Form Validasi?
2. Sebutkan perbedaan utama method Post dan Get dalam Form?
III. LANDASAN TEORI
Form mempunyai fungsi menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server.
Standar penulisan : . . .
|Atribut |Fungsi |
|Method |Metode pengiriman data ke file tujuan (POST atau GET) |
|Action |Aksi yang akan dilakukan jika user menekan tombol Submit |
|Name |Memerikan nama tiap masukan |
|Value |Memberikan nilai suatu masukan |
|Type |Tipe form yang akan digunakan |
Untuk memperbolehkan inputan dari user, form bisa diletakkan control-control input. Semua control biasanya di letakkan di antara tag , tapi juga bisa meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag .
Berikut macam-macam component input:
1. Textbox
Untuk membuat sigle line text control. Attribute size digunakan untuk menentukan jumlah character yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan maximum character yang bisa di masukkan.
2. Submit dan Reset
Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server.
Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form
3. Checkbox digunakan Untuk memberi beberapa pilihan kepada user
4. Radio button
Radio button digunakan untuk memberi (hanya) satu pilihan kepada user. Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value.
5. Text Area
Text area digunakan sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar
6. Daftar Drop Down
Drop down digunakan untuk memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja)
IV. PRAKTIKUM
1. Membuat Validasi form
Langkah-langkah untuk memvalidasi form antara lain :
• Buat tampilan berikut :
[pic]
• Masukkan kode program dibawah html :
Kemudian masukkan kode berikut pada bagian :
Nama
Alamat
• Ketika tombol Kirim ditekan tanpa mengisi nama atau alamat, maka akan muncul tampilan berikut:
[pic]
Jika semua form sudah terisi, maka akan muncul tampilan berikut:
[pic]
2. Mengecek Password
Langkah-langkah untuk mengecek password antara berikut :
• Buat tampilan berikut :
[pic]
• Masukkan kode program berikut :
Kemudian pada bagian Form, masukkan kode berikut :
Password
Confirm Password
• Jika kedua password yang dimasukkan tidak sama, maka akan muncul tampilan berikut:
[pic]
V. KESIMPULAN
• Form mempunyai fungsi menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server.
• Kontrol input digunakan untuk menerima inputan dari user, seperti : Text Box, radio button, text area, dll.
VI. TUGAS PRAKTIKUM
1. Buat tampilan berikut untuk validasi form:
[pic]
Semua kolom harus diisi dengan Ketentuan sebagai berikut :
• Nama harus berupa huruf
[pic]
• Alamat hanya berisi huruf dan angka
[pic]
• Kode pos harus berupa angka
[pic]
• Jns kelamin harus dipilih
[pic]
• Username harus diisikan antara 6 sampai 8 karakter (gabungan huruf maupun angka)
[pic]
• Password minimal 8 karakter (boleh gabungan huruf dan angka)
• Email harus dgn format yg benar (ada @, contoh : zheira83@)
[pic]
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- java script interview questions and answers
- exercise 8 1 x accumulate test score data using an array
- belajar dari pengalaman
- what s new in web forms in 4 5
- valdosta state university
- innerhtml university of delaware
- department of veterans affairs vistaweb technical guide
- question no 1 marks 1 please choose one
- temple university
- title from properties dialog github