Cara membuat tampilan form login keren menggunakan HTML dan CSS

Mr.XxX
January 16, 2021

Assalamualaikum wr.wb,selamat malam pecinta dunia IT dan dunia coding:V,pada malam ini mimin akan membagikan free source code untuk membuat form login page dengan tampilan transparan.kaya doi mimin masih transparan/samar²:V

Ok langsung saja ke materinya,jadi sebelum masuk ke pembahasan source codenya.mimin akan memberikan pengertian form login page dan fungsinya

Form login adalah halaman/page login user sebelum mengakses halaman dashboard

Lalu fungsinya apa itu min?ya tentunya supaya website dapat diakses oleh user yang sudah terdaftar pada website tersebut.biasanya form login user itu menggunakan bahasa pemrograman PHP dan MYSQL,namun kali ini mimin membagikan cara membuat form login user dengan tampilan yang keren yang hanya menggunakan HTML dan CSS dan disini mimin akan membagikan trick supaya ketika si user klik login bisa redirect ke halaman yang dituju.langsung saja mimin bagikan source code:

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>Form Login Page</title>
     <link href="https://j.top4top.io/p_1814hedl60.jpg" rel="icon">
     <link rel="stylesheet" type="text/css">
   </head>
   <style type="text/css">
      @import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
       body{
       	margin: 0;
           padding: 0;
           font-family: sans-serif;
           background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6I0u6KpCsSr7NCJVLJlZZN91FNHMpmbD5wg&usqp=CAU');
           background-size: cover;
         }
        .login-box{
           width: 280px;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
           color: white;
        }
       .login-box h1{
           float: left;
           font-size: 40px;
           border-bottom: 6px solid #4caf50;
           margin-bottom: 50px;
           padding: 13px 0;
        }
       .textbox{
          width: 100%;
          overflow: hidden;
          font-size: 20px;
          padding: 8px 0;
          margin: 8px 0;
          border-bottom: 1px solid #4caf50;
       }
       .textbox i{
           width: 26px;
           float: left;
           text-align: center;
       }
       .textbox input{
           border: none;
           outline: none;
           background: none;
           color: white;
           font-size: 18px;
           width: 80%;
           float: left;
           margin: 0 10px;
        }
        .btn{
           width: 100%;
           background: none;
           border: 2px solid #4caf50;
           color: white;
           padding: 5px;
           font-size: 18px;
           cursor: pointer;
           margin: 12px 0;
         }
   </style>
   <body>
      <form action="tes.html" method="get">
         <div class="login-box">
            <h1>Login</h1>
         <div class="textbox">
         <i class="fas fa-user"></i>
         <input type="text" placeholder="Username">
         </div>
       <div class="textbox">
         <i class="fas fa-lock"></i>
         <input type="password" placeholder="Password">
       </div>
         <input type="button" class="btn" value="Login Now">
       </div>
     </form>
  </body>
</html>

Nah salin kode tersebut lalu pastekan ke aplikasi coding kalian dan simpan dengan ekstensi/format file index.html,kenapa harus index min?kenapa gak login?karena form login tersebut akan kita tampilkan di halaman depan/halaman utama pada website.nah rahasianya agar bisa ke redirect ke halaman selanjutnya adalah dengan menambahkan tag <form action="#disini isi nama file yang mau sobat tuju" method="#bisa get/post">

Berikut adalah hasil scriptnya tadi ketika di run:



Mimin rasa cukup disini pembahasan pada malam ini,jika ada pertanyaan/masih bingung kalian bisa mengirimkan pertanyaan kalian di kolom komentar.sekian dari saya wa'assalamualaikum wr.wb