Kuis 1 Pemrograman Web C : HTML, CSS, dan JS
index.html :
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8">
5: <meta http-equiv="X-UA-Compatible" content="IE=edge">
6: <meta name="viewport" content="width=device-width, initial-scale=1.0">
7: <link rel="stylesheet" href="styles.css" />
8: <title>Quiz 1 : Formulir Pendaftaran</title>
9: </head>
10: <body>
11: <div class="container">
12: <div class="header">
13: <h1>PEMERINTAH KABUPATEN SOLOK</h1>
14: <h1>RUMAH SAKIT UMUM DAERAH AROSUKA</h1>
15: <h3>Jl. Raya Solok Padang KM. 20 Arosuka Kode pos 27364</h3>
16: <h3>Propinsi Sumatra Barat Telp / Fax (0755) 31160</h3>
17: <h3>Email : raudarosukakabsolok@gmail.com</h3>
18: </div>
19: <hr>
20: <h1>Formulir Pendaftaran Pasien Baru</h1>
21: <h2><u>PERHATIAN : HARAP MENGISI FORMULIR INI DENGAN LENGKAP DAN JELAS</u></h2>
22: <h3>I.IDENTITAS PASIEN</h3>
23: <div class="table">
24: <div class="table-row">
25: <label class="input-label table-cell" for="nama-pasien">Nama Pasien: </label>
26: <input type="text" class="table-cell" id="nama-pasien" />
27: </div>
28: <div class="table-row">
29: <label class="input-label table-cell" for="tempatl">Tempat Lahir: </label>
30: <input type="text" class="table-cell" id="tempatl" />
31: </div>
32: <div class="table-row">
33: <label class="input-label table-cell" for="tanggall">Tanggal Lahir: </label>
34: <input type="datetime-local" class="table-cell" id="tanggall"/>
35: </div>
36: <div class="table-row">
37: <label class="input-label table-cell" for="jenisk">Jenis Kelamin: </label>
38: <input type="text" class="table-cell" id="jenisk" />
39: </div>
40: <div class="table-row">
41: <label class="input-label table-cell" for="alamat">Alamat: </label>
42: <input type="text" class="table-cell" id="alamat" />
43: </div>
44: <div class="table-row">
45: <label class="input-label table-cell" for="provinsi">Provinsi: </label>
46: <input type="text" class="table-cell" id="provinsi" />
47: </div>
48: <div class="table-row">
49: <label class="input-label table-cell" for="kecamatan">Kecamatan: </label>
50: <input type="text" class="table-cell" id="kecamatan" />
51: </div>
52: <div class="table-row">
53: <label class="input-label table-cell" for="keles">Kelurahan/Desa: </label>
54: <input type="text" class="table-cell" id="keles" />
55: </div>
56: <div class="table-row">
57: <label class="input-label table-cell" for="notelp">No. Tel/Hp: </label>
58: <input type="text" class="table-cell" id="notelp" />
59: </div>
60: <div class="table-row">
61: <label class="input-label table-cell" for="kodepos">Kode Pos: </label>
62: <input type="text" class="table-cell" id="kodepos" />
63: </div>
64: <div class="table-row radio-but">
65: <label class="input-label table-cell" for="lomba">Agama: </label>
66: <div class="lombaradio" class="table-cell" id="radio">
67: <input type="radio" id="radio-1" name="fav_language" value="HTML">
68: <label for="radio-1">1. Islam</label><br>
69: <input type="radio" id="radio-2" name="fav_language" value="HTML">
70: <label for="radio-2">2. Kristen</label><br>
71: <div class="flex">
72: <input type="radio" id="radio-3" name="fav_language" value="HTML">
73: <label id="radio-3-label" for="radio-3">3. </label><br>
74: <input type="text"/>
75: </div>
76: </div>
77: </div>
78: <div class="table-row">
79: <label class="input-label table-cell" for="pter">Pendidikan Terakhir: </label>
80: <input type="text" class="table-cell" id="pter" />
81: </div>
82: <div class="table-row">
83: <label class="input-label table-cell" for="pekerjaan">Pekerjaan: </label>
84: <input type="text" class="table-cell" id="pekerjaan" />
85: </div>
86: </div>
87: <h3>II.PENANGGUNG JAWAB PASIEN</h3>
88: <div class="table">
89: <div class="table-row">
90: <label class="input-label table-cell" for="hub">Hubungan Dengan Pasien: </label>
91: <div class="lombaradio" class="table-cell" id="hub">
92: <input type="radio" id="radio2-1" name="hubungan" value="HTML">
93: <label for="radio-1">Suami</label><br>
94: <input type="radio" id="radio2-2" name="hubungan" value="HTML">
95: <label for="radio-2">Istri</label><br>
96: <input type="radio" id="radio2-3" name="hubungan" value="HTML">
97: <label for="radio-3">Ortu</label><br>
98: <div class="flex">
99: <input type="radio" id="radio2-4" name="hubungan" value="HTML">
100: <input type="text"/>
101: </div>
102: </div>
103: </div>
104: <div class="table-row">
105: <label class="input-label table-cell" for="penanngung-jawab">Penanggung Jawab: </label>
106: <input type="text" class="table-cell" id="penanngung-jawab" />
107: </div>
108: <div class="table-row">
109: <label class="input-label table-cell" for="pendidikanp">Pendidikan P. Jawab: </label>
110: <input type="text" class="table-cell" id="pendidikanp" />
111: </div>
112: <div class="table-row">
113: <label class="input-label table-cell" for="pekerjaanp">Pekerjaan P. Jawab: </label>
114: <input type="text" class="table-cell" id="pekerjaanp" />
115: </div>
116: </div>
117: <div class="ttd">
118: <div class="ttd-pasien">
119: <p class="ttd-label">Tanda Tangan</p>
120: <input type="file"/>
121: </div>
122: </div>
123: <div class="bottom"></div>
124: <div class="button-container">
125: <input type="submit" class="button" value="Submit" onclick="success()" />
126: </div>
127: </div>
128: <script src="script.js></script>
129: </body>
130: </html>
styles.css :
1: :root {
2: --background: rgba(233, 230, 230, 0.5);
3: --button-background: rgba(32, 191, 212, 0.5);
4: --button-background-hover: rgba(32, 191, 212, 1);
5: }
6: * {
7: margin: 0;
8: padding: 0;
9: box-sizing: border-box;
10: font-family: 'Poppins', sans-serif;
11: color: var(--text);
12: }
13: h1 {
14: text-align: center;
15: margin-bottom: 30px;
16: }
17: .ttd-label {
18: margin-bottom: 15px;
19: }
20: h2 {
21: font-size: 18px;
22: margin-bottom: 15px;
23: }
24: h3 {
25: font-size: 15px;
26: margin-bottom: 15px;
27: }
28: .header {
29: text-align: center;
30: }
31: .header h1, .header h3 {
32: margin-bottom: 5px;
33: }
34: hr {
35: margin-top: 15px;
36: margin-bottom: 30px;
37: }
38: .flex {
39: display: flex;
40: column-gap: 5px;
41: margin-bottom: 7px;
42: }
43: .container {
44: max-width: 800px;
45: margin: 0 auto;
46: padding: 45px;
47: background-color: var(--background);
48: border: 2px solid black;
49: margin-top: 30px;
50: margin-bottom: 30px;
51: }
52: .table-row {
53: display: table-row;
54: padding: 50px;
55: width: 100%;
56: }
57: .table-row radio-but {
58: margin-bottom: 7px;
59: }
60: .table-cell {
61: display: table-cell;
62: margin-bottom: 7px;
63: padding-right: 18px;
64: }
65: input[type="text"] {
66: min-width: 100%;
67: }
68: .table {
69: margin-bottom: 15px;
70: padding-left: 30px;
71: }
72: .keterangan {
73: text-align: left;
74: }
75: .form-time {
76: float: right;
77: display: flex;
78: gap: 5px;
79: margin-top: 60px;
80: }
81: .ttd {
82: text-align: center;;
83: clear: left;
84: margin-right: -60px;
85: margin-top: -170px;
86: }
87: .ttd-pasien{
88: float: right;
89: }
90: .lombaradio {
91: text-align: left;
92: }
93: .bottom {
94: clear: left;
95: }
96: .button-container {
97: text-align: center;
98: margin-top: 180px;
99: }
100: .button {
101: padding: 10px 20px;
102: background-color: var(--button-background);
103: border-radius: 8px;
104: border-style: none;
105: transition: 0.15s;
106: }
107: .button:hover {
108: background-color: var(--button-background-hover);
109: color: white;
110: cursor: pointer;
111: }
script.js :
1: function success() {
2: alert("Selamat, Anda telah terdaftar!");
3: }
Link Repository : https://github.com/brianakbar/Kuis1_PWebC_htmlcssjs
Link Website : https://brianakbar.github.io/Kuis1_PWebC_htmlcssjs/
Screenshot :
Comments
Post a Comment