Cara Membuat Form Login Seperti Facebook

membuat form login di html 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>

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>

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>

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
membuat form login facebook

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☺️

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel