Membuat Form Login dengan HTML5 dan CSS3

Form login berikut ini dibuat menggunakan HTML5 dan CSS3. Form berikut sudah diuji di Mozilla Firefox 10, Safari 5.0.1 dan Google Chrome 18.0.1010.1. Dari hasilnya, google chrome belum mendukung maksimal atribut "placeholder" untuk tag input. Silakan di copy untuk kepentingan pribadi, jangan menggunakan untuk kepentingan kemersil (menjual untuk memperoleh keuntungan) tanpa ijin dari yang membuat.



*klik DEMO untuk melihat hasilnya.

Script CSS nya :
<style>
/** login form by Jeanot Nahasan Nida **/
/** visit http://jeanotnahasan.blogspot.com **/
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>
Script HTML5 nya :
<!DOCTYPE html>
<html
<head>
 <title>Belajar HTML5 dan CSS3 | Jeanot Nahasan Nida</title>
</head>
<body>
<div id="contact">
    <h1>Login Form by JNC</h1>
    <form action="http://www.crazflo.web.id" 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>
    <center><p style="font-size:12px;">&copy; <a href = "http://jeanotnahasan.blogspot.com"> JNC </a> | 2012 <br/>
    <a href="">back to post</a></p>
    </center>
    </div>
    </body>
</html>

Semoga bermanfaat, jika ada kekurangan, silakan disampaikan via komentar. No SPAMMING!

About the Author

Jeanot Nahasan

Author & Editor

Web Developer dan Internet Marketer berdomisili di Yogyakarta. Menulis untuk mengenal dunia.

2 comments:

 

Jeanot Nahasan © 2015 - Designed by Templateism.com, Plugins By MyBloggerLab.com