<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="UTF-8">

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

  <title>Form Sertifikasi</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body class="bg-light">


<div class="container py-5">

  <div class="card shadow-lg rounded-4">

    <div class="card-header bg-primary text-white text-center">

      <h4>Formulir Pendaftaran Sertifikasi</h4>

    </div>

    <div class="card-body p-4">

      <form id="sertifikasiForm">

        <div class="mb-3">

          <label class="form-label">Nama Lengkap</label>

          <input type="text" class="form-control" id="nama" required>

        </div>

        <div class="mb-3">

          <label class="form-label">NIK / NIP</label>

          <input type="text" class="form-control" id="nik" required>

        </div>

        <div class="mb-3">

          <label class="form-label">Email</label>

          <input type="email" class="form-control" id="email">

        </div>

        <div class="mb-3">

          <label class="form-label">Nomor HP</label>

          <input type="tel" class="form-control" id="hp">

        </div>

        <div class="mb-3">

          <label class="form-label">Jenis Sertifikasi</label>

          <select class="form-select" id="jenis" required>

            <option value="">-- Pilih --</option>

            <option>Sertifikasi Guru</option>

            <option>Sertifikasi Kompetensi</option>

            <option>Sertifikasi Profesi</option>

          </select>

        </div>

        <div class="text-center">

          <button type="submit" class="btn btn-success px-4">Daftar</button>

          <button type="reset" class="btn btn-secondary px-4">Reset</button>

        </div>

      </form>

    </div>

  </div>


  <!-- Hasil muncul di sini -->

  <div class="card mt-4 shadow-sm d-none" id="hasilCard">

    <div class="card-header bg-success text-white">

      <h5>Data Pendaftaran Anda</h5>

    </div>

    <div class="card-body">

      <p><b>Nama:</b> <span id="hasilNama"></span></p>

      <p><b>NIK/NIP:</b> <span id="hasilNik"></span></p>

      <p><b>Email:</b> <span id="hasilEmail"></span></p>

      <p><b>No HP:</b> <span id="hasilHp"></span></p>

      <p><b>Jenis Sertifikasi:</b> <span id="hasilJenis"></span></p>

    </div>

  </div>

</div>


<script>

document.getElementById("sertifikasiForm").addEventListener("submit", function(e){

    e.preventDefault(); // biar form tidak reload


    // ambil nilai input

    document.getElementById("hasilNama").innerText = document.getElementById("nama").value;

    document.getElementById("hasilNik").innerText = document.getElementById("nik").value;

    document.getElementById("hasilEmail").innerText = document.getElementById("email").value;

    document.getElementById("hasilHp").innerText = document.getElementById("hp").value;

    document.getElementById("hasilJenis").innerText = document.getElementById("jenis").value;


    // tampilkan card hasil

    document.getElementById("hasilCard").classList.remove("d-none");

});

</script>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>