Select Menu

Combined Post

Mag Posts

Combined Posts 2

Mag Post 2

2 Column Post

Simple Post

Simple Post 2

New Carousel

Video Posts

» » Script formulir sederhana


faepopae 08.36 0

<!DOCTYPE html>
<html>
<head>

<style>
.registration form{
 width:220px;
 height:330px;
 background-color: Darkslategray;
 padding: 10px 0px 0px 4px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
border-radius: 10px 10px 10px 10px; /*radius dimulai dari atas kiri hingga kanan bawah*/
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;

border : 1px solid: black;
 color: white;
 text-transform: uppercase;
 font-size: 11px;
 font-weight: bold;
 font-family: "Century Gothic";
}
/*selanjutnya masuk ke registrasi input, diawali dengan mengatur panjang lebarnya kolom*/
.registration input, .registration select{
 width: 195px;
 height: 20px;
 margin: 3px 0px 0px 10px;
 border: 0px;
 font-weight: bold;
}

.registration input:focus{
 background-color: white;
}

.registration form label{
 margin: 5px 0px 0px 15px;
}

a{
 outline:none;
}
/*lalu, selanjutnya kita memodifikasi tampilan tombol registrasinya, perhatikan bentuk penulisannya*/
.register_button{/* kenapa ditulis .register_button{ karna id markupnya berupa class"register_button" dan kalo dirubah, kemungkinan kecil eror*/
 width: 149px;
 height: 42px;
 background-color: Olivedrab;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
  border-radius: 10px 10px 10px 10px;
 -moz-border-radius: 10px 10px 10px 10px;/*moz adalah khusus untuk browser mozila*/
 -webkit-border-radius: 10px 10px 10px 10px;/*dan ini untuk browser lain seperti opera, safari dll*/
 margin: 15px auto 0px auto;
 text-align: center;
 cursor: pointer;
 clear: both;
}
/* dan ini adalah css untuk tulisan yang ada dalam tombol*/
.register_button span{
 font-weight: normal;
 font-size: 28px;
 font-family: "Verdana";/*dan ini untuk memilih jenis font*/
 line-height: 40px;
}
.register_button span a{
 text-decoration: none;
 color: white;
}
.register_button span a:hover{
 color: black;
}
/*selanjutnya, kita memodifikasi pesan eror yang muncul*/
span.error{
 margin-right: 20px;
 font-size: 9px;
 color: olivedrab;
 height: 10px;
}

p.error{
 margin:0px 14px 0px 10px;
 font-size:9px;
 color:orangered;
 height:6px;
 padding: 0px 0px 8px 0px;
 text-align:right;
 text-transform:none;
}
/*dan selesai... :)
</style>
</head>
<body>

<div class="registration">
 <form>
 <label>Email kamu </label>
 <input type="text" />
 <p class="error"><span>Email ini udah ada yang punya bro</span></p>

 <label>Password</label>
 <input type="text" />
 <p class="error"><span>Minimal 1000 karakter</span></p>

 <label>Password [ulangi]</label>
 <input type="text" />
 <p class="error"><span>Ulangi paswordnya weh</span></p>

 <label>Year of Birth</label>
 <input type="text" />
 <p class="error"><span>tanggal lahir nya bro</span></p>

 <label>Kampung</label>
 <select name="country">
 <option>blukar</option>
 <option>Kolong jembatan</option>
<option>Jembatan</option>
<option>Ancol</option>
<option>alam gaib</option>
 </select> 

 <div class="register_button"><span><a href="#">REGISTER</a></span></div>

 </form>
</div>


</body>
</html>

«
Next
Posting Lebih Baru
»
Previous
Posting Lama

Tidak ada komentar

Leave a Reply