Membuat Halaman Login Menggunakan HTML dan CSS

5/5 (2)
Cara Membuat Halaman Login Menggunakan HTML dan CSS
Membuat Halaman Login Menggunalan HTML dan CSS

Cara Membuat Halaman Login Menggunakan HTML dan CSS. – Sebuah website umumnya akan membutuhkan halaman login untuk mengakses halaman tertentu dalam sebuah website. Kali ini kita akan membahas Cara Membuat Halaman Login Menggunakan HTML dan CSS.

Baca juga: Efek Berputar pada Gambar dengan CSS

Membuat Halaman Login Menggunakan HTML dan CSS

Pertama buat file bernama index.html, lalu paste-kan code dibawah ini:

<div class="login-container">
<div class="login-box">
<div class="header">
<h3>LOGIN</h3>
</div>
<div class="content"><form action="#" method="#" name="login_form">
<div class="input-box"><input name="username" type="text" placeholder=" " />
username</div>
<div class="input-box"><input name="password" type="password" placeholder=" " />
password</div>
<div class="input-box"><button>SIGN IN</button>
<div><a href="#">Forgot your password?</a></div>
</div>
</form></div>
</div>
</div>

Setelah itu buat file lagi bernama codelatte.css, lalu sekali lagi, paste-kan kode dibawah ini:
body {
margin: 0;
padding: 0;
background: #e6e6e6;
font-family: verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.login-container:before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -8px;
display: inline-block;
height: 50%;
width: 98%;
background: rgba(255, 255, 255, 0.5);
z-index: -1;
border-radius: 10px;
}
.login-container .login-box {
padding: 20px 50px;
background: #fff;
border-radius: 10px;
width: 400px;
box-shadow: 2px 4px 4px #dcdcdc, -2px 4px 4px #dcdcdc;
}
.login-container .login-box .header {
height: 50px;
line-height: 50px;
position: relative;
color: #1f6b98;
}
.login-container .login-box .header:before {
content: "";
position: absolute;
left: -50px;
top: 0;
display: inline-block;
height: 100%;
width: 8px;
background: #1f6b98;
}
.login-container .login-box .content {
padding: 10px;
}
.login-container .login-box .content .input-box {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
display: inline-block;
width: 100%;
position: relative;
}
.login-container .login-box .content .input-box input {
width: 100%;
border: none;
border-bottom: 1px solid #ccc;
height: 40px;
line-height: 40px;
font-size: 0.9em;
outline: none;
background: transparent;
}
.login-container .login-box .content .input-box input:focus + span:first-of-type, .login-container .login-box .content .input-box input:not(:placeholder-shown) + span:first-of-type {
font-size: .8em;
top: -10px;
}
.login-container .login-box .content .input-box input:focus ~ span:last-of-type, .login-container .login-box .content .input-box input:not(:placeholder-shown) ~ span:last-of-type {
width: 100%;
}
.login-container .login-box .content .input-box span:first-of-type {
color: #ccc;
position: absolute;
top: 10px;
left: 0;
text-align-last: left;
pointer-events: none;
transition: all .1s linear;
}
.login-container .login-box .content .input-box span:last-of-type {
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0px;
background: #1f6b98;
transition: all .2s linear;
}
.login-container .login-box .content .input-box button {
width: 70%;
background: transparent;
border: 1px solid #ccc;
padding: 15px;
color: #ccc;
cursor: pointer;
}
.login-container .login-box .content .input-box a {
display: inline-block;
text-decoration: none;
color: #ccc;
font-size: 0.9em;
padding-top: 20px;
}

Sekarang lihat hasilnya! Kalian telah membuat Halaman Login Menggunakan HTML dan CSS. Sekarang kita modifikasi sedikit. Biasanya akan ada orang yang iseng men-submit kolom kosong saat melihat form. Kita akan mencegah nya menggunakan Javascript. Tambahkan kode dibawah ini ke dalam index.html:

<script type="text/javascript">
    function validateForm()
    {
        var a=document.forms["login_form"]["username"].value;
        var b=document.forms["login_form"]["password"].value;
        if (a==null || a=="",b==null || b=="")
        {
            alert("Semua kolom harus diisi :)");
            return false;
        }
    }
// Penjelasan: Disini kita membuat sebuah function untuk mengoreksi input dari form diatas.
// Apabila kolom input kosong, maka akan tampil alert berisi "Semua kolom harus diisi :)"
</script>

Jangan lupa untuk menambahkan onsubmit="return validateForm()" kedalam tag form, sehingga menjadi seperti ini:


<form action="#" method="#" name="login_form">/* Isi form */</form>

Sehingga keseluruhan file index.html akan menjadi:

<div class="login-container">
<div class="login-box">
<div class="header">
<h3>LOGIN</h3>
</div>
<div class="content"><form action="#" method="#" name="login_form">
<div class="input-box"><input name="username" type="text" placeholder=" " />
username</div>
<div class="input-box"><input name="password" type="password" placeholder=" " />
password</div>
<div class="input-box"><button>SIGN IN</button>
<div><a href="#">Forgot your password?</a></div>
</div>
</form></div>
</div>
</div>
<script type="text/javascript">
    function validateForm()
    {
        var a=document.forms["login_form"]["username"].value;
        var b=document.forms["login_form"]["password"].value;
        if (a==null || a=="",b==null || b=="")
        {
            alert("Semua kolom harus diisi :)");
            return false;
        }
    }
// Penjelasan: Disini kita membuat sebuah function untuk mengoreksi input dari form diatas.
// Apabila kolom input kosong, maka akan tampil alert berisi "Semua kolom harus diisi :)"
</script>

Kalian punya template portfolio keren yang ingin kalian publikasikan? Submit karya kalian di Code Archive. Code Archive menyediakan media untuk ide kreatif berupa portfolio dari desainer & developer yang tidak kalah kreatif pula.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

3 tanggapan untuk “Membuat Halaman Login Menggunakan HTML dan CSS

  • 13 Juli 2018 pada 12:43 PM
    Permalink

    Perfectly indited subject material, appreciate it for information.

    Balas
  • 11 Agustus 2018 pada 1:01 AM
    Permalink

    Spot on with this write-up, I seriously feel this web
    site needs much more attention. I’ll probably
    be back again to read through more, thanks for the info!

    Balas
  • 19 Juli 2019 pada 11:40 PM
    Permalink

    Wow hasilnya keren juga ya…

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *