DESAIN GRAFIS & WEB : MEMBUAT FORM LOGIN MENGGUNAKAN HTML & CSS
Assalamu'alaikum Warahmatullahi Wabarakatuh
Hyy guyss, kali ini saya akan memposting tentang membuat form login menggunakan HTML & CSS. Setiap website pasti akan membutuhkan halaman
login dan register untuk mengetahui siapa saja member dari anggota website
tersebut. Kali ini saya akam memberikan tutorial pembuatan Form login dan
diperindah dengan CSS.
Berikut
adalah script html. beri nama file ini dengan nama login.html
<html>
<head>
<title> Form Login Type 1 </title>
<link
href="style1.css" rel="stylesheet"
type="text/css" >
</head>
<body>
<div
id="utama">
<div class="header">
<div class="header_isi">
<div class="gambar">
<form action="login.php"
method="POST">
<img src="WINDA.jpg"
width="1000" height="120">
<input type="text"
name="username" placeholder="Username"
class="login_regis"> <br />
<input type="password"
name="password" placeholder="Password"
class="login_regis"> <br />
<div class="chexbox">
<input type="checkbox"
name="chek" > Remember me <br />
</div>
<input type="Submit"
name="login" value="MULAI"
class="tombol_login">
</form>
</div>
</div>
<div class="copyright">
</div>
</div>
</body>
</html>
1. pada text yang
berwarna hijau untuk memanggil file style.css / atau style
halaman .
2. pada text yang
berwarna merah berfungsi untuk membuat Form input login,
dan action pada tag pembuka form berfungsi untuk menujukan halaman
yang ingin dituju.
3. pada text yang
berwarna biru tua berfungsi sebagai input type text dan
password unutk mengisi nama dan password yang telah terdaftar.
4. pada text yang
berwarna kuning (input type submit) berfungsi untuk
memindahkan halaman yang ingin dituju.
Selanutnya kita akan
membuat tampilan atau style pada website. buat file dengan nama style1.css.
Berikut Scriptnya
:
#utama {
background-image: url("WIN.jpg");
background-size: cover;
height: 680px;
}
.header_isi {
width: 335px;
height: 230px;
padding: 180px 0px 90px 480px;
}
.gambar {
background-color: rgba(170, 114, 123 ,0.6);
height: 330px;
border: 2px solid rgba(170, 114, 123 ,1);
}
img {
width: 250px;
height: 100px;
margin-left: 45px;
margin-top: 15px;
}
.login_regis {
height: 40px;
width: 260px;
text-align: center;
color: white;
font-size: 17px;
border-radius: 8px;
background-color: rgba(225, 255, 255, 0.4);
border: 3px solid #0288D1;
margin-left: 42px;
margin-top: 10px;
}
.tombol_login {
width: 260px;
height: 30px;
text-align: center;
background-color: #0288D1;
color: white;
font-size: 17px;
border: 2px solid #0288D1;
border-radius: 8px;
margin-top: 20px;
margin-left: 42px;
}
.chexbox {
font-size: 15px;
color: white;
margin-left: 45px;
margin-top: 10px;
}
.login_regis:hover {
border: 3px solid #fff;
}
.tombol_login:hover {
background-color: white;
color: #0288D1;
border: 2px solid white;
}
.copyright {
margin-top: 150px;
color: #0288D1;
font-size: 17px;
margin-left: 10px;
}
a {
text-decoration: none;
color: black;
}
.copyright a {
color: #0288D1;
} 1. Pada #utama backgroung images : Url(" (Beri nama gambarnya.jpg/png/DLL ) ");
jika sudah membuat Script yang seperti diatas, dan telah diSave dengan nama Style1.css , maka hasilnya akan seperti ini :
Okee guyss, itu hasilnya dan kamu telah berhasil
membuat Form login.
Semoga bermanfaat, dan terima kasih.
Wasaalamu'alaikum Warahmatullahi wabarakatuh....
Wasaalamu'alaikum Warahmatullahi wabarakatuh....
Komentar
Posting Komentar