基于css的表单模板

代码

/*  General styles  */
body  {  margin :  0 ;  padding :  0 ;  font :  80%/1.5 Arial,Helvetica,sans-serif ;  color :  #111 ;  background-color :  #FFF ;   }
h2  {  margin :  0px ;  padding :  10px ;  font-family :  Georgia, "Times New Roman", Times, serif ;  font-size :  200% ;  font-weight :  normal ;  color :  #FFF ;  background-color :  #CCC ;  border-bottom :  #BBB 2px solid ;   }
p#copyright  {  margin :  20px 10px ;  font-size :  90% ;  color :  #999 ;   }
 
/*  Form styles  */
div.form-container  {  margin :  10px ;  padding :  5px ;  background-color :  #FFF ;  border :  #EEE 1px solid ;   }
 
p.legend  {  margin-bottom :  1em ;   }
p.legend em  {  color :  #C00 ;  font-style :  normal ;   }
 
div.errors  {  margin :  0 0 10px 0 ;  padding :  5px 10px ;  border :  #FC6 1px solid ;  background-color :  #FFC ;   }
div.errors p  {  margin :  0 ;   }
div.errors p em  {  color :  #C00 ;  font-style :  normal ;  font-weight :  bold ;   }
 
div.form-container form p  {  margin :  0 ;   }
div.form-container form p.note  {  margin-left :  170px ;  font-size :  90% ;  color :  #aaa ;   }
div.form-container form fieldset  {  margin :  10px 0 ;  padding :  10px ;  border :  #DDD 1px solid ;   }
div.form-container form legend  {  font-weight :  bold ;  color :  #666 ;   }
div.form-container form fieldset div  {  padding :  0.25em 0 ;   }
div.form-container label, 
div.form-container span.label  {  margin-right :  10px ;  padding-right :  10px ;  width :  150px ;  display :  block ;  float :  left ;  text-align :  right ;  position :  relative ;   }
div.form-container label.error, 
div.form-container span.error  {  color :  #C00 ;   }
div.form-container label em, 
div.form-container span.label em  {  position :  absolute ;  right :  0 ;  font-size :  120% ;  font-style :  normal ;  color :  #C00 ;   }
div.form-container input {  border :  #999 1px solid ;   }
div.form-container input.error  {  border-color :  #C00 ;  background-color :  #FEF ; border-width : 1px ;   }
div.form-container input:focus,
div.form-container input.error:focus, 
div.form-container textarea:focus  {     background-color :  #FFC ;  border-color :  #FC6 ;   }
div.form-container div.controlset label, 
div.form-container div.controlset input  {  display :  inline ;  float :  none ;   }
div.form-container div.controlset div  {  margin-left :  170px ;   }
div.form-container div.buttonrow  {  margin-left :  180px ;   }

代码

< div  id ="wrapper" >  
 
     < h2 > 基于css的表单模板 </ h2 >  
 
     < div  class ="form-container" >  
    
     < div  class ="errors" >  
         < p >< em > 错误提示信息: </ em ></ p >  
         < ul >  
             < li > 用户名不能为空！ </ li >  
             < li > 国家不能为空！ </ li >  
         </ ul >  
         < p > 表单  < strong > 没有 </ strong >  保存成功. </ p >  
     </ div >  
 
     < form  action ="#"  method ="post" >  
    
     < p  class ="legend" >< strong > 注意: </ strong > 带*号的为必填字段.( < em > * </ em > ) </ p >  
    
     < fieldset >  
         < legend > 用户基本信息 </ legend >  
             < div >< label  for ="uname"  class ="error" > 用户名  < em > * </ em ></ label >   < input  id ="uname"  type ="text"  name ="uname"  value =""  class ="error"   /></ div >  
             < div >< label  for ="email" > 邮箱地址 </ label >   < input  id ="email"  type ="text"  name ="email"  value =""   />  
                 < p  class ="note" > 我们不会将你的邮箱告诉任何人.  </ p >  
             </ div >  
    
             < div >< label  for ="fname" > 称呼  < em > * </ em ></ label >   < input  id ="fname"  type ="text"  name ="fname"  value =""  size ="50"   /></ div >  
     </ fieldset >  
    
     < fieldset >  
         < legend > 联系信息 </ legend >  
             < div >< label  for ="address1" > 地址 1  < em > * </ em ></ label >   < input  id ="address1"  type ="text"  size ="50"   /></ div >  
             < div >< label  for ="address2" > 地址 2 </ label >   < input  id ="address2"  type ="text"  size ="50"   /></ div >  
             < div >< label  for ="country"  class ="error" > 国家  < em > * </ em ></ label >   < input  id ="country"  type ="text"  name ="country"  value =""  class ="error"  size ="12"   />  
                 < p  class ="note" > 请选择正确的国家信息. </ p >  
             </ div >  
             < div >< label  for ="telephone" > 电话 </ label >   < input  id ="telephone"  type ="text"  size ="3"   />  -  < input  type ="text"  size ="3"   />  -  < input  type ="text"  size ="4"   />  
                 < p  class ="note" > (###) - ### - #### </ p >  
             </ div >  
     </ fieldset >  

     < fieldset >  
         < legend > 属性 </ legend >  
             < div >  
                 < label  for ="type" > 类型  < em > * </ em ></ label >  
                 < select  id ="type" >  
                     < optgroup  label ="Type of Whatever" >  
                         < option > Corporate </ option >  
                         < option > Individual </ option >  
                     </ optgroup >  
                 </ select >  
             </ div >  
             < div  class ="controlset" >  
                 < span  class ="label" > 状态  < em > * </ em ></ span >  
                 < input  name ="approved"  id ="approved"  value ="1"  type ="checkbox"   />   < label  for ="approved" > Approved </ label >  
                 < input  name ="pending"  id ="pending"  value ="1"  type ="checkbox"   />   < label  for ="pending" > Pending Applications </ label >  
                 < input  name ="actives"  id ="actives"  value ="1"  type ="checkbox"   />   < label  for ="actives" > Active Service </ label >  
             </ div >             
 
             < div  class ="controlset" >  
                 < span  class ="label" > 本地设置 </ span >  
                 < input  name ="radio1"  id ="radio1"  value ="1"  type ="radio"   />   < label  for ="radio1" > Option 1 </ label >  
                 < input  name ="radio1"  id ="radio2"  value ="1"  type ="radio"   />   < label  for ="radio2" > Option 2 </ label >  
                 < input  name ="radio1"  id ="radio3"  value ="1"  type ="radio"   />   < label  for ="radio3" > Option 3 </ label >  
             </ div >             
 
             < div  class ="controlset" >  
                 < span  class ="label" > 其它  < em > * </ em ></ span >  
                 < div >  
                     < input  name ="approved"  id ="check1"  value ="1"  type ="checkbox"   />   < label  for ="check1" > Some Option 1 </ label >   < br  />  
                     < input  name ="pending"  id ="check2"  value ="1"  type ="checkbox"   />   < label  for ="check2" > Some Option 2 </ label >   < br  />  
                     < input  name ="actives"  id ="check3"  value ="1"  type ="checkbox"   />   < label  for ="check3" > Some Option 3 </ label >   < br  />  
                 </ div >  
             </ div >             
     </ fieldset >  
    
     < fieldset >  
         < legend > 首选项 </ legend >  
             < div >  
                 < label  for ="desc" > 描述  < em > * </ em ></ label >  
                 < textarea  id ="desc"  name ="desc"  cols ="30"  rows ="4" ></ textarea >  
             </ div >  
             < div >  
                 < label  for ="info" > 地址信息 </ label >  
                 < textarea  id ="info"  name ="info"  cols ="40"  rows ="5" ></ textarea >  
             </ div >  
     </ fieldset >  
    
     < div  class ="buttonrow" >  
         < input  type ="submit"  value ="提交"  class ="button"   />  
     </ div >  
 
     </ form >  
    
     </ div > <!--  /form-container  -->  
    
     < p  id ="copyright" >

    这是一个基本的表单模板，更多请看： < a  href ="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/"  title ="Nidahas: Forms markup and CSS - Revisited" > this blog article </ a > . </ p >  
     < br />
    

</ div > <!--  /wrapper  -->  

转载：http://cssrain.cn/demo/cssSkill/表单模板/demo.html

转载于:https://www.cnblogs.com/iloong/archive/2010/09/07/1820448.html