Membuat Form Login Sederhana

adiansyah | 20 December 2019 |5,790 views | html, web | 1 Comment

Membuat Form Login Sederhana menggunakan bahasa pemograman HTML untuk membuat formnya dan CSS untuk Tampilannya agar lebih menarik,

kali ini saya akan belajar membuat form login yang sederhana bagi kalian yang sudah mahir bisa abaikan saja karena tutorial ini hanya untuk pemula ya guys…..

Kita Langsung aja Siapkan editor kalian kita langsung ke intinya aja

buat file : login.php

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Form Login</title>
    <style type="text/css">
        body{
            font-family:sans-serif;
            background-color: silver;
        }
        .wrap{
            width: 400px;
            margin: auto;
            padding: 20px;
            background-color:white;
            border-radius: 10px;
            text-align: center;
            box-shadow: 3px 3px 5px black;
            margin-top: 100px;
            margin-bottom: 20px;

        }
        .judul{
            color: black;
            font-size: 30px;
            height: 50px;
            text-align: left;
            padding: 20px

        }
        input{
            width: 90%;
            height: 30px;
            padding:5px;
            border-radius: 5px;
            margin: 10px;
            font-size: 14px;
            border-left: 5px solid green;
            border-top: 1px solid black;
            border-right: 1px solid black;
            border-bottom: 1px solid black;

        }
        button{
            padding: 10px;
            color: white;
            background-color: green;
            border:none;
            font-size: 16px;
            border-radius: 10px;
            margin-top: 15px;
            float: right;
            margin-right: 10px;

        }
        button:hover{
            background-color: tomato;
            border:none;
            transition: all 0.5s ease-in;
        }
        .clear{
            clear: both;
        }
    </style>
  </head>
  <body>
    <div class="wrap">
        <div class="judul">
            &raquo; Login Admin
        </div>
        <div class="content">
            <form action="proses_login.php" method="post">
            <input type="text" name="username" placeholder="Isi Username">
            <input type="password" name="password" placeholder="Isi Password">
            <div class="right">
                <button type="submit"> `Login</button>
                <button type="Reset">`Reset</button>
            </div>
            <div class="clear"></div>
            </form>
        </div>
    </div>
    <footer><p align="center"> <i>Copyright &copy; 2019 by https://webmediabelajar.com</i></p></footer>
  </body>
</html>

Hasilnya Jika ditampilkan di browser seperti ini :

Nah Mudahan bisa membantu bagi kalian yang ingin membuat form login sederhana, mudah-mudahan tutorial saya bisa membantu yaaa…. silahkan tuliskan di kolom komentar jika ada pertanyaan… terimakasih

untuk lebih Jelasnya bisa lihat video dibawah yaa.