Membuat Form Login Dengan CSS dan HTML

Sabtu, 02 Juni 2012

Membuat Form Login Dengan CSS dan HTML

07.11 Science 1 comment

Form login untuk mengakses suatu file atau masuk pada alamat link tertentu merupakan hal yang sangat dibutuhkan bagi para pembuat sistem, berikut merupakan script css dan html untuk membuat form tersebut :

Kode CSS :

<style>
body{
font-family: sans-serif;
background: #999999;
color: #999999;
}
#contact div, h1, form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
#contact {
width: 400px; margin: auto; padding: 30px 30px; margin-top:60px;
background: #111111;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
}
#contact a{
text-decoration:none;
color:#666666;

}
h1 {
font-size: 26px; color: #999999; text-transform: uppercase;
text-align: center; margin: 0 0 30px 0; text-shadow: 0px 3px 2px #000000;
}
form {
margin-bottom:25px;
}
label {
float: left; margin: 10px 20px 0 0; width: 75px;
text-align: right; font-size: 14px; color: #999999;
font-weight:bold;
text-transform: uppercase; text-shadow: 0px 2px 0px #111111;
}

input {
width: 250px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
background: #666666;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(20%,#b2b2b2)); /* webkit */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 2px 0px #111111;-webkit-box-shadow: 0px 2px 0px #111111;
font-size: 14px; color: #444444; text-transform: uppercase; text-shadow: 0px -1px 0px #222222;
}
input::-webkit-input-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}
input:-moz-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}

input:focus{
background: #999999;
border: 1px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */ /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}

input[type=submit], input[type=reset] {
width: 100px; height: 30px; float: right; padding: 5px 5px; margin: 0 15px 0 0;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#b2b2b2)); /* webkit */
cursor: pointer;
}

input[type=submit]:hover, input[type=reset]:hover{
border: 3px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
</style>

Kode HTML :

<!DOCTYPE html>
<html
<head>
<title>Belajar HTML5 dan CSS3</title>
</head>
<body>
<div id="contact">
<h1>Login Form</h1>
<form action="www.indrajs.blogspot.com" method="post">
<fieldset>
<label for="name">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" />
<label for="password">Email:</label>
<input type="password" id="password" name="password" placeholder="your password" />
<input type="submit" value="Login" /> <input type="reset" value="Cancel" />
</fieldset>
</form>
</div>
</body>
</html>

Posted in: css