Cara membuat halaman login website dengan html dan css

Question

Halaman login pada situs website merupakan salah satu element yang harus ada dan dimiliki agar pemilik situs dapat masuk dan mudah membuat serta mengedit halaman tertentu. Pada tutorial ini akan mengajarkan bagaimana cara membuat halaman login sederhana dengan HTML dan CSS. Berikut langkahnya.

Table of Contents Show

Cara Membuat Login Sederhana Menggunakan HTML dan CSS
Membuat Desain Form Login HTML dengan CSS
1. Buat file login.html
2. Membuat File style.css
3. Buat Direktori Gambar dan masukan contoh gambar
4. Hasil Akhir
Download Source Code

Sekarang ini kita akan membuat halaman login sederhana menggunakan HTML sebagai Markup dan CSS sebagai style pada halaman kita ini Jangan lupa untuk siapkan Text Editor kalian seperti Visual Studio Code / Sublime Text / Atom.

1. Yang Pertama siapkan 2 file berbeda yaitu : index.html dan style.css. Kemudian hubungkan CSS nya

2. Kamu dapat melihat contoh kode HTML yang telah penulis buat.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Login Sederhana</title>
</head>
<body>
    <div class="kotak">
        <div class="name">
            <p> Username </p>
            <input type="text">
        </div>
        <div class="pw">
            <p> Password </p>
            <input type="password">
        </div>
        <div class="button">
            Login
        </div>
        <div class="reset">
            Reset
        </div>


    </div>
</body>
</html>

Keterangan : Fungsi dari ” <link href=”https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap” rel=”stylesheet”> ” Untuk memanggil font dari google, Jika kalian tidak mau bisa dihapus

3. Disini kita mempunya div kotak yang diisi di dalamnya ada kotak : name, pw, button & reset fungsi dari kotak ini sendiri sebagai pembungkus yang akan kita eksekusi di CSS nya

4. Jika sudah buka file style.css kamu dan masukkan kode CSS di bawah ini

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 29%, rgba(0, 212, 255, 1) 100%);
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
}
.kotak {
    width: 550px;
    height: 350px;
    /* border-radius: 20px; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
    transition: 0.8 hove
}
.kotak:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}
.kotak .name {
    padding : 50px;
    color : white;
}
.kotak input[type="text"],
.kotak input[type="password"] {
    height: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

}
.kotak .pw {
    color : white;
    margin-bottom: 40px;
}
.kotak .button,
.kotak .reset {
    display: inline-block;
    margin: auto;
    width: 80px;
    border : 2px solid white;
    background-color : white;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
}

.reset:hover, 
.button:hover {
    font-size: 20px;
    border-radius: 20px;
}

5. Jika kamu ingin mengubah isi dalam CSS itu silakan, Sesuaikan dengan keinginan kamu saja. Button pada login dan reset ini sama sekali tidak berfungsi jika di klik, Ini hanya tampilannya saja

Bagi teman-teman yang saat ini sedang belajar web desain, tutorial kali ini mengenai cara membuat desain form login di html dengan CSS mungkin akan membantu sebagai referensi desain form login pada aplikasi web yang akan kalian buat.

Desain form yang di buat murni menggunakan CSS (Cascading Style Sheets), kalo tidak ingin ribet ya pakai aja framework CSS seperti bootstrap.

Form login pada umumnya hanya terdapat dua field yaitu username dan password kemudian ada 2 tombol login/submit dan reset.

Kita akan membuat setiap elemen html tersebut, lalu kemudian tinggalkan kita definisikan perintah CSS nya.

Buatlah file baru dengan nama login.html di teks editor dengan isi kode seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Desain Form Login HTML Dengan CSS - www.kelasprogrammer.com</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
     <div id="container">
        <form>
            <img id="logo" src="gambar/logo.png">
            <label for="fname">Username:</label>
            <input type="text" name="Username" placeholder="Masukan Username">
            <label for="lname">Password:</label>
            <input type="password" name="Password" placeholder="Masukan Password">
            <input type="submit" value="Login">
            <input type="reset" value="Reset">
          </form>
     </div>
</body>
</html>

Jika di buka file login.html di browser maka tampak hasilnya seperti berikut:

Belum ada style-nya sama sekali karena memang kita belum membuatnya, mari kita lanjut pada langkah kedua.

2. Membuat File style.css

Dalam direktori yang sama buat file baru dengan nama style.css seperti berikut:

body{
     font-family: sans-serif;
     background:  #ccfff2;
}

#logo{
    width: 100%;
    margin:auto;
    padding:auto;
    padding-bottom: 20px;
}

#container{
    width: 360px;
    background: white;
    margin:180px auto;
    padding: 30px 20px;
    border-radius: 6px;
}
input[type=text],
input[type=password]{
    font-size: 15px;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-size: 30px;
    background-position: 5px 5px;
    background-repeat: no-repeat;
    padding-left: 40px;
    border-radius: 5px;
}
input[type=text]{
    background-image: url('gambar/user.png');
}
input[type=password]{
    background-image: url('gambar/password.png');
}
        
input[type=text]:focus,
input[type=password]:focus {
    border: 2px solid #555;
}

input[type=submit],
input[type=reset]{
    font-size: 15px;
    background: #009973;
    color: white;
    border: white 3px solid;
    border-radius: 5px;
    padding: 12px 20px;
    cursor:pointer;
    margin-top: 10px;
}

input[type=submit]:hover,
input[type=reset]:hover{
    opacity:0.9;
}

input[type=reset]{
    background:  #999999;
}

Struktur perintah CSS terdiri dari

1. Selector

Selector adalah elemen html yang akan di buat style-nya

Contoh : body, #logo, #container, input[type=text],input[type=password] dan lainnya merupakan selector

logo dan container menggunakan tanda # karena menggunakan atribut ID. Kita juga bisa mengganti dengan atribut class dan menggunakan tanda . (titik).

2. Declaration

Declaration adalah bagian perintah CSS dalam blok {} yang mana perintah-perintah tersebut yang akan mendefinisikan style elemen yang digunakan.

Declaration terdiri dari properti dan nilai (value).

Sebagai contoh perhatikan pada selector body

Dimana terdapat properti font-family yang memiliki nilai sans-serif. Ini berarti seluruh elemen yang berada dalam tag <body> akan menggunakan jenis huruf sans-serif.

Contoh berikutnya pada selector #container terdapat properti width dengan nilai 360px. Ini artinya elemen container nantinya akan memiliki lebar 360px. Begitu juga dengan perintah-perintah lainnya.

Agar teman-teman paham bagaimana cara membuat style menggunakan css kalian harus memahami penggunaan properti-properti ini untuk membuat style CSS-nya.

3. Buat Direktori Gambar dan masukan contoh gambar

Buat folder gambar kemudian masukan contoh-contoh gambar ke dalam foder tersebut.

gambar di sini sebagai gambar logo website kita dan icon pada field username dan password. Saya mencontohkan dengan menggunakan logo blog saya ‘Kelas Programmer’.

tentu saja kalian bisa menggunakan gambar logo dan icon yang lain.

4. Hasil Akhir

Hasil akhirnya akan seperti pada gambar berikut:

Sekian pembahasan kali ini mengenai cara membuat desain form login di html dengan menggunakan CSS. Dengan tutorial sederhana ini akan membuat tampilan halaman login website kalian menjadi keren dan lebih menarik.