PWEB Kuis 1
Dokumentasi :
<!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">
<link rel="stylesheet" href="styles.css" />
<title>Quiz 1 : Formulir Pendaftaran Pasien Baru</title>
</head>
<body>
<div class="main-container">
<h1>PEMERINTAH KABUPATEN SOLOK</h1>
<h2>RUMAH SAKIT UMUM DAERAH AROSUKA</h2>
<p><i>Jl. Raya Solok Padang KM. 20 Arosuka kode Pos 27364</i></p>
<p><i>Propinsi Sumatra Barat Telp. / Fax (0755) 31160</i></p>
<p><i>Email : rsudarosukakabsolok@gmail.com</i></p>
<h3><b><hr></b></h3>
<h4> FORMULIR PENDAFTARAN PASIEN BARU </h4>
<h5><u>PERHATIAN : HARAP MENGISI FORMULIR INI DENGAN LENGKAP DAN JELAS</u></h5>
<h6>I.IDENTITAS PASIEN</h6>
<div class="identitas">
<div class="table-row">
<label class="input-label table-cell" for="nama-pasien">Nama Pasien : </label>
<input type="text" class="table-cell" id="nama-pasien" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="tl">Tempat Lahir : </label>
<input type="text" class="table-cell" id="tl" placeholder=""/>
</div>
<div class="table-date">
<label class="input-label table-cell" for="ttl">Tanggal Lahir : </label>
<input type="datetime-local" class="table-cell" id="ttl" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="jenis-kelamin">Jenis Kelamin : </label>
<input type="text" class="table-cell" id="jenis-kelamin" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="alamat">Alamat : </label>
<input type="text" class="table-cell" id="alamat" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="provinsi">Provinsi : </label>
<input type="text" class="table-cell" id="provinsi" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="kecamatan">Kecamatan : </label>
<input type="text" class="table-cell" id="kecamatan" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="keldes">Kelurahan/Desa : </label>
<input type="text" class="table-cell" id="keldes" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="notelp">No. Telp/Hp : </label>
<input type="text" class="table-cell" id="notelp" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="kodepos">Kode Pos : </label>
<input type="text" class="table-cell" id="kodepos" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="radio">Agama: </label>
<div class="agamaradio" class="table-cell" id="radio">
<label class="radio-inline">
<input type="radio" name="optradio">1. Islam
</label>
<label class="radio-inline">
<input type="radio" name="optradio">2. Kristen
</label>
<label class="radio-inline">
<input type="radio" name="optradio">3. Hindu
</label>
<label class="radio-inline">
<input type="radio" name="optradio">4. Budha
</label>
<label class="radio-inline">
<input type="radio" name="optradio">5. Katolik
</label>
<label class="radio-inline">
<input type="radio" name="optradio">6. Konghucu
</label>
<label class="input-label table-cell" for="notelp">Lainnya : </label>
<input type="text" class="table-cell" id="notelp" />
</div>
</div>
<div class="table-row">
<label class="input-label table-cell" for="pendidikan">Pendidikan Terakhir : </label>
<input type="text" class="table-cell" id="pendidikan" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="pekerjaan">Provinsi : </label>
<input type="text" class="table-cell" id="pekerjaan" />
</div>
</div>
<h6>II. PENANGGUNG JAWAB PASIEN</h6>
<div class="identitas">
<div class="table-row">
<label class="input-label table-cell" for="nama-pj">Hubungan Dengan Pasien : </label>
<input type="text" class="table-cell" id="nama-pj" placeholder="Suamin/Istri/Ortu/..." />
</div>
<div class="table-row">
<label class="input-label table-cell" for="nama-pj">Nama Penanggung Jawab : </label>
<input type="text" class="table-cell" id="nama-pj" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="tl">Pendidikan P. Jawab : </label>
<input type="text" class="table-cell" id="tl" />
</div>
<div class="table-row">
<label class="input-label table-cell" for="ttl">Pekerjaan P. Jawab : </label>
<input type="text" class="table-cell" id="ttl" />
</div>
</div>
<div class="ttd-pendaftar">
<p class="ttd-label"> Tanda Tangan</p>
<input type="file"/>
</div>
<div class="bottom"></div>
<div class="button-container">
<input type="submit" class="button" value="Submit" />
</div>
</div>
</body>
</html>
html{
background-color: aquamarine;
}
:root {
--background: rgb(255, 255, 255);
--button-background: rgb(57, 57, 57);
--button-background-hover: rgb(202, 202, 202);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: var(--text);
}
h1, h2, p {
text-align: center;
}
h3 {
text-align: center;
margin-bottom: 15px;
}
h1, .ttd-label {
margin-bottom: 0px;
}
h2 {
margin-bottom: 0px;
}
p {
margin-bottom: 0px;
}
h4{
text-align: center;
margin-bottom: 10px;
}
h5{
text-align: center;
margin-bottom: 25px;
}
h6{
font-size: 20px;
margin-bottom: 10px;
}
.main-container {
max-width: 800px;
margin: 0 auto;
padding: 45px;
background-color: var(--background);
border: 2px solid black;
margin-top: 10px;
margin-bottom: 30px;
}
.tittle{
margin-bottom: 15px;
text-align: left;
}
.table-row {
display: table-row;
padding: 50px;
width: 100%;;
}
.table-date {
display: table-row;
padding: 50px;
width: 100%;;
}
.table-cell {
display: table-cell;
margin-bottom: 15px;
padding-right: 18px;
}
.radio-input {
margin-bottom: 15px;
}
input[type="text"] {
min-width: 100%;
}
.identitas {
margin-bottom: 15px;
}
.keterangan {
text-align: left;
}
.form-time {
float: right;
display: flex;
gap: 5px;
margin-top: 60px;
}
.ttd-pendaftar {
margin-top: -100px;
float: right;
}
.agamaradio {
text-align: left;
}
.bottom {
clear: left;
}
.button-container {
text-align: center;
margin-top: 15px;
}
.button {
padding: 10px 20px;
background-color: var(--button-background);
color: white;
border-radius: 8px;
border-style: none;
transition: 0.15s;
}
.button:hover {
background-color: var(--button-background-hover);
color: black;
cursor: pointer;
}
Link : Repository
Link Web : Pendaftaran Pasien
Comments
Post a Comment