KUIS 1 - PWEB
KUIS 1 PWEB -Form Pendaftaran
Muhammad Raihan Athallah
5025201206
Kelas PWEB B
Pada pertemuan kali ini diadakan kuis untuk membuat sebuah form menggunakan html,css, dan javascript.
Untuk hasil deploy bisa mengunjungi link berikut
https://raihanathallah.github.io/KUIS-1---PWEB/
Tampilan dari form registration
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<form class="form-inline" onsubmit=" return myFunction()">
<label class="required">* required </label>
<div class="form-group">
<input type="text" class="form-control inputArea" id="nama" placeholder="Masukkan nama" />
</div>
<div class="form-group">
<input type="text" class="form-control inputArea" id="tanggal" placeholder="Masukkan tanggal lahir *" />
</div>
<div class="form-group">
<input type="text" class="form-control inputArea" id="unit" placeholder="Masukkan unit" />
</div>
<div class="form-group">
<input type="text" class="form-control inputArea" id="kelurahan" placeholder="Kelurahan" />
</div>
<div class="form-group">
<input type="text" class="form-control inputArea" id="kecamatan" placeholder="Kecamatan" />
</div>
<div class="form-group">
<input type="text" class="form-control inputArea" id="phn" placeholder="Phone Number *" />
</div>
<div class="form-group">
<input type="checkbox" class="inputArea" id="pilihan1" value="Tarik Tambang" />
<label for="pilihan1">Tarik Tambang</label><br />
</div>
<div class="form-group">
<input type="checkbox" class="inputArea" id="pilihan2" value="Lari Estafet" />
<label for="pilihan2">Lari Estafet</label><br />
</div>
<div class="form-group">
<input type="checkbox" class="inputArea" id="pilihan3" value="Gobak Sodor" />
<label for="pilihan3">Gobak Sodor</label><br />
</div>
<div class="form-group">
<input type="checkbox" class="inputArea" id="pilihan4" value="Tartil" />
<label for="pilihan4">Tartil</label><br />
</div>
<div class="form-group">
<input type="checkbox" class="inputArea" id="pilihan5" value="Ceramah" />
<label for="pilihan5">Ceramah</label><br />
</div>
<div class="form-group">
<label for="pilihan5">Upload Tanda Tangan</label><br />
<input type="file" class="inputArea" id="pilihan5" value="Ceramah" />
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
</div>
<script>
function myFunction() {
var nama = document.getElementById("nama").value;
var tanggal = document.getElementById("tanggal").value;
var unit = document.getElementById("unit").value;
var kelurahan = document.getElementById("kelurahan").value;
var kecamatan = document.getElementById("kecamatan").value;
var phn = document.getElementById("phn").value;
var pilihan1 = document.getElementById("pilihan1").value;
var pilihan2 = document.getElementById("pilihan2").value;
var pilihan3 = document.getElementById("pilihan3").value;
var pilihan4 = document.getElementById("pilihan4").value;
var pilihan5 = document.getElementById("pilihan5").value;
console.log(nama);
console.log(tanggal);
console.log(unit);
console.log(kelurahan);
console.log(kecamatan);
console.log(phn);
console.log(pilihan1);
console.log(pilihan2);
console.log(pilihan3);
console.log(pilihan4);
console.log(pilihan5);
return false;
}
</script>
</body>
</html>
style.css
/* all */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--main-blue: #71b7e6;
--main-purple: #9b59b6;
--main-grey: #ccc;
--sub-grey: #d9d9d9;
}
body {
display: flex;
height: 100vh;
justify-content: center; /*center vertically */
align-items: center; /* center horizontally */
background: linear-gradient(135deg, var(--main-blue), var(--main-purple));
padding: 10px;
}
/* container and form */
.container {
max-width: 700px;
width: 100%;
background: #fff;
padding: 25px 30px;
border-radius: 5px;
}
.form-group {
/* background-color: #71b7e6; */
width: 100%;
margin-top: 20px;
}
.form-control {
padding: 5px;
border-radius: 12px;
width: 100%;
}
button {
width: 100%;
background-color: #9b59b6;
margin-top: 30px;
border-radius: 12px;
height: 30px;
}
Komentar
Posting Komentar