Nama : Muhammad Fuad Salim
NRP : 5025201057
Kelas : PWEB B
Deskripsi
Kuis 1 - Membuat Form Pendaftaran Lomba dengan menggunakan HTML, CSS, dan Javascript
Code
HTML :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>Kuis HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<h1>Formulir Pendafataran</h1>
<h2>Pekan Olahraga dan Seni Guru TKA/TPA</h2>
<h2>Tahun 2020</h2>
<br>
<table cellspacing="3" cellpadding="3">
<tr><td>NAMA</td>
<td><input type="text" placeholder="Masukkan Nama Anda" id="n1"></td>
</tr>
<tr><td >TEMPAT TANGGAL LAHIR</td>
<td><input type="text" placeholder="Masukkan Tempat Tanggal Lahir Anda" id="t1"></td>
</tr>
<tr><td >UTUSAN UNIT TKA/TPA</td>
<td><input type="text" placeholder="Masukkan Unit Anda" id="u1"></td>
</tr>
<div class="card1"><tr><td >KELURAHAN/DESA</td>
<td><input type="text" placeholder="Masukkan Kelurahan/Desa Anda" id="k1"></td>
</tr>
<tr><td >KECAMATAN</td>
<td><input type="text" placeholder="Masukkan Kecamatan Anda" id="k2"></td>
</tr>
</div>
<tr><td style="font-weight: bold">NOMOR TELEPON</td>
<td><input type="text" placeholder="Masukkan Nomor Telepon Anda" id="n1"></td>
</tr>
<tr><td style="font-weight: bold" >JENIS LOMBA </td></tr>
<tr><td>
<input type="checkbox" id="jenis-lomba" name="lomba1" value="TarikTambang">
<label for="lomba1">Tarik Tambang (4 Perempuan + 1 Laki = 5 Orang)</label><br>
<input type="checkbox" id="jenis-lomba" name="lomba2" value="LariEstafet">
<label for="lomba2">Lari Estafet (4 Perempuan)</label><br>
<input type="checkbox" id="jenis-lomba" name="lomba3" value="GobakSodor">
<label for="lomba2">Gobak Dosor (1 Orang perwakilan TKA/TPA)</label><br>
<input type="checkbox" id="jenis-lomba" name="lomba4" value="Tartil">
<label for="lomba2">Tartil (1 Orang perwakilan TKA/TPA)</label><br>
<input type="checkbox" id="jenis-lomba" name="lomba5" value="Ceramah">
<label for="lomba2">Ceramah (1 Orang perwakilan TKA/TPA)</label>
</td></tr>
<tr>
<td><input class="submit" type="submit" value="Submit" ></td>
</tr>
</table>
</div>
</body>
</html>
CSS :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
font-family: Poppins;
background-color: whitesmoke;
border-radius: 10px;
box-shadow: 0px 0px 20px -8px grey;
padding: 3em;
width: 80%;
height: 40em;
margin-bottom: 3em;
}
.container h1,h2{
color: black;
font-family: Poppins;
letter-spacing:0em;
font-weight: bold;
}
input{
width: 20em;
background-color: whitesmoke;
border-radius: 10px;
box-shadow: 0px 0px 2px -8px grey;
padding: 0.3em;
}
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Kuis HTML</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="card"> | |
| <h1>Formulir Pendafataran</h1> | |
| <h2>Pekan Olahraga dan Seni Guru TKA/TPA</h2> | |
| <h2>Tahun 2020</h2> | |
| <br> | |
| <table cellspacing="3" cellpadding="3"> | |
| <tr><td>NAMA</td> | |
| <td><input type="text" placeholder="Masukkan Nama Anda" id="n1"></td> | |
| </tr> | |
| <tr><td >TEMPAT TANGGAL LAHIR</td> | |
| <td><input type="text" placeholder="Masukkan Tempat Tanggal Lahir Anda" id="t1"></td> | |
| </tr> | |
| <tr><td >UTUSAN UNIT TKA/TPA</td> | |
| <td><input type="text" placeholder="Masukkan Unit Anda" id="u1"></td> | |
| </tr> | |
| <div class="card1"><tr><td >KELURAHAN/DESA</td> | |
| <td><input type="text" placeholder="Masukkan Kelurahan/Desa Anda" id="k1"></td> | |
| </tr> | |
| <tr><td >KECAMATAN</td> | |
| <td><input type="text" placeholder="Masukkan Kecamatan Anda" id="k2"></td> | |
| </tr> | |
| </div> | |
| <tr><td style="font-weight: bold">NOMOR TELEPON</td> | |
| <td><input type="text" placeholder="Masukkan Nomor Telepon Anda" id="n1"></td> | |
| </tr> | |
| <tr><td style="font-weight: bold" >JENIS LOMBA </td></tr> | |
| <tr><td> | |
| <input type="checkbox" id="jenis-lomba" name="lomba1" value="TarikTambang"> | |
| <label for="lomba1">Tarik Tambang (4 Perempuan + 1 Laki = 5 Orang)</label><br> | |
| <input type="checkbox" id="jenis-lomba" name="lomba2" value="LariEstafet"> | |
| <label for="lomba2">Lari Estafet (4 Perempuan)</label><br> | |
| <input type="checkbox" id="jenis-lomba" name="lomba3" value="GobakSodor"> | |
| <label for="lomba2">Gobak Dosor (1 Orang perwakilan TKA/TPA)</label><br> | |
| <input type="checkbox" id="jenis-lomba" name="lomba4" value="Tartil"> | |
| <label for="lomba2">Tartil (1 Orang perwakilan TKA/TPA)</label><br> | |
| <input type="checkbox" id="jenis-lomba" name="lomba5" value="Ceramah"> | |
| <label for="lomba2">Ceramah (1 Orang perwakilan TKA/TPA)</label> | |
| </td></tr> | |
| <tr> | |
| <td><input class="submit" type="submit" value="Submit" ></td> | |
| </tr> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-content: center; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: Poppins; | |
| background-color: whitesmoke; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 20px -8px grey; | |
| padding: 3em; | |
| width: 80%; | |
| height: 40em; | |
| margin-bottom: 3em; | |
| } | |
| .container h1,h2{ | |
| color: black; | |
| font-family: Poppins; | |
| letter-spacing:0em; | |
| font-weight: bold; | |
| } | |
| input{ | |
| width: 20em; | |
| background-color: whitesmoke; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 2px -8px grey; | |
| padding: 0.3em; | |
| } |
Tampilan
Link Web : Website
Link Repository : Repository
Comments
Post a Comment