Raeni Official: Latihan1 Javascript

Buat File Latihan dengan nama latihanpendaftaran.html

Buat Laman Body sebagai berikut:

<body>

<div class="container mt-5">

    <div class="row justify-content-center">

        <div class="col-md-7">

            <div class="card shadow-lg">

                <div class="card-header">

                    <h1 class="fs-4">DATA SISWA<br>SMK AL-GHIFARI BANYURESMI</h1>

                </div>

                <div class="card-body">

                    <script>

                    // Fungsi JavaScript untuk memproses input

                    function prosesDataSiswa() 

{

                        // Ambil nilai dari input field

                        var nisn_input = document.fform.nisn.value; 

                        var nama_input = document.fform.namasiswa.value; 

                        // Masukkan nilai ke output field

                        document.fform.onisn.value = nisn_input; 

                        document.fform.onamasiswa.value = nama_input; 

}

                    </script> 

                    <form name="fform"> 

                        <h5 class="mb-3 text-primary">Input Data</h5>

                        <div class="mb-3 row">

                            <label for="nisn" class="col-sm-4 col-form-label">NISN</label>

                            <div class="col-sm-8">

                                <input type="text" class="form-control" name="nisn" id="nisn" placeholder="Masukkan NISN">

                            </div>

                        </div>

                        <div class="mb-3 row">

                            <label for="namasiswa" class="col-sm-4 col-form-label">NAMA LENGKAP</label>

                            <div class="col-sm-8">

                                <input type="text" class="form-control" name="namasiswa" id="namasiswa" placeholder="Masukkan Nama Lengkap">

                            </div>

                        </div>

                        <div class="mb-4">

                            <button type="button" class="btn btn-primary" onclick="prosesDataSiswa()">KIRIM</button>

                            <button type="reset" class="btn btn-secondary">ULANG</button>

                        </div>

                        <hr>

                        <h5 class="mt-4 mb-3 text-success">Output Data</h5> 

                        <div class="mb-3 row">

                            <label for="onisn" class="col-sm-4 col-form-label">Jadi NISN adalah</label>

                            <div class="col-sm-8">

                                <input type="text" class="form-control" name="onisn" id="onisn" disabled>

                            </div>

                        </div>

                        <div class="mb-3 row">

                            <label for="onamasiswa" class="col-sm-4 col-form-label">NAMA LENGKAP Anda</label>

                            <div class="col-sm-8">

                                <input type="text" class="form-control" name="onamasiswa" id="onamasiswa" disabled>

                            </div>

                        </div>

                    </form> 

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

                integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>

Raeni Official