Cara Membuat Form Register Menggunakan HTML dan CSS

by | Jun 14, 2015 | Web Design | 0 comments

Hai teman-teman ketemu lagi nih sama saya , gimana kabarnya ? semoga sehat selalu yah aminn, pada kesempatan kali ini saya akan berbagi mengenai contoh Form Register, Berikut adalah formulir pendaftaran yang sangat sederhana dan simple.

Hasilnya terlihat seperti ini:

Membuat Form Register atau Formulir Pendaftaran Menggunakan HTML & CSS

Kita Mulai dengan CSS nya hehe :

<style>
.registration{
               margin:auto; width:10%;
}
.registration form{
 width:220px;
 height:300px;
 background-color: black;
 padding: 10px 0px 0px 4px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 color: white;
 text-transform: uppercase;
 font-size: 11px;
 font-weight: bold;
 font-family: "Century Gothic";
 transition:all 1s;
 transition-property:all;
 transition-timing-function:ease-in-out 1s;
}
.registration form:hover{
                              background-color:#32D1E4;
}
.registration input, .registration select{
 width: 195px;
 height: 20px;
 margin: 3px 0px 0px 10px;
 border: 0px;
 font-weight: bold;
}
 
.registration input:focus{
 background-color:#9B9B9B;
}
 
.registration form label{
 margin: 5px 0px 0px 15px;
}
 
a{
 outline:none;
}
 
.register_button{
 width: 149px;
 height: 42px;
 background-color: orange;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 margin: 15px auto 0px auto;
 text-align: center;
 cursor: pointer;
 clear: both;
}
 
.register_button span{
 font-weight: normal;
 font-size: 28px;
 font-family: "Impact";
 line-height: 40px;
}
.register_button span a{
 text-decoration: none;
 color: white;
}
.register_button span a:hover{
 color: black;
}
 
span.error{
 margin-right: 20px;
 font-size: 9px;
 color: orange;
 height: 10px;
}
 
p.error{
 margin:0px 14px 0px 10px;
 font-size:9px;
 color:orange;
 height:6px;
 padding: 0px 0px 8px 0px;
 text-align:right;
 text-transform:none;
}

</style>

 

Berikut ini adalah HTMLNYA :

<body>
<div class="registration">
 <form>
 <label>Email</label>
 <input type="email" />
 <p class="error"><span>Email</span></p>
 
 <label>Kata Sandi</label>
 <input type="password" />
 <p class="error"><span>8 Karakter</span></p>
 
 <label>Negara</label>
 <input type="password" />
 <p class="error"><span>Ketik Disini</span></p>
 
 <label>Kota</label>
 <select name="country">
 <option>Indonesia</option>
 <option>Malaysia</option>
 </select> 
 
 <div class="register_button"><span><a href="#">Daftar</a></span></div>
 
 </form>
</div>
</body>

Teman-teman bisa mengganti warnanya sesuai dengan keinginan teman-teman, semoga bermanfaat J