Web Tutorial
Now Reading
Cara Membuat Form Login Pada Website
0

Tutorial kali ini kita akan belajar bagaimana Cara Membuat Form Login Pada Website. Form login memang diperlukan dalam sebuah website, apalagi website e-commerce. Dengan adanya form login, kamu dapat membuat batasan dalam mengakses website yang kamu miliki. Ada beberapa momen dimana, tidak semua pengunjung dapat menggunakan fitur yang terdapat pada website.

 baca juga: Cara Membuat Menu Website Menggunakan HTML, CSS & Javascript

Koding Lengkap Form Login Website

See the Pen Cara Membuat Form Login Website by Bier Pinter (@Bierpinter) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

  1. Pertama kita mendesain menu terdahulu. Hover misalnya jika kita mengarahkan kursor ke menu login, maka akan muncul kotak warna biru tua.
    .navbar{
        font-size: 24px;
        height: 50px;
        width: 100%;
        padding-left: 50px;
        background-color: #0fb9ff;
    }
        .navbar a{
            text-decoration: none;
            color: #ffffff;
            padding: 15px 25px;
        }
    
        .navbar a:hover{
            background-color: #0e7ab4;
        }
  2. Kita beri style di bagian form seperti input dan label dengan memberi lebar kotak form dan ukuran huruf.
    input[type=text], input[type=password] {
            width: 100%;
            height: 50px;
            padding: 10px 20px;
            margin: 8px 0;
            display: inline-block;
            border:none;
      font-size: 18px;
            box-sizing: border-box;
        }
    
        button {
            background-color: #18ff61;
            color: white;
            padding: 10px 20px;
            margin: 8px 0;
            border: none;
      font-size: 18px;
            cursor: pointer;
            width: 100%;
        }
    
        button:hover {
            opacity: 0.8;
        }
    label{
        color: #636363;
        font-size: 18px;
    }
  3. Mengatur letak gambar atau avatar agar berada ditengah.
    .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }
    
        img.avatar {
            width: 25%;
            border-radius: 50%;
        }
  4. Mengatur background. background yang pertama sebelum background modal-content.
    .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.5); 
            padding-top: 55px;
        }
    
       
        .modal-content {
            background-color: #0fb9ff;
            margin: 3% auto 10% auto;
            border: 1px solid #888;
            width: 30%;
        }
  5. Mengatur letak dan memberi style pada tombol close.
    .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }
    
        .close:hover,
        .close:focus {
            color: #895d12;
            cursor: pointer;
        }
  6. Mengatur kecepatan login form tampil pada saat menu login ditekan.
    .animate {
            -webkit-animation: zoom 1s;
            animation: zoom 1s
        }
    
        @-webkit-keyframes zoom {
            from {-webkit-transform: scale(0)}
            to {-webkit-transform: scale(1)}
        }
    
        @keyframes zoom {
            from {transform: scale(0)}
            to {transform: scale(1)}
        }
  7. Pertama: pada saat menu login di tekan maka form login akan tampil. Kedua: script ini, berfungsi untuk menutup login form. Ketika pengguna mengklik diluar konten, maka form login juga akan tertutup.
     
    var modal = document.getElementById('click');//pertama
    
        //kedua
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

Demikian tutorial Cara Membuat Form Login Pada Website yang telah Saya berikan diatas, semoga artikel ini dapat bermanfaat.

What's your reaction?
Luar Biasa
0%
Suka Sekali
0%
Keren
0%
Kagum
0%
Jelek
0%
Tidak Suka
100%
About The Author
Isak Mandala

Leave a Response