代码

/*  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

基于css的表单模板相关推荐

  1. 基于jQuery的表单验证插件：jValidate

    网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...

  2. 真正简单的基于prototype的表单验证

    由 searchadmin 于 周二, 10/16/2007 - 06:44 提交. 真正简单的基于prototype的表单验证 tag:prototype 数据验证 表单验证 validator j ...

  3. 计算机程序设计表单,表单模板和表单简介

    表单模板的组件 表单模板是单个文件包含多个支持文件,例如定义表单模板上的控件的显示方式,显示在表单模板的图形文件的文件和编程启用自定义窗体中的行为的文件模板.为表单文件统称以下支持的文件.在设计表单模 ...

  4. oa导入表格html,点晴OA工作流表单模板创建注意事项（Word、Excel复制粘贴变形如何解决）...

     点晴OA工作流表单模板创建注意事项(Word.Excel复制粘贴变形如何解决) 很多用户反映点晴OA系统中工作流表单创建时对于表格的控制十分的麻烦,希望能够做出漂亮的效果,但往往事违人愿.下面将工作 ...

  5. 外部编辑Infopath的表单模板(xsn)

    我们都知道Infopath表单模板(xsn文件)其实是一个压缩包(cab格式的),我们可以通过winrar或者winzip等工具直接打开它,它里面至少会有五个文件 那么有没有什么办法直接编辑这些文件, ...

  6. css在线留言星号,使用CSS 给表单必选项添加星号的实现方法

    在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,比如 Typecho 的评论表单: 姓名 * 示例: *姓名 然后给星号添加一点 CSS 样式: .form-group span ...

  7. antd 的form 表单怎么回显数据_jsonschema-form-vue基于JSONSchema的表单自动生成方案

    现象 作为一名前端开发,「表单开发」是我们的家常便饭,一般我们需要做以下重复性工作: 编写模板 编写校验规则 * 获取数据,提交表单 同时,后台服务也需要编写校验规则,随着业务变动或者沟通不及时,前后 ...

  8. 帝国cms录入表单模板php,帝国cms7.5在线表单提交制作教程

    最近春哥仿站团队接到很多仿站客户订单,这里面有一个这样的功能,表单提交.今天花时间写个教程给大家.另外我们春哥仿站团队推出低价仿站业务,市面上99%的企业站点都能制作出来,有需要的联系我们. 今天春哥 ...

  9. 支付宝会员卡开卡表单模板配置(alipay.marketing.card.formtemplate.set)JAVA版本demo

    官方接口文档: https://docs.open.alipay.com/251/105668/ ,我这里写的是开卡组件前两步的操作流程, 仅供参考 1. 调用接口前的准备工作(创建应用等)参考该文档 ...

最新文章

  1. pcb 理论阻值、 过孔_超实用！PCB设计中过孔常用的6种处理方式
  2. [云炬创业学笔记]第一章创业是什么测试5
  3. Android简易实战教程--第四十七话《使用OKhttp回调方式获取网络信息》
  4. Tornado与Django
  5. 卡内基·梅隆大学新提出AdaScale：自适应缩放实现视频对象实时检测算法
  6. 【wpf】在win10系统上弹出toast和notification
  7. 中兴有救了！百度又要 All in 视频？联想回应“反对预装国产系统” | CSDN极客头条...
  8. [android界面]android中src和background区别——前景与背景
  9. ios经验6:提交APP上架流程
  10. kvm学习---制作win7虚拟机镜像，并配置网络
  11. CDA二级建模分析师考试相关
  12. 能量英语(一)之激情英语
  13. 海岸TDM平台性能-续
  14. 计算机保密dss是啥,什么是DSS？
  15. 笔记整理--Linux守护进程
  16. 计算机操作系统保研面试题整理（自用）
  17. python如何输入一个矩阵_python怎么输入矩阵
  18. 银联支付(一)申请测试环境,并运行测试demo(在线网关支付)
  19. 生活篇之工资和年终奖的纳税
  20. 《测试架构师的修炼之道》七—测试策略实战

热门文章

  1. win10右键新建没有文本文档
  2. 谷歌怕了！ChatGPT狂砸搜索引擎饭碗，CEO开会拉响「红色警报」
  3. C++跨平台技术 - 线程Thread
  4. 【Docker】（五）使用bind mounts修改Docker容器中的Nginx配置文件
  5. ansible aws_如何使用Ansible管理您的AWS资源
  6. 建立Baseline之repo,manifest
  7. Incorrect string value: '\xE7\xBB\xA0\xEF\xBC\x84...' for column 'name_zh' at row 1
  8. wxPython 2 - wxPython基础
  9. 基于vue+exharts的双折线图
  10. Revit“原点”、“中心”、“测量点”在哪里？