Membuat Form Login Sederhana dengan HTML dan CSS
Tentu kita tidak asing lagi dengan istilah login dalam dunia website. Halaman login sendiri dibuat untuk memberikan akses kepada user agar bisa menikmati fitur/layanan pada website tersebut yang biasanya sering kita temui pada sosial media ataupun e-commerce.
Form login adalah area halaman awal dimana pada halaman tersebut seorang user diharuskan mengisi username dan password, contohnya, sebelum kita masuk ke beranda facebook pasti sebelumnya kita berada di halaman form login yang mengharuskan kita untuk mengisi username dan password, setelah kita mengisi username dan passwordnya dengan benar maka kita akan dialihkan ke halaman beranda facebook tersebut.
Berikut ini adalah contoh source code untuk membuat halaman login sederhana menggunakan HTML dan CSS. untuk code editor bisa menggunakan VS Code, Sublime, notepad++ dll.
1. Buat file html dan simpan dengan nama login.html dan copy code dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: sans-serif;
background: #aec6cf;
}
h1 {
text-align: center;
/*ketebalan font*/
font-weight: 300;
}
.kotak_login {
width: 350px;
background: white;
border-radius: 10px;
/*meletakkan form ke tengah*/
margin: 80px auto;
padding: 30px 20px;
}
label {
font-size: 11pt;
}
.form_login {
/*membuat lebar form penuh*/
box-sizing: border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
.tombol_login {
background: #779ecb;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}
.link {
color: #232323;
text-decoration: none;
font-size: 10pt;
}
</style>
</head>
<body>
<h1>Membuat Form Login Dengan HTML & CSS</h1>
<div class="kotak_login">
<center>LOGIN</center>
<form>
<label>Username</label>
<input type="text" name="username" class="form_login" placeholder="Username atau Email">
<label>Password</label>
<input type="text" name="password" class="form_login" placeholder="Password">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
<input type="submit" class="tombol_login" value="LOGIN">
<br/>
<br/>
<center>
<a class="link" href="http://draweb.epizy.com">kembali</a>
</center>
</form>
</div>
</body>
</html>
berikut adalah hasilnya :
Berikut demo live programnya.
Comments
Post a Comment