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

2 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

Tinggalkan Balasan

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