Cara Membuat Form Login

Di Bawah ini kita akan mempelajari cara membuat formulir login responsif dengan CSS.

Klik tombol login untuk membuka form login:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
}

/* Atur gaya untuk semua button */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

/* Gaya ekstra untuk cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Pusatkan gambar dan posisikan 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; /* Sembunyikan secara default */
  position: fixed; /* Tetap di tempat */
  z-index: 1; /* Tetapkan di atas */
  left: 0;
  top: 0;
  width: 100%; /* Lebar maksimumm */
  height: 100%; /* Tinggi maksimum */
  overflow: auto; /* Aktifkan scroll jika perlu */
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0,0.4); /* Hitam dengan opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% dari atas, 15% dari bawah dan tengah */
  border: 1px solid #888;
  width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}

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

/* Tambahkan Animasi Zoom */
.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)}
}

/* Ubah gaya untuk tombol span dan cancel pada layar ekstra kecil */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
</style>
</head>
<body>

<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" method="post">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="https://dosenit.com/wp-content/uploads/2021/01/apatar.jpg" 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="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>

<script>
// Tambahkan modal
var modal = document.getElementById('id01');

// Saat pengguna mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

Cara Membuat Formulir Login

Langkah 1) Tambahkan HTML:

Tambahkan gambar ke dalam container dan tambahkan input(dengan label yang cocok) untuk setiap field. Bungkus elemen <form> di sekitarnya untuk memproses inputan.

Contoh

  <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://dosenit.com/wp-content/uploads/2021/01/apatar.jpg" 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="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>

Langkah 2) Tambahkan CSS:
Contoh

/* Bordered form */
form {
  border: 3px solid #f1f1f1;
}

/* Full-width inputs */
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;
}

/* Atur style untuk semua buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Tambahkan efek hover untuk button */
button:hover {
  opacity: 0.8;
}

/* Gaya ekstra untuk tombol cancel (merah) */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Pusatkan gambar avatar di dalam container ini */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Gambar Avatar  */
img.avatar {
  width: 40%;
  border-radius: 50%;
}

/* Tambahkan padding ke containers */
.container {
  padding: 16px;
}

/* Untuk teks "Forgot password"  */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Ubah gaya untuk tombol span dan cancel pada layar ekstra kecil */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

Cara Membuat Formulir Masuk Modal

Langkah 1) Tambahkan HTML:
Contoh

<!-- Tombol untuk membuka formulir masuk modal -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>

<!-- Modalnya -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">&times;</span>

  <!-- Konten Modal -->
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <img src="https://dosenit.com/wp-content/uploads/2021/01/apatar.jpg" 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="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* The Modal (background) */
.modal {
  display: none; /* Sembunyikan secaradefault */
  position: fixed; /* Tetapkan tempatnya */
  z-index: 1; /* Tetapkan di atas */
  left: 0;
  top: 0;
  width: 100%; /* Lebar maksimum */
  height: 100%; /* Tinggi maksimum */
  overflow: auto; /* Aktifkan scrolling jika perlu */
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0,0.4); /* Warna Hitam dengan opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% dari atas dan tengah */
  border: 1px solid #888;
  width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}

/* The Close Button */
.close {
  /* Posisikan di pojok kanan atas di luar modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button saat mengarahkan kursor*/
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Tambahkan Animasi Zoom  */
.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)}
}

Tip: Kita juga bisa menggunakan javascript berikut untuk menutup modal dengan mengklik di luar konten modal (dan tidak hanya dengan menggunakan tombol “x” atau “cancel” untuk menutupnya):

Contoh

<script>
// Dapatkan modal
var modal = document.getElementById('id01');

// Saat pengguna mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

form How To html dan css

Cara Membuat Form Login

Cara Membuat Formulir Login

Cara Membuat Formulir Masuk Modal

Cara Membuat Button “Kembali Ke Atas”

Cara Membuat Sign Up Form

You may also like