Quiz 1 Pemrograman Web
Quiz Pemrograman Web 1
Nama : Abidjanna Zulfa Hamdika
NRP : 5025201197
==================================================================================================
A. Deskripsi
Quiz membuat form dengan HTML CSS
B. Detail Tugas
Source Code index.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
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sign Up Form</title> | |
| <link rel="stylesheet" href="https://codepen.io/gymratpacks/pen/VKzBEp#0"> | |
| <link href='https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <form class="form" onsubmit="submitFunction()"> | |
| <h1>Formulir Pendaftaran</h1> | |
| <fieldset> | |
| <legend style="text-align:center;">Pekan Olahraga dan Seni Guru TKA/TPA Tahun 2020</legend> | |
| <label for="name">Nama Peserta</label> | |
| <input type="text" id="name" name="user_name" required> | |
| <label for="birthplace_date">Tempat Tanggal Lahir</label> | |
| <input type="text" id="birthplace_date" name="user_birthplace_date" required> | |
| <label for="utusan">Utusan Unit TKA/TPA</label> | |
| <input type="text" id="utusan" name="user_utusan" required> | |
| <label for="district">Kecamatan</label> | |
| <input type="text" id="district" name="user_district" required> | |
| <label for="phonenumber">Nomor Telepon</label> | |
| <input type="tel" id="phonenumber" name="user_phonenumber" required> | |
| <label for="comptype">Jenis Lomba</label> | |
| <select id="comptype" name="user_comptype"> | |
| <option value="tarik_tambang">Tarik Tambang (4 Perempuan + 1 Laki = 5 Orang) </option> | |
| <option value="lari_estafet">Lari Estafet (4 Perempuan)</option> | |
| <option value="gobak_sodor">Gobak Sodor (4 Perempuan)</option> | |
| <option value="tartil">Tartil (1 orang perwakilan TKA/KPA)</option> | |
| <option value="ceramah">Ceramah(1 orang perwakilan TKA/TPA)</option> | |
| </select> | |
| <p style="margin-top:-20px;">Ket : Pilih salah satu jenis lomba</p> | |
| <p>Surabaya, </p> | |
| <label style="margin-top:-10px" for="date"></label> | |
| <input type="date" id="date" name="today_date" required> | |
| <label for="signature_tpa">Upload Tanda Tangan Kepala Unit TKA/TPA</label> | |
| <input type="file" id="signature_tpa" name="signature_tpa" accept="image/png, image/jpeg, image/jpg" required> | |
| <label style="margin-top: 20px;" for="signature_user">Upload Tanda Tangan Peserta</label> | |
| <input type="file" id="signature_user" name="signature_user" accept="image/png, image/jpeg, image/jpg" required> | |
| </fieldset> | |
| <button type="submit">Register</button> | |
| <script src="script.js"></script> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
Source Code style.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
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Nunito', sans-serif; | |
| color: #384047; | |
| } | |
| form { | |
| max-width: 300px; | |
| margin: 10px auto; | |
| padding: 10px 20px; | |
| background: #f4f7f8; | |
| border-radius: 8px; | |
| } | |
| h1 { | |
| margin: 0 0 30px 0; | |
| text-align: center; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="date"], | |
| input[type="datetime"], | |
| input[type="email"], | |
| input[type="number"], | |
| input[type="search"], | |
| input[type="tel"], | |
| input[type="time"], | |
| input[type="url"], | |
| textarea, | |
| select { | |
| background: rgba(255,255,255,0.1); | |
| border: none; | |
| font-size: 16px; | |
| height: auto; | |
| margin: 0; | |
| outline: 0; | |
| padding: 15px; | |
| width: 100%; | |
| background-color: #e8eeef; | |
| color: #8a97a0; | |
| box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; | |
| margin-bottom: 30px; | |
| } | |
| input[type="radio"], | |
| input[type="checkbox"] { | |
| margin: 0 4px 8px 0; | |
| } | |
| select { | |
| padding: 6px; | |
| height: 32px; | |
| border-radius: 2px; | |
| } | |
| button { | |
| padding: 19px 39px 18px 39px; | |
| color: #FFF; | |
| background-color: #4bc970; | |
| font-size: 18px; | |
| text-align: center; | |
| font-style: normal; | |
| border-radius: 5px; | |
| width: 100%; | |
| border: 1px solid #3ac162; | |
| border-width: 1px 1px 3px; | |
| box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; | |
| margin-bottom: 10px; | |
| } | |
| fieldset { | |
| margin-bottom: 30px; | |
| border: none; | |
| } | |
| legend { | |
| font-size: 1.4em; | |
| margin-bottom: 10px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| label.light { | |
| font-weight: 300; | |
| display: inline; | |
| } | |
| .number { | |
| background-color: #5fcf80; | |
| color: #fff; | |
| height: 30px; | |
| width: 30px; | |
| display: inline-block; | |
| font-size: 0.8em; | |
| margin-right: 4px; | |
| line-height: 30px; | |
| text-align: center; | |
| text-shadow: 0 1px 0 rgba(255,255,255,0.2); | |
| border-radius: 100%; | |
| } | |
| @media screen and (min-width: 480px) { | |
| form { | |
| max-width: 480px; | |
| } | |
| } | |
Source Code script.js :
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 submitFunction() { | |
| alert("Pendaftaran Telah Berhasil"); | |
| } |
C. Dokumentasi
Comments
Post a Comment