CSS+DIV 接触（1）：表单的制作

想学习CSS+DIV 首先想到了表单怎么办。

还好现在互联网发达。 找了两个我觉得不错的收藏。呵呵。

1：

 

< html >
< head >
< script >
     function  suckerfish(type, tag, parentId) 
    {
         if  (window.attachEvent) 
        {
        window.attachEvent( " onload " ,  function () {
         var  sfEls  =  (parentId == null ) ? document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);type(sfEls);});
        }
    }
    sfFocus  =   function (sfEls) {
         for  ( var  i = 0 ; i < sfEls.length; i ++ ) 
        {
            sfEls[i].onfocus = function () {
             this .className += "  sffocus " ;}
            sfEls[i].onblur = function () {
             this .className = this .className.replace( new  RegExp( "  sffocus/b " ),  "" );}
        }
    }
    suckerfish(sfFocus,  " INPUT " );
    suckerfish(sfFocus,  " TEXTAREA " ); 
script >

< style  type ="text/css" >
    form {
    margin :  0px auto ;
    width :  450px ;
    border :  solid 1px #CCC ;
     }
    .bo {
    border-bottom :  solid 1px #CCC ;  
     }
    label {
    float :  left ;
    padding :  10px 0px 6px 30px ;  
     }
    
    input {
    padding :  1px ;  
     }
    input,textarea {
    border :  1px solid #CCC ;
    margin :  5px 0px ;  
     }
    textarea {
    padding :  2px ;
     }
    .bt {
    width :  38px ;
    height :  20px ;
    font-size :  11px ;
    border :  solid 1px #CCC ;
    background :  #FBFBFB ;
    text-align :  center ;
     }
    .btcenter {
    text-align :  center ;
    clear :  left ;  
    padding :  4px 0px 0px ;
     }
    .sffocus  { /* ----for IE---- */
    background :  #F0F9FB ;
    border :  1px solid #1D95C7 ;
     }
    textarea:focus, input:focus  { /* ----for firefox......---- */
    background :  #F0F9FB ;
    border :  1px solid #1D95C7 ;
     }
    body  {
    font-family :  Arial, Helvetica, sans-serif ;
    font-size :  12px ;
    color :  #666666 ;
    margin-top : 20px ;
     }
style >
< title > title >
< head >
< body >
< form  action ="#"  method ="post"  name ="myform"  id ="myform" >
     < div  class ="bo" >
         < label > 姓名： label >
         < input  type ="text" size ="20"  maxlength ="10"   />  
     div >
     < div  class ="bo" >
         < label > 电话： label >
         < input  type ="text"  size ="20"  maxlength ="16"   />
     div >
     < div  class ="bo" >
         < label > 主题： label >
         < input  type ="text"  size ="30"  maxlength ="20"   />  
    
     div >
     < div  class ="bo" >
         < label > 内容： label >
         < textarea  cols ="40"  rows ="8" > textarea >  
     div >
     < div  class ="btcenter" >
         < input  type ="submit"  class ="bt"  value ="Send"   />
          
         < input  type ="reset"  class ="bt"  value ="Reset"   />
     div >
form >
body >
html >

2：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > Form demo title >
< style  type ="text/css" >

style >
head >

< body >
< div  id ="formwrapper" >

< h3 > 已注册用户登录 h3 >
     < form  action =""  method ="post"  name ="apLogin"  id ="apLogin" >
     < fieldset >
         < legend > 用户登录 legend >
         < div >
             < label  for ="Name" > 用户名 label >
             < input  type ="text"  name ="Name"  id ="Name"  size ="18"  maxlength ="30"   />< br  />
         div >
         < div >
             < label  for ="password" > 密码 label >
             < input  type ="password"  name ="password"  id ="password"  size ="18"  maxlength ="15"   />< br  />
         div >
         < div  class ="cookiechk" >
             < label >< input  type ="checkbox"  name ="CookieYN"  id ="CookieYN"  value ="1"   />   < a  href ="#"  title ="选择是否记录您的信息" > 记住我 a > label >
             < input  name ="login791"  type ="submit"  class ="buttom"  value ="登录"   />
         div >     
         < div  class ="forgotpass" >< a  href ="#" > 您忘记密码? a > div >     
     fieldset >
     form >< br  />
     < h3 > 未注册创建帐户 h3 >
     < form  action =""  method ="post"  name ="apForm"  id ="apForm" >
     < fieldset >
         < legend > 用户注册 legend >
         < p >< strong > 您的电子邮箱不会被公布出去,但是必须填写. strong >  在您注册之前请先认真阅读服务条款. p >
         < div >
         < label  for ="Name" > 用户名 label >
         < input  type ="text"  name ="Name"  id ="Name"  value =""  size ="20"  maxlength ="30"   />  
        *(最多30个字符) < br  />     
     div >
         < div >
         < label  for ="Email" > 电子邮箱 label >
         < input  type ="text"  name ="Email"  id ="Email"  value =""  size ="20"  maxlength ="150"   />  * < br  />     
     div >     
         < div >
         < label  for ="password" > 密码 label >
         < input  type ="password"  name ="password"  id ="password"  size ="18"  maxlength ="15"   />  
        *(最多15个字符) < br  />
     div >
         < div >
         < label  for ="confirm_password" > 重复密码 label >
         < input  type ="password"  name ="confirm_password"  id ="confirm_password"  size ="18"  maxlength ="15"   />  
        * < br  />

     div >
         < div >
         < label  for ="AgreeToTerms" > 同意服务条款 label >
             < input  type ="checkbox"  name ="AgreeToTerms"  id ="AgreeToTerms"  value ="1"   />  
             < a  href ="#"  title ="您是否同意服务条款" > 先看看条款？ a >  *     div >         
         < div  class ="enter" >
         < input  name ="create791"  type ="submit"  class ="buttom"  value ="提交"   />
         < input  name ="Submit"  type ="reset"  class ="buttom"  value ="重置"   />
     div >

         < p >< strong > * 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款. < br  />  
        * 这些条款可能在未经您同意的时候进行修改. strong > p >     
     fieldset >
     form >
div >
body >
html >