Tugas 6 PWEB
Dokumentasi :
<!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>Login Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://use.fontawesome.com/6f05757a67.js"></script>
</head>
<style>
.bg {
background-image: linear-gradient(120deg, #ff6acd 0%, #ff98fa 100%);
color: rgb(255, 255, 255);
}
label {
font-weight: 600;
}
h5 {
width: 95%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 10px 0px;
}
h5 span {
background: #fff;
padding: 0 10px;
}
.btn-xl {
padding: 10px 16px;
font-size: 26px;
line-height: 1.33;
font-weight: bolder;
}
</style>
<body style="background-image: linear-gradient(120deg, hsl(293, 100%, 84%) 0%, #c2e9fb 100%);">
<div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center">
<div class="container p-0 card shadow border-0 rounded" style="max-width: 30rem;">
<div class="card-header bg">
<h3>Login</h3>
</div>
<form name="formPendaftaran" action="" onsubmit="return validateForm()" id="myForm">
<div class="form-group mt-3 mx-2">
<label>Username</label>
<input type="text" name="nama" placeholder="Username" class="form-control" required maxlength="10"
minlength="3">
</div>
<div class="form-group mt-3 mx-2">
<label>Password</label>
<input type="password" name="password" placeholder="Password" class="form-control" required
maxlength="10" minlength="4">
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary my-3 mx-2 btn-block " id="myBtn"
style="background-color: #94bbe9;">Login</button>
</div>
</form>
</div>
<div class="d-flex justify-content-center mt-4">
<a href="./contact.html" class="text-reset fw-bold fst-italic">
Contact Us
</a>
</div>
</div>
<script>
function validateForm() {
if (document.forms["formPendaftaran"]["nama"].value == "") {
alert("Fill name!");
document.forms["formPendaftaran"]["nama"].focus();
return false;
}
if (document.forms["formPendaftaran"]["password"].value == "") {
alert("Fill password!");
document.forms["formPendaftaran"]["password"].focus();
return false;
}
swal({
title: "Data Berhasil Tersimpan",
text: "Terima kasih telah mengisi form!",
icon: 'success',
}).then(okay => {
if (okay) {
window.location.href = "index.html";
}
});
return false;
}
</script>
</body>
</html>
Comments
Post a Comment