Cara Membuat Form Login Seperti Facebook
MEMBUAT FORM LOGIN DI HTML
Apakah kalian ingin membuat sebuah form login yang mirip dengan tampilan Facebook? Sebenarnya, untuk membuat form login di html ini sangatlah mudah.Silahkan copy paste source code dibawah ini
<html>
<head>
<title>Form Login Facebook</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style type="text/css">
@font-face {
font-family: font;
src: url(facebolf.otf);
}
body{
background-color:#165ABF;
font-family:font;
}
h1{
color:white;
text-align:center;
margin-top:100px;
}
.username{
background-color:white;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:100%;
margin:auto;
height:40px;
}
input{
outline:none;
margin-left:10px;
background:none;
border:none;
width:100%;
height:100%;
}
.password{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-color:white;
:10px;
border-top:solid #ddd 1px;
width:100%;
margin:auto;
height:40px;
}
.tombol-login{
margin-top:10px;
background:none;
border:none;
border-radius:5px;
background-color:white;
:10px;
width:100%;
height:50px;
color:black;
background-color:#F4F4F4;
opacity:0.6;
}
a{
color:white;
text-decoration:none;
}
.back{
text-align:center;
}
.footer{
position:fixed;
margin-top:130px;
color:white;
text-align:center;
width:100%;
}
</style>
</head>
<body>
<h1>Facebook</h1>
<div class="username">
<input type="text" placeholder="Email or phone number"></input>
</div>
<div class="password">
<input type="text" placeholder="Password"></input>
</div>
<button class="tombol-login">Log In</button><br>
<p class="back"><a href=#>Back</a></p>
<div class="footer"><a href=#>Sign Up For Facebook</a></div>
</body>
</html>
<head>
<title>Form Login Facebook</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style type="text/css">
@font-face {
font-family: font;
src: url(facebolf.otf);
}
body{
background-color:#165ABF;
font-family:font;
}
h1{
color:white;
text-align:center;
margin-top:100px;
}
.username{
background-color:white;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:100%;
margin:auto;
height:40px;
}
input{
outline:none;
margin-left:10px;
background:none;
border:none;
width:100%;
height:100%;
}
.password{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-color:white;
:10px;
border-top:solid #ddd 1px;
width:100%;
margin:auto;
height:40px;
}
.tombol-login{
margin-top:10px;
background:none;
border:none;
border-radius:5px;
background-color:white;
:10px;
width:100%;
height:50px;
color:black;
background-color:#F4F4F4;
opacity:0.6;
}
a{
color:white;
text-decoration:none;
}
.back{
text-align:center;
}
.footer{
position:fixed;
margin-top:130px;
color:white;
text-align:center;
width:100%;
}
</style>
</head>
<body>
<h1>Facebook</h1>
<div class="username">
<input type="text" placeholder="Email or phone number"></input>
</div>
<div class="password">
<input type="text" placeholder="Password"></input>
</div>
<button class="tombol-login">Log In</button><br>
<p class="back"><a href=#>Back</a></p>
<div class="footer"><a href=#>Sign Up For Facebook</a></div>
</body>
</html>
PENJELASAN
Agar tampilan menyesuaikan layar
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
Source Code CSS agar halaman lebih terlihat mirip dengan tampilan Facebook
<style type="text/css">
@font-face {
font-family: font;
src: url(facebolf.otf);
}
body{
background-color:#165ABF;
font-family:font;
}
h1{
color:white;
text-align:center;
margin-top:100px;
}
.username{
background-color:white;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:100%;
margin:auto;
height:40px;
}
input{
outline:none;
margin-left:10px;
background:none;
border:none;
width:100%;
height:100%;
}
.password{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-color:white;
:10px;
border-top:solid #ddd 1px;
width:100%;
margin:auto;
height:40px;
}
.tombol-login{
margin-top:10px;
background:none;
border:none;
border-radius:5px;
background-color:white;
:10px;
width:100%;
height:50px;
color:black;
background-color:#F4F4F4;
opacity:0.6;
}
a{
color:white;
text-decoration:none;
}
.back{
text-align:center;
}
.footer{
position:fixed;
margin-top:130px;
color:white;
text-align:center;
width:100%;
}
</style>
@font-face {
font-family: font;
src: url(facebolf.otf);
}
body{
background-color:#165ABF;
font-family:font;
}
h1{
color:white;
text-align:center;
margin-top:100px;
}
.username{
background-color:white;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:100%;
margin:auto;
height:40px;
}
input{
outline:none;
margin-left:10px;
background:none;
border:none;
width:100%;
height:100%;
}
.password{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-color:white;
:10px;
border-top:solid #ddd 1px;
width:100%;
margin:auto;
height:40px;
}
.tombol-login{
margin-top:10px;
background:none;
border:none;
border-radius:5px;
background-color:white;
:10px;
width:100%;
height:50px;
color:black;
background-color:#F4F4F4;
opacity:0.6;
}
a{
color:white;
text-decoration:none;
}
.back{
text-align:center;
}
.footer{
position:fixed;
margin-top:130px;
color:white;
text-align:center;
width:100%;
}
</style>
Source Code HTML
<html>
<head>
<title>Membuat Form Login</title>
</head>
<body>
<h1>Facebook</h1>
<div class="username">
<input type="text" placeholder="Email or phone number"></input>
</div>
<div class="password">
<input type="text" placeholder="Password"></input>
</div>
<button class="tombol-login">Log In</button><br>
<p class="back"><a href=#>Back</a></p>
<div class="footer"><a href=#>Sign Up For Facebook</a></div>
</body>
</html>
<head>
<title>Membuat Form Login</title>
</head>
<body>
<h1>Facebook</h1>
<div class="username">
<input type="text" placeholder="Email or phone number"></input>
</div>
<div class="password">
<input type="text" placeholder="Password"></input>
</div>
<button class="tombol-login">Log In</button><br>
<p class="back"><a href=#>Back</a></p>
<div class="footer"><a href=#>Sign Up For Facebook</a></div>
</body>
</html>
Kalian dapat mengubah source code antara HTML dan CSS menjadi terpisah dengan cara membuat satu file khusus CSS atau sering disebut External Style Sheet. Caranya:
- Simpan source code CSS dengan nama style.css
- Simpan source code HTML dengan nama index.html
- Kemudian, tambahkan script di bawah ini pada source code html dibagian sebelum penutup tag head
<link rel="stylesheet" type="text/css" src="style.css">
Hasilnya
Jika masih bingung, kamu dapat mendownloadnya
Download
Itulah tutorial membuat form login di html dengan tampilan yang mirip dengan facebook.
Belum ada Komentar untuk "Cara Membuat Form Login Seperti Facebook"
Posting Komentar
Berkomentarlah dengan sopan☺️