Salah satu hal yang dapat dilakukan dengan Javascript adalah mengambil data dari form HTML dan menampilkannya kembali pada halaman web. Berikut adalah cara-cara yang dapat dilakukan untuk menampilkan data. Dimulai dari yang paling awal yaitu bentuk HTML
Buat formulir
Formulir ini digunakan sebagai sarana untuk menuliskan data-data yang diperlukan. Formulir dapat dibuat menggunakan elemen "input". Berikut adalah contoh penulisannya
Elemen input diberi atribut id agar dapat diakses dengan Javascript. Atribut id juga berfungsi untuk membedakan elemen masukan satu dengan lainnya
Misalnya pada contoh penulisan di atas, elemen pertama diberi id dengan nama “nama”, dan elemen kedua diberi nama “umur”. Elemen pertama dicadangkan sebagai tempat menuliskan nama, dan elemen kedua dicadangkan untuk usia
Atribut tipe juga penting dalam menulis elemen input. Hal ini untuk menentukan jenis input data. Misal pada input “nama”, tipe datanya harus text. Untuk input "usia", tipe datanya bisa berupa teks atau angka mengingat keduanya masih bisa menghasilkan angka untuk usia
Buat Tombol
Setelah input dibuat, selanjutnya adalah membuat tombol untuk memicu javascript untuk membaca data pada formulir HTML sekaligus untuk menampilkan kembali data tersebut.
Tombol dapat dibuat dengan elemen tombol atau elemen div biasa yang dilengkapi dengan atribut title. Atribut title digunakan untuk menjalankan fungsi tertentu saat tombol diklik
Berikut adalah contoh penulisan yang menggunakan elemen tombol
MENGIRIMElemen untuk ditampilkan
Bagian terakhir dari HTML adalah tempat data yang diperoleh kemudian ditampilkan. Tempat ini bisa dibuat menggunakan elemen apa saja. Pada contoh penulisan berikut, kita menggunakan elemen div
Agar elemen dapat diakses dengan javascript, atribut id dengan nama "tampilan" digunakan
Membuat Javascript Mengenali Elemen HTML
Setelah semua elemen tersedia di HTML, selanjutnya adalah membuat javascript dapat mengenali semua elemen di HTML. Elemen yang harus dikenali Javascript adalah elemen input dan elemen untuk ditampilkan
Untuk membaca data pada elemen HTML, pemilih "id" digunakan seperti pada contoh berikut
Dengan baris program di atas, Javascript telah mengenali input dan tampilan
Buat Fungsi untuk Ditampilkan
Fungsi ini bekerja ketika tombol yang digunakan untuk mengirim data ditekan
Berikut penulisan penulisan fungsi
Saat tombol ditekan, fungsi send() dijalankan. Fungsi ini mengumpulkan data dari elemen dengan id "nama" dan id "umur" dan kemudian menampilkannya pada elemen dengan id "tampilan". Data dari kedua elemen tersebut kemudian ditampilkan dipisahkan dengan koma ","
Cara Membuat Form Login Sederhana dengan JavaScript
Cara Membuat Form Login Sederhana Dengan JavaScript - Pada postingan kali ini saya akan kembali membahas hal-hal yang berhubungan dengan pemrograman web yaitu membuat form login pada halaman web
Di jejaring sosial seperti facebook, twitter, kaskus dll. Seringkali kita menemukan form login dimana biasanya anda disuruh memasukkan username atau email lalu password anda. Hal ini dilakukan untuk melindungi akun Anda dari pihak yang bertanggung jawab yang dapat menyalahgunakan akun Anda
Nah disini saya akan mencoba membuat form login sederhana dengan menggunakan javascript dimana terdapat 2 input yaitu username dan password
Algoritma pembuatan form login sendiri bisa dikatakan sederhana yaitu jika username dan password yang dimasukkan benar maka akan muncul pesan “Selamat anda berhasil login. " dan sebaliknya
Kode Sumber Program
<html> <script language="JavaScript"> function Login(){ var user = document.getElementById("username).value; var pass = document.getElementById("password).value; if (user=="admin" && passw=="123"){ alert("Selamat anda berhasil login"); }else{ alert("Username dan password anda salah!"); } } </script> <body> <form> <table width="225" cellpadding="4"> <tr> <td>Username</td> <td><input type="text" id="username"></td> </tr> <tr> <td>Password</td> <td><input type="text" id="password"></td> </tr> <tr> <td colspan="2" align="right"><input type="button" value="Login" onClick="Login()"></td> </tr> </table> </form> </body> </html>Penjelasan Kode Program
- dokumen. getElemetById("nama pengguna"). nilai . digunakan untuk mengambil nilai atau konten dari input dengan id="username"
- dokumen. getElementById("kata sandi"). nilai . digunakan untuk mengambil nilai konten tau dari input dengan id="password"
- if (user=="juned" && pass="123") . Percabangan dengan menggunakan operator && (artinya kedua syarat tersebut harus terpenuhi, yaitu user harus memiliki nilai " juned " dan pass harus " 123 " maka kondisi akan BENAR) jika nilainya BENAR maka akan muncul pesan “Selamat Anda berhasil login”.
- selain itu . bila kondisi FALSE maka yang akan dijalankan adalah proses pada tag else yang menampilkan pesan “Username dan password salah. "
Demo formulir masuk
Untuk melihat demonya secara langsung anda bisa melalui link dibawah ini
Tampilkan Demo
Catatan
Kode sumber program di atas tidak menyertakan kode CSS. Sehingga tampilan screen shot akan berbeda dengan tampilan di demo
Layar Cetak Keluaran Program
Semoga postingan ini bermanfaat, dan jika ada yang ingin ditanyakan mengenai source code diatas, silahkan tinggalkan komentar anda