Cara Membuat Form Login Keren Dengan HTML dan CSS

tokoria.id – Pada artikel ini kami akan membawakan tutorial cara membuat form login keren, mungkin sudah tidak perlu saya jelaskan apa itu form login karena kamu pasti sudah mengetahuinya. Yuk kita belajar bareng-bareng.

Langkah-Langkah Cara Membuat Form Login Keren

Sebelum masuk ke tutorial nya silahkan kamu siapkan bahan-bahan yang diperlukan dibawah ini:

  1. Font Awesome download disini.
  2. Silahkan kamu login ke cpanel kamu masing-masing > ke file manager > lalu buat folder baru dengan nama “login” Buat di bagian public_html biar gampang.
  3. Silahkan upload font awesome yg sudah kamu download ke folder “login” Yang sudah dibuat tadi lalu Extract,
  4.  Jika sudah disiapkan semua sekarang kita lanjut ke tutorialnya

1. Membuat File index.html

Sekarang kamu buaut file baru dengan nama “index.html” Lalu pastekan code di bawah ini ke dalam file “index.html” Nya.

<!DOCTYPE html>
<html lang="id">
 <head>
  <title>Form Login</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
 </head>
 <body>
  <div class="login">
   <div class="title-login">
    <h2>Form Login>/h2>
   </div>
   <form class="form-login">
    <div class="form-group">
     <label class="form-label">Username</label>
     <div class="input-group">
      <input type="text" class="form-control user" name="user" placeholder="Username...">
      <div class="input-group-icon">
       <label class="label-icon icon-user"><span class="fa fa-user"></span>Please enter your username</label>
       <span class="fa fa-user"></span>
      </div>
     </div>
    </div>
    <div class="form-group">
     <label class="form-label">Password</label>
     <div class="input-group">
      <input type="password" class="form-control pass" name="user" placeholder="Password...">
      <div class="input-group-icon">
       <label class="label-icon icon-pass"><span class="fa fa-lock"></span>Enter your password</label>
       <span class="fa fa-lock"></span>
      </div>
     </div>
    </div>
    <div class="form-group">
     <div class="form-footer">
      <button type="button" class="btn btn-login"><span class="fa fa-sign-in"></span> Login</button>
      <a href="#" class="btn btn-login-forgot">Forgot Password?</a>
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

Jika sudah silahkan kalian klik simpan

2. Membuat File CSS

Sekarang kita lanjut membuat file baru dengan nama “style.css” Lalu masukkan code css di bawah ini:

html{
 font-family: sans-serif;
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 text-size-adjust: 100%;
}
body{
 background-color: #56A0FB;
 font-size: 14px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 margin: 0;
}
*{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
*:after, *:before{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.login:after,
.login:before,
.form-login:after,
.form-login:before,
.title-login:after,
.title-login:before,
.input-group:after,
.input-group:before,
.form-group:after,
.form-group:before,
.form-footer:after,
.form-footer:before{
 content: '';
 display: table;
}
.login:after,
.form-login:after,
.title-login:after,
.input-group:after,
.form-footer:after,
.form-group:after{
 clear: both;
}
.login{
 padding: 15px;
 margin: 160px auto;
 border-radius: 1px;
 background-color: #ffffff;
 -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.40);
 -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.40);
 box-shadow: 1px 1px 3px rgba(0,0,0,.40);
}
@media (min-width: 768px){
 .login{
  width: 400px;
 }
}
.title-login{
 margin-left: -15px;
 margin-right: -15px;
 margin-top: -15px;
 margin-bottom: 15px;
 background-color: #4D98EC;
}
.title-login > h2{
 font-size: 26px;
 font-weight: 500;
 margin: 0;
 color: #555555;
 padding-right: 15px;
 padding-left: 15px;
 margin-top: 15px;
 margin-bottom: 15px;
}
.form-login{
 display: block;
 position: relative;
 width: 100%;
}
.input-group{
 border: 1px solid #CDCDCD;
 display: block;
 width: 100%;
 position: relative;
}
.form-group{
 margin-bottom: 12px;
}
.form-control{
 border: 0 none;
 display: block;
 position: relative;
 width: 90%;
 padding: 8px 11px;
 outline: 0;
}
.form-label{
 display: block;
 margin-bottom: 5px;
 font-size: 13px;
 padding-left: 1px;
}
.input-group > .form-control,
.input-group > .input-group-icon{
 float: left;
}
.input-group > .input-group-icon{
 padding: 8px 12px;
 display: block;
 color: #888888;
 border-left: 1px solid #c0c0c0;
}
.input-group-icon > .label-icon{
 display: inline-block;
 opacity: 0;
 position: absolute;
 right: 0;
 top: -23px;
 color: #c0c0c0;
 background-color: #000000;
 padding: 3px 10px;
 font-size: 11px;
 -webkit-transform: translateY(-10px);
 -moz-transform: translateY(-10px);
 transform: translateY(-10px);
 -webkit-transition: transform .5s ease-in-out;
 -moz-transition: transform .5s ease-in-out;
 transition: transform .5s ease-in-out;
}
.label-icon > .fa{
 padding-right: 5px;
 color: #365D68;
}
.label-icon:before{
 content: '';
 position: absolute;
 display: block;
 border-top: 5px solid #000000;
 border-right: 3px solid transparent;
 border-left: 3px solid transparent;
 bottom: -5px;
 right: 16px;
}
.user:focus + .input-group-icon .icon-user,
.pass:focus + .input-group-icon .icon-pass{
 opacity: 1;
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 transform: translateY(0);
}
.btn{
 display: inline-block;
 padding: 6px 15px;
 background-color: transparent;
 border: 1px solid #c0c0c0;
 font-size: 13px;
 cursor: pointer;
 outline: 0;
 -webkit-transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
 -moz-transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
 transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
}
.btn-login-forgot{
 float: right;
 border: 1px solid transparent;
 font-style: italic;
 color: #4495E7;
 padding-right: 5px;
 text-decoration: none;
}
.btn-login-forgot:hover,
.btn-login-forgot:focus{
 text-decoration: underline;
}
.btn-login:hover,
.btn-login:focus{
 background-color: #3784ED;
 color: #f2f2f2;
 border: 1px solid #128BF2;
}
.form-footer{
 margin-top: 5px;
}

Jika sudah silahkan kamu simpan, css ini berfungsi untuk merapikan dan mempercatik tampilan dari file index.html tadi

Silahkan kamu buka halaman/folder login yang sudah kita buat tadi, jika semua tahapan-tahapan diatas telah kamu ikuti dengan benar maka kamu akan melihat hasil kerja kita pada browser seperti gambar berikut.

Satu hal yang perlu diperhatikan dalam belajar HTML dan CSS seperti pada pembuatan Form Login yang kita buat ini, Saya harap kamu menulis setiap code HTML dan CSS sehingga kamu akan terbiasa dengan code-code tersebut. karena dalam mempelajari HTML dan CSS mengingat setiap tag, property dan value dari code tersebut sangat penting.

Sekian Tutorial dari kami tentang Cara Membuat Form Login Yang Keren semoga tutorial ini dapat membantu dalam membuat dan mempelajari ilmu tentang website.

Scroll to Top