Membuat Form Login Menggunakan HTML dan CSS
Seperti yang sudah dijelaskan pada postingan sebelumnya bahwa form adalah tempat pengisian data sebelum diproses oleh sistem.Dan tidak lupa tentang pembuatan form menggunakan html. Kali ini saya akan mempercantik tampilan form login menggunakan CSS.
Untuk lebih jelasnya, kalian dapat melihat gambar dibawah ini:
Kode html dan css:
Tulis kode seperti berikut lalu save dan beri nama form.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<marquee direction="right" scrollamount="10">
<h1 text-align="center">DISKON 20% UNTUK PEMBELIAN DIATAS 150K</h1>
</marquee>
<div class="loginbox">
<img src="avatar1.jpg" class="avatar">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="text" name="" placeholder="Enter Username">
<input type="submit" name="" value="login">
<a href="#">Lost your password?</a><br>
<a href="#">Don't have an account?</a>
</form>
</div>
</body>
</html>
Tulis kode seperti berikut lalu save dan beri nama form.html
Kemudian tulis kode CSS seperti berikut dan beri nama form.css
@charset "utf-8";
/* CSS Document */
body
{
margin: 0;
padding: 0;
height: 10vh;
background-image: url(aku.jpg);
background-size: cover;
background-position: center;
font-family: "ARIAL";
}
.loginbox
{
width: 320px;
height: 420px;
background: #000;
color: #FFFFFF;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar
{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
h1
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p
{
margin: 0;
padding: 0;
font-weight: bold;
}
Hasil:
Seperti yang sudah dijelaskan pada postingan sebelumnya bahwa form adalah tempat pengisian data sebelum diproses oleh sistem.Dan tidak lupa tentang pembuatan form menggunakan html. Kali ini saya akan mempercantik tampilan form login menggunakan CSS.
Untuk lebih jelasnya, kalian dapat melihat gambar dibawah ini:
Kode html dan css:
Tulis kode seperti berikut lalu save dan beri nama form.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<marquee direction="right" scrollamount="10">
<h1 text-align="center">DISKON 20% UNTUK PEMBELIAN DIATAS 150K</h1>
</marquee>
<div class="loginbox">
<img src="avatar1.jpg" class="avatar">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="text" name="" placeholder="Enter Username">
<input type="submit" name="" value="login">
<a href="#">Lost your password?</a><br>
<a href="#">Don't have an account?</a>
</form>
</div>
</body>
</html>
Tulis kode seperti berikut lalu save dan beri nama form.html
Kemudian tulis kode CSS seperti berikut dan beri nama form.css
@charset "utf-8";
/* CSS Document */
body
{
margin: 0;
padding: 0;
height: 10vh;
background-image: url(aku.jpg);
background-size: cover;
background-position: center;
font-family: "ARIAL";
}
.loginbox
{
width: 320px;
height: 420px;
background: #000;
color: #FFFFFF;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar
{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
h1
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p
{
margin: 0;
padding: 0;
font-weight: bold;
}
Hasil:
Demikian pembuatan form ala Dcoding semoga bermanfaat.
Dan terimaksih untuk semua:)
Komentar
Posting Komentar