Scribd
Unggah
2 tayangan

pdf.coding

Dokumen ini adalah sebuah halaman HTML yang berfungsi sebagai form input data siswa. Form ini memungkinkan pengguna untuk memasukkan nama, NISN, jenis kelamin, dan tanggal lahir siswa, serta menampilkan data siswa yang terdaftar dalam tabel. Data siswa yang dimasukkan akan disimpan dalam array dan ditampilkan di bawah form setelah penambahan.

Diunggah oleh

kieash1717
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
2 tayangan

pdf.coding

Dokumen ini adalah sebuah halaman HTML yang berfungsi sebagai form input data siswa. Form ini memungkinkan pengguna untuk memasukkan nama, NISN, jenis kelamin, dan tanggal lahir siswa, serta menampilkan data siswa yang terdaftar dalam tabel. Data siswa yang dimasukkan akan disimpan dalam array dan ditampilkan di bawah form setelah penambahan.

Diunggah oleh

kieash1717
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 3

<!

DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Input Data Siswa</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.form-container {
margin-bottom: 20px;
}
.form-container input, .form-container select {
padding: 8px;
margin: 5px;
width: 100%;
}
.form-container button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.form-container button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Form Input Data Siswa</h2>

<div class="form-container">
<form id="siswaForm">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required><br>

<label for="nisn">NISN:</label>
<input type="text" id="nisn" name="nisn" required><br>

<label for="jenisKelamin">Jenis Kelamin:</label>


<select id="jenisKelamin" name="jenisKelamin" required>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select><br>

<label for="tanggalLahir">Tanggal Lahir:</label>


<input type="date" id="tanggalLahir" name="tanggalLahir" required><br>

<button type="button" onclick="tambahSiswa()">Tambah Siswa</button>


</form>
</div>

<h3>Data Siswa Terdaftar Imunisasi</h3>


<table id="dataSiswa">
<thead>
<tr>
<th>Nama</th>
<th>NISN</th>
<th>Jenis Kelamin</th>
<th>Tanggal Lahir</th>
<th>Status Imunisasi</th>
</tr>
</thead>
<tbody>
<!-- Data siswa akan ditampilkan di sini -->
</tbody>
</table>

<script>
// Array untuk menyimpan data siswa
let siswaList = [];

// Fungsi untuk menambah siswa ke dalam tabel


function tambahSiswa() {
const nama = document.getElementById('nama').value;
const nisn = document.getElementById('nisn').value;
const jenisKelamin = document.getElementById('jenisKelamin').value;
const tanggalLahir = document.getElementById('tanggalLahir').value;

if (nama && nisn && jenisKelamin && tanggalLahir) {


// Menambahkan data siswa ke dalam array
siswaList.push({
nama,
nisn,
jenisKelamin,
tanggalLahir,
statusImunisasi: 'Sudah Terimunisasi'
});

// Menampilkan data siswa ke dalam tabel


tampilkanDataSiswa();

// Mengosongkan input form


document.getElementById('siswaForm').reset();
} else {
alert("Semua data harus diisi!");
}
}

// Fungsi untuk menampilkan data siswa dalam tabel


function tampilkanDataSiswa() {
const tbody =
document.getElementById('dataSiswa').getElementsByTagName('tbody')[0];
tbody.innerHTML = ''; // Menghapus data yang ada sebelumnya

siswaList.forEach(siswa => {
const row = tbody.insertRow();
row.insertCell(0).textContent = siswa.nama;
row.insertCell(1).textContent = siswa.nisn;
row.insertCell(2).textContent = siswa.jenisKelamin;
row.insertCell(3).textContent = siswa.tanggalLahir;
row.insertCell(4).textContent = siswa.statusImunisasi;
});
}
</script>

</body>
</html>

Anda mungkin juga menyukai