Cara Membuat Form Login yang Menarik dengan Html dan CSS

Seotechman.com, Bogor 04/11/2019. Oke, Sesuai dengan judul pada tutorial kali ini yaitu: cara membuat form login yang menarik dengan HTML dan CSS.

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 sobat sudah melakukan proses sign up pada sebuah aplikasi atau web, maka sobat bisa masuk ke aplikasi atau web tersebut dengan cara memasukan email atau username pada kolom username, dan memasukan password pada kolom password.

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.

Cara Membuat Form Login yang Menarik dengan HTML, CSS, JAVASCRIPT

1. Untuk cara yang pertama, kita akan coba buat CSS nya terlebih dulu.

Perhatikan kode CSS dibawah:

Kode CSS

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 di blogger, sobat cukup tempatkan diatas //]]></b:skin> atau </style> kemudian simpan.

2. Kita lanjut ketahap berikutnya yaitu, JAVASCRIPT.

Bisa sobat lihat contoh dibawah:

Kode Javascript

// 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.

3. Lanjut ketahap terakhir yaitu, HTML.

Kode 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://www.seotutorial.eu.org/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.

Itulah tutorial cara membuat form login yang menarik dengan HTML dan CSS yang bisa kami bagikan.

Semoga bermanfaat!

Virm Aditya

Berita teknologi informasi terkini

Share this post