Cara menggunakan contoh formulir javascript

Question

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

Table of Contents Show

Buat formulir
Buat Tombol
Elemen untuk ditampilkan
Membuat Javascript Mengenali Elemen HTML
Buat Fungsi untuk Ditampilkan
Kode Sumber Program
Penjelasan Kode Program
Demo formulir masuk
Layar Cetak Keluaran Program
Apa yang dimaksud dengan formulir validasi?
Apa itu validasi masukan?

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 onclick. Atribut onclick digunakan untuk menjalankan fungsi tertentu saat tombol diklik

Berikut adalah contoh penulisan yang menggunakan elemen tombol

MENGIRIM

Elemen 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

Apa yang dimaksud dengan formulir validasi?

Validasi form adalah proses validasi input data input dari form . Proses validasi ini biasanya dilakukan di Controller dan menggunakan library form_validation.

Apa itu validasi masukan?

Validasi input dilakukan untuk memastikan data yang diisi oleh user sesuai dengan yang dibutuhkan oleh aplikasi. Untuk halaman login, setidaknya ada 2 input yang harus Anda validasi. Pertama adalah inputan email dan yang kedua adalah inputan kata sandi atau password.

kode javascript