Submit Quiz 1 Pemrograman Web C
Submit Quiz 1 Pemrograman Web kelas C: membuat frontend pada formulir pendaftaran pasien baru menggunakan html, css, dan javascript
Tampilan frontend
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AchFerdi | Quiz 1</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<header>
<h2>
<strong>
PEMERIINTAH KABUPATEN SOLOK
<br />
RUMAH SAKIT UMUM DAERAH AROSUKA
</strong>
</h2>
<p>
<em>
Jl. Raya Solok Padang KM. 20 Arosuka Kode Pos 27364
<br />
Provinsi Sumatera Barat Telp. / Fax (0755) 31160
<br />
Email : raudarosukakabsolok@gmail.com
</em>
</p>
</header>
<div class="main-content">
<h2>
<strong> FORMULIR PENDAFTARAN PASIEN BARU </strong>
</h2>
<h3>
<u> PERHATIAN : HARAP MENGISI FORMULIR INI DENGAN LENGKAP DAN JELAS </u>
</h3>
<div class="form-content">
<form action="#" onsubmit="validateForm()">
<h4>
<strong> I. IDENTITAS PASIEN </strong>
</h4>
<table>
<tr>
<td>Nama Pasien</td>
<td>
<input type="text" name="nama-pasien" id="nama-pasien" />
</td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>
<input type="text" name="tempat-lahir" id="tempat-lahir" />
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>
<input type="date" name="tgl-lahir" id="tgl-lahir" />
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="gender" id="l" />
<label for="l">Laki-laki</label>
<input type="radio" name="gender" id="p" />
<label for="p">Perempuan</label>
</td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" id="alamat" /></td>
</tr>
<tr>
<td>RT</td>
<td><input type="text" name="rt" id="rt" /></td>
</tr>
<tr>
<td>RW</td>
<td><input type="text" name="rw" id="rw" /></td>
</tr>
<tr>
<td>Provinsi</td>
<td>
<input type="text" name="prov" id="prov" />
</td>
</tr>
<tr>
<td>Kecamatan</td>
<td>
<input type="text" name="kec" id="kec" />
</td>
</tr>
<tr>
<td>Kelurahan</td>
<td>
<input type="text" name="kel" id="kel" />
</td>
</tr>
<tr>
<td>No. Telp</td>
<td>
<input type="tel" name="telp" id="telp" />
</td>
</tr>
<tr>
<td>Kode Pos</td>
<td>
<input type="number" name="pos" id="pos" />
</td>
</tr>
<tr>
<td>Agama</td>
<td>
<select name="agama" id="agama">
<option value="1" selected>Islam</option>
<option value="2">Kristen</option>
<option value="3">Katholik</option>
<option value="4">Buddha</option>
<option value="5">Konghucu</option>
<option value="6">Kepercayaan terhadap Tuhan YME</option>
</select>
</td>
</tr>
<tr>
<td>Pendidikan</td>
<td>
<input type="text" name="pendidikan" id="pendidikan" />
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<input type="text" name="pekerjaan" id="pekerjaan" />
</td>
</tr>
</table>
<h4>
<strong> II. PENANGGUNG JAWAB PASIEN </strong>
</h4>
<table>
<tr>
<td>Hubungan dengan Pasien</td>
<td>
<input type="text" name="hubungan" id="hubungan" />
</td>
</tr>
<tr>
<td>Nama Penanggung Jawab</td>
<td>
<input type="text" name="nama-pj" id="nama-pj" />
</td>
</tr>
<tr>
<td>Pendidikan Penanggung Jawab</td>
<td>
<input type="text" name="pendidikan-pj" id="kpndidikan-pj" />
</td>
</tr>
<tr>
<td>Pekerjaan Penanggung Jawab</td>
<td>
<input type="text" name="pekerjaan-pj" id="pekerjaan-pj" />
</td>
</tr>
<tr>
<td>Tanda Tangan</td>
<td>
<input type="file" name="ttd" id="ttd" />
</td>
</tr>
</table>
<button type="submit">Daftar</button>
</form>
</div>
</div>
</body>
</html>
CSS
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
}
header {
text-align: center;
border-bottom: 5px solid black;
}
header h2 {
margin-bottom: 0;
}
header p {
margin-top: 0;
}
.main-content h2, h3 {
text-align: center;
}
.form-content {
margin-left: 150px;
}
table {
width: 100%;
}
tr td:first-child {
margin-left: 70px;
width: 30%;
float: left;
padding: 5px;
}
tr td:last-child {
width: 70%;
padding: 5px;
}
input {
width: 600px;
}
input[type="radio"] {
width: 1rem;
}
button {
width: 200px;
float: right;
margin-right: 250px;
padding: 1rem;
margin-bottom: 20px;
font-size: large;
}
Javascript
function validateForm() {
let errCheck = 0;
let inputForm = document.querySelectorAll("input");
for (let i = 0; i < inputForm.length; i++) {
if (!inputForm[i].value) {
errCheck += 1;
}
continue;
}
if (errCheck !== 0) {
return alert("Mohon isi semua data!");
}
else {
return alert("Pendaftaran sukses!");
}
}
Comments
Post a Comment