Minggu, 15 April 2012

Styling Form With CSS

setelah searching2 di google akhirnya nemu juga membuat style form dengan css yang lumayan menarik dari
http://jsfiddle.net/MVLZd/

isinya kira-kira seperti ini :
untu HTML nya :
<div id="stylized" class="myform">
  <form id="form" name="form" method="post" action="index.html">
  <h1>Sign-up form</h1>
   <p>This is the basic look of my form without table</p>

     <label>Name
 <span class="small">Add your name</span>
   </label>
 <input type="text" name="name" id="name" />

 <label>Email
 <span class="small">Add a valid address</span>
   </label>
 <input type="text" name="email" id="email" />

  <label>Password
 <span class="small">Min. size 6 chars</span>
   </label>
 <input type="text" name="password" id="password" />

     <button  type="submit">Sign-up</button>
 <div class="spacer"></div>

   </form>
 </div>


lalu cssnya :
body{
   font-family:"Lucida Grande""Lucida Sans Unicode"VerdanaArialHelveticasans-serif;
   font-size:12px;
 }
 ph1formbutton{border:0margin:0padding:0;}
 .spacer{clear:bothheight:1px;}
 /* ----------- My Form ----------- */
 .myform{
   margin:auto;
   width:400px;
   padding:14px;
 }
 
   /* ----------- stylized ----------- */
   #stylized{
       border:solid 2px #b7ddf2;
       background:#ebf4fb;
   }
   #stylized h1 {
       font-size:14px;
       font-weight:bold;
       margin-bottom:8px;
   }
   #stylized p{
       font-size:11px;
       color:#666666;
       margin-bottom:20px;
       border-bottom:solid 1px #b7ddf2;
       padding-bottom:10px;
   }
   #stylized label{
       display:block;
       font-weight:bold;
       text-align:right;
       width:140px;
       float:left;
   }
   #stylized .small{
       color:#666666;
 display:block;
       font-size:11px;
       font-weight:normal;
       text-align:right;
       width:140px;
   }
   #stylized input{
       float:left;
       font-size:12px;
       padding:4px 2px;
       border:solid 1px #aacfe4;
       width:200px;
       margin:2px 20px 10px;
   }
   #stylized button{
       clear:both;
       margin-left:150px;
       width:125px;
       height:31px;
       background:#666666 url(img/button.pngno-repeat;
       text-align:center;
       line-height:31px;
       color:#FFFFFF;
       font-size:11px;
       font-weight:bold;
   }



dan hasilnya :

Tidak ada komentar:

Posting Komentar