MASIGNASUKAv101
4922683097822459718

Cara membuat form login dengan JavaScript

Cara membuat form login dengan JavaScript
Add Comments
9/29/19
Hallo teman-teman semua, kali ini saya akan berbagi sedikit Source Code membuat form login dengan JavaScript. Seperti yang kita ketahui dan yang pernah saya jelaskan di postingan saya sebelumnya. Yang belum baca silahkan baca dulu Cara membuat tampilan website sederhana menggunakan HTML dan CSS . JavaScript merupakan sebuah bahasa komputer atau bahasa pemograman yang biasanya di gunakan pada website agar supaya website tersebut menjadi lebih interaktif dan dinamis. JavaScript ini juga merupakan bahasa pemrograman client side. 


Penggunaan kode JavaScript tidak harus selalu ada dalam pembuatan suatu website. JavaScript ini juga bisa di bilang sebagai perilaku dari sebuah website.Contoh sederhananya seperti begini. HTML adalah seorang Perempuan Lalu CSS adalah Makeup perempuan itu agar lebih cantik lalu JavaScript sendiri bisa di bilang sebagai Etitut dari Perempuan tersebut, Bagaimana menurut kalian adakah pertanyaan ?. Oke langsung saja ya teman-teman silahkan ambil Source code yang saya bagikan di bawah ini.

HTML, CSS dan JAVASCRIPT



<!DOCTYPE html>
<html>
<style>
/* 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%;
}
button:hover {
    opacity: 0.8;
}
/* 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: 10%;

    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%;
    }
}
</style>
<body>
<h2><a href="https://juanomatheus.blogspot.com/2019/09/cara-membuat-form-login-dengan-javascript.html">Cara membuat form login dengan JavaScript
</a><br>
juanomatheus.blogspot.com</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="Close Modal">&times;</span>
      <img src="img_avatar2.png" alt="Avatar" 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>
<script>
// Dapatkan modalnya
var modal = document.getElementById('id01');
// Ketika pengguna mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

Oke teman-teman Source code tentang membuat form login dengan JavaScript. Silahkan kalian ambil dan rombak sesuka hati kalian masing-masing. Source code yang di atas adalah source code yang sederhana dan masih penh dengan kekurangan silakan temna-teman menabahkan dengan ide kreatif kalian masing-masing. Terimakasih
OmJuan.com

Adalah Situs berbagi Source Code gratis dan Pembahasan seputar HTML, CSS, JavaScript, PHP, Bootstrap.

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih

  1. mantap gan. ditunggu tutorial slnjutnya yang lbih mantap tapi pake demo nya gan biar lebih jos.
    salam dari kelasmat.com

    ReplyDelete
    Replies
    1. Siap gan,.. Terimakasih banyak Sarannya. Sudah saya tambahkan

      Delete