Pemrograman Web B Quiz 1: Membuat Form Pendaftaran

  

Quiz 1 Pemrograman Web B Membuat Form Pendaftaran

Andhika Ditya Bagaskara D.
5025201096


Untuk Quiz 1 kali ini, kami diminta untuk membuat form pendaftaran menggunakan HTML, CSS, dan JS.
Berikut ini link wesbite dan repository nya:


Berikut ini contoh tampilannya:



Berikut ini potongan source code nya:

index.html
<!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</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Formulir Pendaftaran</h1>
<h2>Pekan Olahraga dan Seni Guru TKA/TPA</h2>
<h2>Tahun 2020</h2>
<div class="content">
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td>NAMA PESERTA: </td>
<td><input type="text" placeholder="Masukkan nama peserta lomba" id="nama1" size="50"></td>
</tr>
<tr>
<td>TEMPAT TANGGAL LAHIR:</td>
<td><input type="text" placeholder="Masukkan tempat tanggal lahir" id="ttl" size="50"></td>
</tr>
<tr>
<td>UTUSAN UNIT TKA/TPA:</td>
<td><input type="text" placeholder="Masukkan unit" id="unit" size="50"></td>
</tr>
<tr>
<td>KELURAHAN/DESA:</td>
<td><input type="text" placeholder="Masukkan kelurahan / desa" id="kelurahan" size="50"></td>
</tr>
<tr>
<td>KECAMATAN:</td>
<td><input type="text" placeholder="Masukkan kecamatan" id="kecamatan" size="50"></td>
</tr>
<tr>
<td>NOMOR TELEPON:</td>
<td><input type="text" placeholder="Masukkan nomor telepon" id="nomor" size="50" maxlength="15"></td>
</tr>
<tr>
<div class="lomba">
<td>JENIS LOMBA:</td>
<td>
<input type="radio" id="lomba1" name="lomba" value="1">
<label for="lomba1">Tarik Tambang (4 Perempuan + 1 Laki = 5 Orang)</label><br>
<input type="radio" id="lomba2" name="lomba" value="2">
<label for="lomba2">Lari Estafet (4 Perempuan)</label><br>
<input type="radio" id="lomba3" name="lomba" value="3">
<label for="lomba3">Gobak Sodor (4 Perempuan)</label><br>
<input type="radio" id="lomba4" name="lomba" value="4">
<label for="lomba4">Tartil (1 orang Perwakilan TKA/TPA)</label><br>
<input type="radio" id="lomba5" name="lomba" value="5">
<label for="lomba5">Ceramah (1 orang perwakilan TKA/TPA)</label><br>
</td>
</div>
</tr>
</table>
<div class="confirm">
<h2>Konfirmasi:</h2>
</div>
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td>Kepala Unit TKA/TPA</td>
<td><input type="text" placeholder="Konfirmasi nama kepala unit" id="kepala" size="50"></td>
</tr>
<tr>
<td>Peserta Lomba:</td>
<td><input type="text" placeholder="Konfirmasi nama peserta lomba" id="nama2" size="50"></td>
</tr>
</table>
<div class="checbox">
<input type="checkbox" id="MyCheckbox" name="MyCheckbox" value="MyCheckbox">
<label required for="sk">Saya telah membaca dan menyetujui <a href="#">syarat dan ketentuan</a></label><br>
</div>
<div class="submitButton">
<input type="submit" id="sButton" class="button" value="Submit Form" onclick="submit()"/>
</div>
</div>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
style.css
* {
margin: 5px;
padding: 0px;
box-sizing: border-box;
font-family: 'Roboto';
font-weight: bold;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url(images/dgp.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.container h1, h2{
text-align: center;
margin: 10px;
color: aliceblue;
}
.container h1{
margin-top: 30px;
}
.container{
border-style: solid;
border-color: rgb(243, 188, 50);
border-width: 8px;
border-radius: 15px;
margin: 100px 100px;
}
.content {
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
color: aliceblue;
}
input {
margin-top: 10px;
}
.confirm{
margin-top: 30px;
}
.submitButton{
text-align: center;
}
.button {
padding: 5px 15px;
background-color: crimson;
border-radius: 8px;
border-style: none;
transition: 0.4s;
color: aliceblue;
}
.button:hover {
background-color: brown;
color: aliceblue;
cursor: pointer;
}
view raw style.css hosted with ❤ by GitHub
script.js
function submit(){
var nama1 = document.getElementById("nama1").value;
var ttl = document.getElementById("ttl").value;
var unit = document.getElementById("unit").value;
var kelurahan = document.getElementById("kelurahan").value;
var kecamatan = document.getElementById("kecamatan").value;
var nomor = document.getElementById("nomor").value;
var kepala = document.getElementById("kepala").value;
var nama2 = document.getElementById("nama2").value;
var letters = /^[A-Za-z]+$/;
var number = /^([0-9])+$/;
if(nama1==''||ttl==''||unit==''||kelurahan==''||kecamatan==''||nomor==''||kepala==''||nama2==''){
alert("Masukkan data dengan benar!");
}
else if(!letters.test(nama1)){
alert('Nama harus berupa alfabet!');
}
else if(!number.test(nomor)){
alert('Nomor telepon harus berupa angka!');
}
else if(nama2!=nama1){
alert("Konfirmasi nama tidak sama!");
}
else{
alert("Pendaftaran berhasil!")
window.location="https://kadigas.github.io/web-event/";
}
}
view raw script.js hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan Populer