CARA MENAMPILKAN HASIL INPUTAN FORM HTML DENGAN JAVASCRIPT

JavaScript adalah bahasa pemrograman yang banyak digunakan untuk membangun aplikasi web. Salah satu fungsinya adalah untuk menampilkan hasil inputan form HTML. Mari kita pelajari cara menampilkannya.

Persiapan Kode HTML

Langkah pertama adalah menyiapkan kode HTML untuk form inputan. Contoh paling sederhana bisa berupa inputan teks dan sebuah tombol untuk mengeksekusi JavaScript.

<form id="formInput">
    <label>Masukkan Nama:</label>
    <input type="text" id="nama">
    <button onclick="tampilkanHasil()">Submit</button>
</form>

Dalam contoh ini, kita memiliki sebuah form dengan id formInput, sebuah inputan teks dengan id nama, dan sebuah tombol dengan event onclick yang akan memanggil function tampilkanHasil() saat tombol di-klik.

Membuat Fungsi JavaScript

Setelah form HTML siap, langkah selanjutnya adalah membuat fungsi JavaScript yang akan dieksekusi saat tombol di-klik. Fungsi ini akan mengambil nilai dari inputan teks, lalu menampilkan hasilnya.

function tampilkanHasil() {
    var nama = document.getElementById("nama").value;
    alert("Nama kamu adalah: " + nama);
}

Dalam kode di atas, kita membuat sebuah fungsi bernama tampilkanHasil. Fungsi ini akan mencari elemen dengan id ‘nama’ di dokumen HTML, mengambil nilainya, dan menampilkannya dalam bentuk alert dengan pesan “Nama kamu adalah: ” diikuti dengan nilai dari inputan teks.

Menjalankan Aplikasi

Sekarang, setelah kode HTML dan JavaScript sudah siap, kamu bisa menjalankan aplikasi ini. Saat kamu memasukkan teks di inputan dan menekan tombol, JavaScript akan menampilkan hasil inputan tersebut dalam bentuk alert.

Demikianlah cara menampilkan hasil inputan form HTML dengan JavaScript. Dengan memahami konsep ini, kamu bisa membuat aplikasi web yang interaktif dengan lebih mudah dan cepat.