Cara Membuat Form Login dengan Modal
Berhentilah kau menjadi bayangan, karna semu tak ingin kuharapkan. Dan nyata tak ingin ku khayalkan, karena angan belum tentu jadi harapan. Halo semuanya, masih di aktif terus kan ya dengan kumpulan-kumpulan artikel dan panduan kita disini? Pastinya ya hehe. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Form Login dengan Modal.
Dari banyak situs, kadang kita melihat situs yang terdapat fitur login dan tak ada fitur login nya. Dan dari situs yang mempunyai fitur login kebanyakan telah memakai Form Login dengan Modal, atau yang dimaksud Form Login akan muncul ketika kita meng-klik tombol fitur login kemudian akan keluar fitur pop-up yang berisikan form login tersebut. Oke seketika saja, berikut Cara Membangun Form Login dengan Modal:
Pertama-tama-tama siapkan file index.html nya.
Kemudian, isi di bagian <body> tag-tag HTML berikut.
<h2>Modal Login Form</h2>
<button onclick=document.getElementById('id01').style.display='block' style=width:auto;>Login</button>
<div id=id01 class=modal>
<form class=modal-content animate action=action_page.php>
<div class=imgcontainer>
<span onclick=document.getElementById('id01').style.display='none' class=close title=Cara Membangun Form Login dengan Modal>times;</span>
<img src=img_avatar2.png alt= masih di aktif terus kan ya dengan kumpulan Cara Membangun Form Login dengan Modal class=avatar>
</div>
<div class=container>
<label><b>Username</b></label>
<input type=text placeholder=Enter Username name=uname required>
<label><b>Password</b></label>
<input type=password placeholder=Enter Password name=psw required>
<button type=submit>Login</button>
<input type=checkbox checked=checked> Remember me
</div>
<div class=container style=background-color:#f1f1f1>
<button type=button onclick=document.getElementById('id01').style.display='none' class=cancelbtn>Cancel</button>
<span class=psw>Forgot <a href=#>password?</a></span>
</div>
</form>
</div>
Bagi CSS nya, silahkan isi property-property berikut.
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
Dan yang terakhir, isi di sebelum tutup tag </body> javascript seperti berikut.
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = none;
}
}
</script>
Bagaimana teman-teman? Lumayan gampang bukan?
Demikianlah bagi panduan kali ini mengenai Cara Membangun Form Login dengan Modal.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
