PWEB - QUIZ 1
QUIZ 1 PWEB
Nama : Dawamul Fikri Aqil
NRP : 5025201025
Kelas : PWEB B
Tahun : 2022
Quiz 1 : Membuat Front-End Formulir Pendaftaran
DOKUMENTASI TUGAS
DESKRIPSI TUGAS
Menerapkan HTML, CSS, dan Javascript dalam pembuatan form pendaftaran.
TAMPILAN WEBSITE
SOURCE CODE
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>Formulir Pendaftaran - 5025201025</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1> Formulir Pendaftaran </h1> | |
| <h2> Pekan Olahraga dan Seni Guru TKA/TPA </h2> | |
| <h2> Tahun 2020 </h2> | |
| </div> | |
| <form name="form" onsubmit="return validate()"> | |
| <div class="form-group"> | |
| <label>NAMA PESERTA</label> | |
| <input type="text" name="nama" placeholder="Masukan Nama Peserta" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label>TEMPAT TANGGAL LAHIR</label> | |
| <input type="text" name="ttl" placeholder="Masukan Tempat Tanggal Lahir" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label>UTUSAN UNIT TKA/TPA</label> | |
| <input type="text" name="unit" placeholder="Masukan Unit TKA/TPA" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label>KELURAHAN/DESA</label> | |
| <input type="text" name="desa" placeholder="Masukan Kelurahan/Desa" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label>NOMOR TELEPON</label> | |
| <input type="text" name="telp" placeholder="Masukan Nomor Telepon" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label>JENIS LOMBA</label> | |
| <select name="jenis-lomba" class="form-control" > | |
| <option value="">--Pilih Jenis Lomba--</option> | |
| <option value="1">1. Tarik Tambang (4 Perempuan + 1 Laki-laki = 5 Orang)</option> | |
| <option value="2">2. Lari Estafet (4 Perempuan)</option> | |
| <option value="3">3. Gobak Sodor (4 Perempuan)</option> | |
| <option value="4">4. Tartil (1 Orang Perwakilan TKA/TPA)</option> | |
| <option value="5">5. Ceramah (1 Orang Perwakilan TKA/TPA)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>UPLOAD FORMULIR</label> | |
| <input type="file" name="file" class="form-control"> | |
| </div> | |
| <button type="submit" class="btn btn-success">Submit</button> | |
| </form> | |
| </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
| function validate() { | |
| if (document.forms["form"]["nama"].value == "") { | |
| alert("Error: Nama Peserta Masih Kosong"); | |
| document.forms["form"]["nama"].focus(); | |
| return false; | |
| } | |
| if (document.forms["form"]["ttl"].value == "") { | |
| alert("Error: Tempat Tanggal Lahir Masih Kosong"); | |
| document.forms["form"]["ttl"].focus(); | |
| return false; | |
| } | |
| if (document.forms["form"]["unit"].value == "") { | |
| alert("Error: Utusan Unit TKA/TPA Masih Kosong"); | |
| document.forms["form"]["unit"].focus(); | |
| return false; | |
| } | |
| if (document.forms["form"]["desa"].value == "") { | |
| alert("Error: Kelurahan/Desa Masih Kosong"); | |
| document.forms["form"]["desa"].focus(); | |
| return false; | |
| } | |
| if (document.forms["form"]["telp"].value == "") { | |
| alert("Error: Nomor Telepon Masih Kosong"); | |
| document.forms["form"]["telp"].focus(); | |
| return false; | |
| } | |
| if (document.forms["form"]["jenis-lomba"].selectedIndex == "") { | |
| alert("Error: Jenis Lomba Masih Kosong"); | |
| document.forms["form"]["jenis-Lomba"].focus(); | |
| return false; | |
| } | |
| if (document.forms["form"]["file"].value == "") { | |
| alert("Error: File Formulir Masih Kosong"); | |
| document.forms["form"]["file"].focus(); | |
| return false; | |
| } | |
| return true; | |
| } |
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
| body { | |
| background-color: #1a0f5d; | |
| font-family: "Open Sans", sans-serif; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px 0; | |
| margin: 0; | |
| } | |
| .container { | |
| background-color: white; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| width: 460px; | |
| overflow: hidden; | |
| max-width: 100%; | |
| } | |
| .header { | |
| background-color: #ebe300; | |
| border-bottom: 1px solid #6c86ad; | |
| padding: 20px 40px; | |
| } | |
| .header h1 { | |
| margin: 0; | |
| font-size: 26px; | |
| font-weight: 800; | |
| color: #343a40; | |
| text-align: center; | |
| } | |
| .header h2 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 800; | |
| color: #343a40; | |
| text-align: center; | |
| } | |
| img { | |
| display:block; | |
| text-align: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .form{ | |
| position: relative; | |
| } | |
| form{ | |
| margin-top: 25px; | |
| height: 666px; | |
| } |
Komentar
Posting Komentar