Cara Menampilkan Hasil Inputan Form HTML dengan JavaScript

Cara Menampilkan Hasil Inputan Form HTML dengan JavaScript – Dalam pengembangan web, interaksi antara pengguna dan formulir HTML merupakan hal yang penting. Salah satu aspek yang menarik adalah bagaimana kita bisa menampilkan hasil dari inputan formulir HTML menggunakan JavaScript.

Hasil Inputan Form HTML dengan JavaScript memberikan pengembang kontrol penuh atas interaksi antara pengguna dan formulir HTML, serta memungkinkan pengembangan fungsionalitas yang lebih kompleks dan responsif dalam aplikasi web.

Dengan menggunakan JavaScript, pengembang dapat meningkatkan pengalaman pengguna dengan memberikan feedback instan, validasi yang kuat, dan penanganan data yang efisien. Dalam artikel ini, kelasjava akan membahas tentang cara menampilkan hasil inputan form HTML dengan mudah menggunakan JavaScript.

Hal yang Dibutuhkan untuk Membuat Tampilan Hasil Inputan Form HTML dengan JavaScript

Sebelum memulai proyek membuat tampilan hasil inputan form menggunakan JS, pastikan kamu telah menyiapkan beberapa hal berikut:

Perangkat laptop.
Sublime Text (Editor kode teks).
Google Chrome (Peramban web).
Niat yang kuat untuk belajar dan berkarya.

Cara Mudah Menampilkan Hasil Inputan Form HTML dengan JavaScript

1. Persiapan Folder dan File

Dalam hal ini sebelum kamu membuat tampilan hasil inputan form menggunakan JavaScript, pastikan untuk menyiapkan folder proyek dan beberapa filenya seperti berikut:

Buat Folder: Buat folder untuk proyek Anda.
Buat File HTML: Buat file index.html untuk struktur halaman web.
Buat File CSS: Buat file style.css untuk mendesain tampilan halaman web.
Buat File JavaScript: Buat file script.js untuk menulis kode JavaScript untuk menangani hasil inputan form.

2. Buat Kode HTML (index.html)

Buatlah file index.html dan tambahkan struktur dasar HTML untuk tampilan awal hasil inputan form, untuk kode HTML tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Form Input - By: KelasJava</h2>
        <form id="inputForm">
            <label for="name">Nama:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>

            <button type="submit">Submit</button>
        </form>

        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Buat Kode CSS (style.css)

Desain tampilan hasil inputan form dengan menggunakan CSS, untuk kode CSS dari hasil inputan form sederhana tersebut bisa salin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h2 {
    text-align: center;
}

.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
button {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result {
    margin-top: 20px;
    padding: 10px;
    background-color: #dff0d8;
    border: 1px solid #b2dba1;
    border-radius: 5px;
}

4. Buat Kode JavaScript (script.js)

Tambahkan kode JavaScript ke dalam file script.js untuk menangani inputan form dan menampilkan hasilnya, berikut adalah kode yang JS yang bisa kamu salin.

document.getElementById('inputForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Mencegah form untuk melakukan submit

    // Mendapatkan nilai input dari form
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;

    // Menampilkan hasil input ke dalam div dengan id 'result'
    document.getElementById('result').innerHTML = `
        <h3>Hasil Input:</h3>
        <p>Nama: ${name}</p>
        <p>Email: ${email}</p>
    `;
});

5. Jalankan Kode

Jika sudah maka jalankan kode program untuk menampilkan hasil inputan form dengan membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi “Open in Browser”.

6. Tampilkan Hasil

Ketika kamu sudah menjalankan kodenya dan muncul halaman web di jendela browsermu, maka kamu telah berhasil menampilkan hasil inputan form HTML dengan JavaScript. Untuk Tampilan ketika memasukkan data di form HTML dan melakukan submit akan muncul hasil sesuai dengan inputan form tersebut.

Akhir Kata

Demikianlah tutorial singkat tentang cara menampilkan hasil inputan form HTML dengan JavaScript, ikuti langkah-langkahnya dengan cermat agar kamu berhasil menampilkan output yang sesuai. Kamu bisa menambahkan form lainnya dengan menambahkan kode dan menambahkan fitur-fitur baru untuk membuat tampilan hasil inputan form semakin menarik. Selamat mencoba!