Membuat Form Login sederhana dengan HTML dan CSS
Selamat pagi menjelang siang kepada seluruh pengunjung blog anakrantau27.blogspot.co.id/ kali ini admin ingin berbagi sedikit tentang Membuat Form Login sederhana dengan HTML dan CSS , menurut admin mungkin teman teman lebih cakep dalam hal mendesign tampilan sebuah web, tapi tidak apalah jika admin berbagi sedikit bagi temen temen yang belum bisa membuat tampilan sebuah form login
Jadi untuk Design Formnya bisa di angkot sendiri di bawah yeah...!!
Kemudian untuk scriptnya
Jadi untuk Design Formnya bisa di angkot sendiri di bawah yeah...!!
Kemudian untuk scriptnya
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SISTEM INFORMASI ADMINISTRASI PAM DI DESA ANJANI</title>
<style>
#frame{
width:330px;
background-color:green;
border-radius:14px;
margin:0px auto;
margin-top:200px;
border:6px solid #000000;
}
.label{
line-height:40px;
font-family: arial;
font-size:20px;
text-align:center;
background-color:#99ff33;
border-top-left-radius:14px;
border-top-right-radius:14px;
font-weight: bold;
}
.inputan{
padding:12px 80px;
background-color:#336633;
color:white;
font-family:arial;
font-weight:bold;
font-size:12px;
}
.pot{
padding:10px 20px;
background-color:#99ff33;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
font-family:arial;
color: white;
text-align: center;
}
.input{
line-height:20px;
border-color:1px solid;
margin-top:8px;
margin-bottom:8px;
}
.ok{
background-color:#333399;
width:330px;
height:40px;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
font-family: arial;
font-weight: bold;
color:white;
}
</style>
</head>
<body>
<div id="frame">
<div class="label">SILAHKAN LOGIN</div>
<div class="inputan">
<label>Username</label><br>
<input type="text" name="Username" size="23" placeholder="Username" class="input"><br>
<label>Password</label><br>
<input type="password" name="password" size="23" placeholder="Password" class="input">
</div>
<div class="tombol">
<input type="submit" name="login" value="LOGIN" class="ok"/>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SISTEM INFORMASI ADMINISTRASI PAM DI DESA ANJANI</title>
<style>
#frame{
width:330px;
background-color:green;
border-radius:14px;
margin:0px auto;
margin-top:200px;
border:6px solid #000000;
}
.label{
line-height:40px;
font-family: arial;
font-size:20px;
text-align:center;
background-color:#99ff33;
border-top-left-radius:14px;
border-top-right-radius:14px;
font-weight: bold;
}
.inputan{
padding:12px 80px;
background-color:#336633;
color:white;
font-family:arial;
font-weight:bold;
font-size:12px;
}
.pot{
padding:10px 20px;
background-color:#99ff33;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
font-family:arial;
color: white;
text-align: center;
}
.input{
line-height:20px;
border-color:1px solid;
margin-top:8px;
margin-bottom:8px;
}
.ok{
background-color:#333399;
width:330px;
height:40px;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
font-family: arial;
font-weight: bold;
color:white;
}
</style>
</head>
<body>
<div id="frame">
<div class="label">SILAHKAN LOGIN</div>
<div class="inputan">
<label>Username</label><br>
<input type="text" name="Username" size="23" placeholder="Username" class="input"><br>
<label>Password</label><br>
<input type="password" name="password" size="23" placeholder="Password" class="input">
</div>
<div class="tombol">
<input type="submit" name="login" value="LOGIN" class="ok"/>
</div>
</div>
</body>
</html>
Selamat Mencoba semoga berhasil
Leave a Comment