penjelasan kode

<!DOCTYPE html>

<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contoh Tampilan Data Formulir</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

}

form {

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

margin-bottom: 20px;

}

label, input {

display: block;

margin-bottom: 10px;

}

input[type="text"], input[type="email"] {

width: 90%;

padding: 8px;

border: 1px solid #ddd;

border-radius: 4px;

}

button {

padding: 10px 15px;

background-color: #007bff;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

#hasil-data {

border: 2px solid #28a745;

padding: 15px;

border-radius: 5px;

background-color: #e2f0e3;

}

#hasil-data h3 {

color: #28a745;

}

.data-item {

margin-bottom: 5px;

}

</style>

</head>

<body>

<h1>Input Data Pengguna</h1>

<form id="dataForm">

<label for="nama">Nama:</label>

<input type="text" id="nama" name="nama" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="usia">Usia:</label>

<input type="text" id="usia" name="usia" required>

<button type="submit">Tampilkan Data</button>

</form>

<hr>

<h2>Hasil Input Data</h2>

<div id="hasil-data" style="display: none;">

<h3>Data Berhasil Ditampilkan:</h3>

<p class="data-item"><strong>Nama:</strong> <span id="tampilNama"></span></p>

<p class="data-item"><strong>Email:</strong> <span id="tampilEmail"></span></p>

<p class="data-item"><strong>Usia:</strong> <span id="tampilUsia"></span></p>

</div>

<script>

// Mendapatkan elemen formulir dan hasil

const dataForm = document.getElementById('dataForm');

const hasilDataDiv = document.getElementById('hasil-data');

const tampilNamaSpan = document.getElementById('tampilNama');

const tampilEmailSpan = document.getElementById('tampilEmail');

const tampilUsiaSpan = document.getElementById('tampilUsia');

// Menambahkan event listener untuk submit formulir

dataForm.addEventListener('submit', function(event) {

// Mencegah perilaku default formulir (refresh halaman)

event.preventDefault();

// Mengambil nilai dari input fields

const nama = document.getElementById('nama').value;

const email = document.getElementById('email').value;

const usia = document.getElementById('usia').value;

// Menampilkan data ke elemen span yang sudah disiapkan

tampilNamaSpan.textContent = nama;

tampilEmailSpan.textContent = email;

tampilUsiaSpan.textContent = usia;

// Menampilkan div hasil-data

hasilDataDiv.style.display = 'block';

// Opsional: Membersihkan formulir setelah submit

// dataForm.reset();

});

</script>

</body>

</html>

Cara Kerja JavaScript

Pengambilan Elemen:
- document.getElementById() digunakan untuk mendapatkan elemen formulir (dataForm) dan elemen-elemen tempat data akan ditampilkan (tampilNama, tampilEmail, tampilUsia).
Penanganan Event (.addEventListener):
- Fungsi ditambahkan ke formulir untuk mendengarkan event submit.
Mencegah Default:
- event.preventDefault(); sangat penting. Ini menghentikan browser dari mencoba mengirim formulir secara tradisional, yang akan menyebabkan halaman refresh dan data yang di-input hilang.
Mengambil Nilai Input:
- Nilai dari setiap kolom input diambil menggunakan properti .value setelah mendapatkan elemen inputnya (misalnya, document.getElementById('nama').value).
Menampilkan Data:
- Nilai yang sudah diambil kemudian dimasukkan ke dalam elemen <span> yang sesuai menggunakan properti .textContent.
- Elemen <div> hasil (hasil-data) yang awalnya disembunyikan (style="display: none;") diubah menjadi terlihat (hasilDataDiv.style.display = 'block';).

Apakah Anda ingin saya kembangkan contoh ini untuk menyimpan data ke dalam array dan menampilkannya sebagai list?