Script HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tugas Pemograman Web</title>
</head>
<link rel="stylesheet" href="login.css" type="text/css" />
<body>
<div id="form" class="form1">
<form id="form" class="form1" method="post" action="#">
<h1> LOGIN</h1>
<label> username <span class="small"> username/email</span></label>
<input type="text" name="username" class="highlight" />
<label> Password <span class="small"> Masukan password anda</span></label>
<input type="password" name="pass" id="pass" class="highlight" />
<button type="submit"> Login</button>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tugas Pemograman Web</title>
</head>
<link rel="stylesheet" href="login.css" type="text/css" />
<body>
<div id="form" class="form1">
<form id="form" class="form1" method="post" action="#">
<h1> LOGIN</h1>
<label> username <span class="small"> username/email</span></label>
<input type="text" name="username" class="highlight" />
<label> Password <span class="small"> Masukan password anda</span></label>
<input type="password" name="pass" id="pass" class="highlight" />
<button type="submit"> Login</button>
</form>
</div>
</body>
</html>
Script CSS
/* CSS Document */
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.form1 {
margin: 0 auto;
width: 400px;
padding: 1opx;
}
#form {
border: solid 2px #b7ddf2;
background: #ebf4fb;
}
#form h1 {
font-size:14px;
font-weight:bold;
margin-bottom: 8px;
border-bottom: solid 1px #b7ddf2;
}
#form p {
font-size:11px;
color:#666666;
margin-buttom :20px;
padding-bottom :10px;
}
form label {
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#form .small {
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#form input {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aaccfe4;
width:200px;
margin:2px 0 20px 10px;
}
#form input.highlight{
background:#f9f9f9;
border: solid 1px #cccccc;
padding:5px;
}
#form input.highlight:focus{
border:solid 1px #D9AD00;
background:#FFF7D7;
}
#form button{
margin-left:235px;
width:125px; height:31px;
background:#999999;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.form1 {
margin: 0 auto;
width: 400px;
padding: 1opx;
}
#form {
border: solid 2px #b7ddf2;
background: #ebf4fb;
}
#form h1 {
font-size:14px;
font-weight:bold;
margin-bottom: 8px;
border-bottom: solid 1px #b7ddf2;
}
#form p {
font-size:11px;
color:#666666;
margin-buttom :20px;
padding-bottom :10px;
}
form label {
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#form .small {
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#form input {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aaccfe4;
width:200px;
margin:2px 0 20px 10px;
}
#form input.highlight{
background:#f9f9f9;
border: solid 1px #cccccc;
padding:5px;
}
#form input.highlight:focus{
border:solid 1px #D9AD00;
background:#FFF7D7;
}
#form button{
margin-left:235px;
width:125px; height:31px;
background:#999999;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
untuk hasilnya akan seperti ini