[Tutorial] Membuat Form Login Modal Dengan Html, Css, Javascript
Penerbit: ( Seo Techman )

[Tutorial] Membuat Form Login Modal Dengan Html, Css, Javascript

Membuat Form Login Modal Dengan Html, Css, Dan Javascript
Oke, Sesuai dengan judul pada tutorial kali ini yaitu "Membuat Form Login Modal". Mungkin dari sobat semua ada beberapa yang sudah mengerti bahkan tidak asing lagi kalau mendengar kata form login.

Apa itu form login?
Form Login yaitu, proses masuk ke jaringan komputer dengan memasukkan identitas akun minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses. Antara username dan password keduanya saat digunakan untuk login harus tepat jangan sampai salah ketik, karena keduanya saling terkait dan tidak bisa dipisahkan.

Biasanya username/akun pengguna tidak pernah diubah karena merupakan identitas unik, tetapi password/ kata sandi dapat diubah sesuai keperluan untuk menjaga keamanan akun.

Atau definisi login adalah menu yang digunakan untuk masuk ke dalam sebuah aplikasi atau sebuah web. Jika kamu sudah melakukan proses sign up pada sebuah aplikasi atau web, maka kamu bisa masuk ke aplikasi atau web tersebut dengan cara memasukan email atau username pada kolom username, dan memasukan password pada kolom password.

Nah itulah sedikit pengertian atau arti kata dari Form Login.

Mungkin disini kami tidak akan banyak basa-basi, oleh karena itu mari kita langsung saja ke tahap pembuatannya.

Apa saja yang kita perlukan? Kita hanya perlu membuat Css, Javascript, dan Html.

Live Demo

Untuk tahap yang pertama, kita akan coba buat Css nya terlebih dulu.


body {font-family: Arial, Helvetica, sans-serif;}

/* 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: #F57F17;
  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: #FF9800;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px #333;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0 1px 3px #333;  /* Firefox 3.5 - 3.6 */
  box-shadow:         0 1px 2px #333;
}

/* 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;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

span.psw {
  float: right;
  color: #ffffff;
  padding-top: 16px;
}
span.pswm {
  float: right;
  color: #666;
  padding-top: 16px;
}
span.psw a{
  color: #ffc107;
}
label {
   color: #ffffff;
}
/* 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-image: linear-gradient(to right, #B1A0F5 0, #B1A0F5 50%, #FFEB3B 50%, #FFEB3B 100%);
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border-radius: 8px;
  border: 1px solid #ddd;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 20px;
  top: -15px;
  color: #f5f5f5;
  background: #4CAF50;
  padding: 0 11.5px 0;
  border-radius: 50px;
  font-size: 35px;
  font-weight: bold;
  -webkit-box-shadow: 0 1px 2px #333;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0 1px 3px #333;  /* Firefox 3.5 - 3.6 */
  box-shadow:         0 1px 2px #333;
}

.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%;
  }
}

Silahkan sobat kopas saja Css diatas, jika menggunakan hosting sobat buat saja file dan berinama style.css. Namun apabila sobat ingin memasangnya diblog, sobat cukup tempatkan diatas //]]></b:skin> atau </style> dll kemudian simpan.

Kita lanjut ketahap kedua yaitu, Javascriptnya. Bisa sobat lihat contoh dibawah:


// 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";
    }
}

Sama seperti tahap yang pertama, jika sudah langsung saja sobat simpan. Lanjut ketahap terakhir yaitu, Html.


<div id="id01" class="modal">
  
  <form class="modal-content animate" action="/action_page.php" method="post">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="https://livein.website/tools/avatar2.png" alt="Avatar" class="avatar">
    </div>

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>
        
      <button type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="pswm">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>

Jika semua file sudah sobat buat, sekarang waktunya untuk melihat seperti apa hasilnya.
NOTE: Syntax diatas bisa sobat apresiasikan dan ubah sesuai selera masing-masing.
Mungkin itu saja tutorial yang bisa kami bagikan, semoga bermanfaat.

Load comments

0 Response to "[Tutorial] Membuat Form Login Modal Dengan Html, Css, Javascript"

Post a Comment