CSS表单设计
文章出处：https://www.doczj.com/doc/009283184.html,
今天我们开始学习《十天学会web标准(div+css)》的css表单设计，包含以下内容和知识点：
改变文本框和文本域样式
用图片美化按钮
改变下拉列表样式
用label标签提升用户体验
一、改变文本框和文本域样式
如果前边几章学习的比较扎实的话，本节教程就相当容易了。下边先说一下文本框，文本框和文本域都是可以用css进行美化的。比如改变边框精细，颜色，添加背景色、背景图像等。请看下边的实例：
.text1 { border:1px solid #f60; color:#03C;}
.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}
.text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;}
.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;}
这四个样式表分别对应第2、3、4、5行表单，第一行是文本框的默认样式；第二行为设置边框和字体颜色的样式；第三行为设置边框、宽度、高度、字体大小、行高的样式；第四行设置边框和增加背景色和背景图片；第五行为增加一个gif动画的背景图片，看起来是不是生动许多，具体步骤不再赘述。下面我们看一下文本域的样式设置：
.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}
上图中第一个为默认的文本域样式，第二个为设置边框、宽度为百分比、高度和景图片。overflow:auto定义当内容不超过现在文本域高度时不出现滚动条。好了，下面运行一下代码看看两者的效果吧
这是默认样式
这是改变边框的样式和文字颜色
这是改变边框并设置高宽和字体大小的样式
这是增加背景图片实例，也可放左侧
这是增加了一个背景图片为gif动画
标准之路https://www.doczj.com/doc/009283184.html, 提示：可以先修改部分代码后再运行
二、用图片美化按钮
按钮也是网页中经常见的元素，但默认的样式有时候和页面整体效果不协调，需要把它美化一下，它的样式设置和文本框如出一辙，没有什么特别之处。下面以三个实例来说明一下：
.btn02 { background:#fff url(btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}
.btn04 { background:url(btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}
.btn07 { background:url(submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}
.btn08 { background:url(submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}
.btn09 { background:url(images/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}
图中的按钮，前两个为固定宽度，但宽度可以根据需要随意调整；中间两个为自适应宽度，根据字数多少去适应；这四个样式都是采用一个背景图片横向循环实现，所以宽度不受限制，最后一个完全采用背景图片，这样宽度就得固定死了，要不会影响美观。需要注意的是这种方式需要去掉按钮边框。
采用以上的按钮有一个好处是当css样式表没有加载上时，将会显示为默认按钮样式，这样用户可以清楚地知道这是个按钮，正常加载后，会使按钮更加美观。它和我们第五天讲的css按钮有所不同，那里的按钮实际还是个链接，而这里的是按钮元素。注：不同浏览器下显示效果略有不同。
标准之路https://www.doczj.com/doc/009283184.html, 提示：可以先修改部分代码后再运行
三、改变下拉列表样式
下拉列表（菜单）是大家最头疼的一个元素，因其对许多样式不生效，故而在页面中显示很丑陋，而且在IE6下总在最上层，造成许多弹出层不能把其遮挡（可恶的IE6呀），使页面的用户检验大打折扣，所以一些设计师想出了许多办法来改变这种情况。
IE6下对下拉列表的背景和宽度样式生效，其它绝大部分不生效，IE8下增加了对边框和高度的支持。但这样似乎离我们要求还很远，所以不得不寻求其它的办法了。先看下面三个图，同一代码分别在IE6、FF、IE8下显示的差异吧。
请选择项目：
标准之路https://www.doczj.com/doc/009283184.html, 提示：可以先修改部分代码后再运行
在三个浏览器下显示都不尽相同，所以最好是寻求其它的办法或者使用默认样式了。基中IE6下被遮挡可以把浮动层用iframe，因下拉列表不会跑到iframe上边。有更高美化需求的可以用div模拟来代替下拉列表，但这种方法实现起来麻烦，由于时间关系，本节不过多的介绍这种方法，感兴趣的朋友可以参考https://www.doczj.com/doc/009283184.html,/css_example/541.shtml，进一步的学习。
四、用label标签提升用户体验
label标签常常被大家忽略了，合理利用会使页面的用户体验得到提升，我们可以对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了
如上图，当鼠标点击姓名文字时，光标就会定位到后边的文本框上了；点击男女文字也会选中相应的选项；同理，复选框和文本域也是一样的。
表单自定义设计器 1设计思路 1.1表单自定义功能的误区 1、关于成本：表单自定义一般容易实现的仅布局、字段的增减、简单的脚本控制等，但有很多诸如复杂脚本控制、自动计算、特殊逻辑验证、主从关系，复杂基础数据选择（过滤、合并）、与其它功能模块的交互等等需求，自定义工具都不能很轻易地解决，最终可能带来的代价是重做，甚至推翻整个系统架构重新实现，付出成本是预计成本的2-4倍以上均有可能。建议采用对此类复杂需求通过关联创建人定义的SQL语句来实现。 2、表单自定义功能实现的方式一般是数据库表中预制了很多字段或者是一个表中的记录存储为ID、字段名、值、字段类型，而且值的类型往往是字符型，这些做法给数据的查询统计及SQL优化带来的是非常大的性能损失和阻力，业务系统数据量不大的时候看不出，一旦数据业务表大到一定程度的时候，性能瓶颈就会出现。我们知道需要工作流的业务系统都是大量用户和大规模业务数据的。对于表单自定义做法，性能瓶颈是一定要考虑的； 3、??表单自定义往往实现的是一个数据实体的增、删、改，但对于一个系统来讲一个表单仅仅是一个功能点而已，这个功能点对于整个系统来讲远不是那么单纯的，有可能一个数据实体的资料分别在多个表单里进行更新和维护，自定义逻辑往往是处理不了它们之间的冲突，还有查询和统计分析，这些是需要关联很多基础数据、关联其它业务数据。自定义表单功能本身也只是从功能特性的角度去出发，对于系统复杂的实体关系、业务模式、设计模式的支持几乎为零，一个高质量系统需要的因素基本实现不了； 4、?企业使用表单自定义工具的时候往往已经有了很多的系统，比如HR、CRM甚至ERP系统，很多关联数据会是来自于这些系统的数据。表单自定义工具往往无法提供高可靠性的集成方案，即使能集成也是勉强的，后续会付出很多手工同步、统计口径不一致等代价，为企业整体的信息化效果大打折扣； 5、?另外从实际的使用情况而言，实现一个表单自定义功能的目标往往是为了方便用户实现自己的业务逻辑，但实际上很少客户会自己去自定义这些表
《HTML5+CSS3从入门到精通》自测练习（修 正版） 一、单选题(共44题，每题1分，共44分) 1.支持input类型的输入框的消息提示的属性是[] A.detail B.placeholder C.pattern D.required 标准答案：B 试题分析：P101 2.（）方法用于绘制圆形，一般其中的第几个参数决定圆形的半径[] A.1 B.2 C.3 D.4 标准答案：C 试题分析：P114 3.下列哪项不是HTML5的新特性[] A.兼容性 B.合理性 C.安全性 D.有插件 标准答案：D 试题分析：p1-2 4.下列不是html5主要功能的是[] A.Cross-document B.Vector Scalable Graphics C.MathML D.Web Origin Concept 标准答案：B 试题分析：p4 5.在HTML5中可以省略全部标记的元素是________[] A.option B.body C.hr D.img 标准答案：B 试题分析：P39 6.不支持Web Storage的浏览器的是[] A.IE7以上版本 B.以上版本 C.Safari 以上版本 D.Opera 以上版本 标准答案：A
试题分析：P178 7.audio元素中src属性的作用是________。[] A.提供播放、暂停和音量控件 B.循环播放 C.制定要播放音频的URL D.插入一段替换内容 标准答案：C 试题分析：P160 8.以下哪项不属于Html5中input标签新增的输入类型________。[] A.email B.url C.number D.radio 标准答案：D 试题分析：P80-83 9.outline属性可以定义块元素的外轮廓线，以下错误的是———[] A.outline-color定义轮廓边框颜色 B.outline-style定义轮廓边框轮廓 C.outline-width定义轮廓边框宽度 D.outline-offset定义轮廓边框位置 标准答案：D 试题分析：50910.基本CSS代码书写规范不正确的是————[] A.尽量不缩写 B.全部小写，且每一项CSS定义写成一行 C.ID必须是唯一的，且用在结构的定义中 D.CSS可以尽量使用expression 标准答案：D 试题分析：288 11.1982年，（）创造了HTML语言。[] A.爱因斯坦 B.蒂姆·伯纳斯·李 C.比尔·盖茨 D.埃隆·马斯克 标准答案：B 试题分析：P22 12.在XHTML文档中，（）是一个必要的元素，他决定了网页文档的显示规则。[] A.body B.style C.header D.DOCTYPE 标准答案：D 试题分析：P35
自定义表单设计思路 为了满足与现有工作流系统的耦合，在对现有工作流进行适当修改的基础上，定制表单系统(包括与工作流相关的)的设计计划如下: 1。基本功能模块:部门、角色、人员信息、团队和组、职位(所有这些都可能是潜在的流程参与者) 在现有基础上适当扩展。 2。权限管理:在操作权限中增加字段权限和记录权限，即表单权限、记录权限和字段权限。 3。表单的基本信息:表单对应的表实体和实体属性的定义； 4。可视化表单定制工具:实现基于网络的图形表单设计器，努力实现可拖动控件， 不需要安装任何客户端控件；困难在于数据绑定，即页面元素到数据表字段的映射。此外，动态数据存储结构、表间数据校验和计算、主从表建立等问题也是难点。因此，相应的样式库、脚本库、函数库、模板库等。应该建立。 5。除了可视化的表单定制工具外，还应具有表单加载、表单分析、表单数据处理和表单存储功能；6.设计起点:努力为未来的系统实现准备 (即系统的运行已经是过程驱动或服务驱动的)，以面向服务或面向过程的方式构建系统，使未来的系统维护不会停留在代码级维护水平。 7。设计目标:我们开发的定制表单系统是实现工作流和定制表单松
耦合的好方法。它使用 自定义表单，能够有效地将工作流与工作流过程定义方法和工作流系统结构结合起来。8.整个表单系统的设计采用分层建模的方法进行设计和开发，分为 数据层建模、业务层建模和表示层建模 9。采用基于描述的方法来提高表单的可维护性、可扩展性和灵活性。表单数据模型、业务模型和表示模型是否用XML 描述，需要讨论后确定(设计的表单以XML的形式保存在数据库的指定表中)； 10。最初假设我们开发的自定义表单系统是基于XForms标准，而不是传统的HTML表单标准 。表单数据、行为和表示的分类也需要在设计者表单模板+数据中得到反映，设计者表单模板+数据本质上是以XML为中心的，实现了表单数据模型和表示层(表单格式)的分离创建表单的一般步骤如下: 步骤1:定义表单的基本信息； 的第二步是建立表单设计者的数学模型。表单设计引擎是整个表单设计的核心。步骤3:通过表单设计者定义表单样式和所有字段细节；第4步:定义表单上的各种基本操作(仅用于添加、删除、修改、检查等基本操作)在明确工作流控制数据、工作流相关数据和工作流业务数据的前提下，流程配置主要包括以下步骤: 第一步:创建流程角色； 步骤2:为创建的系统用户分配角色；步骤3:创建一个过程(建立一个
《HTML5+CSS3 从入门到精通》自测练习 （修正版） 一、单选题(共44 题，每题 1 分，共44 分) 1. 支持input 类型的输入框的消息提示的属性是[1.0] A. detail B. placeholder C. pattern D. required 标准答案：B 试题分析：P101 2. context.arc（）方法用于绘制圆形，一般其中的第几个参数决定圆形的半径[1.0] A. 1 B. 2 C. 3 D. 4 标准答案：C 试题分析：P114 B. body C. hr D. img 标准答案： B 试题分析：P39 6. 不支持Web Storage 的浏览器的是[1.0] A. IE7 以上版本 B. Firefox3.0 以上版本 C. Safari 4.0 以上版本 D. Opera 10.5 以上版本 标准答案： A 试题分析：P178 7. audio 元素中src 属性的作用是。[1.0] A. 提供播放、暂停和音量控件 B. 循环播放 C. 制定要播放音频的URL D. 插入一段替换内容 标准答案： C 试题分析：P160 3. 下列哪项不是HTML5 的新特性[1.0] 8.以下哪项不属于Html5 中input 标签新增的输入类型。[1.0] A. 兼容性 B. 合理性 C. 安全性 D. 有插件A. email B. url C. number D. radio 标准答案：D 试题分析：p1-2 4. 下列不是html5 主要功能的是[1.0] A. Cross-document B. Vector Scalable Graphics C. MathML D. Web Origin Concept 标准答案：B 试题分析：p4 5. 在HTML5 中可以省略全部标记的元素是[1.0] A. option 标准答案：D 试题分析：P80-83 9. outline 属性可以定义块元素的外轮廓线，以下错误的是———[1.0] A. outline-color 定义轮廓边框颜色 B. outline-style 定义轮廓边框轮廓 C. outline-width 定义轮廓边框宽度 D. outline-offset 定义轮廓边框位置 标准答案： D 试题分析：509 10. 基本CSS 代码书写规范不正确的是————[1.0] A. 尽量不缩写 ;.
HTML5+CSS3响应式布局笔记 第一章：HTML5,CSS3响应式布局入门 响应式布局：流式设计，弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。 视口：指浏览器窗口内的内容区域，不包含工具栏，标签栏等。 CSS3是在CSS2基础上按模块构建的，以CSS2.1标准为核心。 实现响应式设计的关键技术是CSS3—媒体查询。 响应式布局的条件：CSS3的媒体查询，流动布局。 原则：让设计在多平台多视口的情况下保留尽可能多的内容，而不是使用display：none隐藏它。 可以通过调整标签的先后顺序来显示大小屏内容顺序问题。 第二章：媒体查询，支持不同的视口 html4中的媒体查询： 加载CSS的四种方法：行内，内链，外链，import。其中import会增加css请求，影响速度。@import url(“phone.css”) screen and (max-width: 媒体查询可以检测到如下特性，但最常用的是视口宽度（width）和屏幕宽度（device-width）: width:视口宽度。 height:视口高度。 device-width:屏幕宽度。 device-height:屏幕高度。 orientation:检查设备处于横向还是纵向。 aspect-ratio:基于视口宽度和高度的宽高比。如16：9写为aspect-ratio:16/9. device-aspect-ratio:设备屏幕的高宽比。 color:每种颜色的位数。例如min-color:16会检测设备是否拥有16位颜色。 color-index:设备的颜色索引表中的颜色数。值为非负整数。 monochrome:检测单色帧缓冲区中每像素所使用的位数。值为非负整数，比如 monochrome:2。 resolution:用来检测屏幕或打印机的分辨率。如min-resolution:300dpi或 min-resolution:300dpcm。 scan:电视机的扫描方式，值可设为progressive(逐行扫描)或interlace(隔行扫描)。 grid:用来检测输出设备是网格设备还是位图设备。 以上除了scan和grid都可以使用min，max创建一个查询范围。 Respond.js(https://https://www.doczj.com/doc/009283184.html,/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import
表单自定义设计器功能设计 1设计思路 1.1表单自定义功能的误区 1、关于成本：表单自定义一般容易实现的仅布局、字段的增减、简单的脚本控制等，但有很多诸如复杂脚本控制、自动计算、特殊逻辑验证、主从关系，复杂基础数据选择（过滤、合并）、与其它功能模块的交互等等需求，自定义工具都不能很轻易地解决，最终可能带来的代价是重做，甚至推翻整个系统架构重新实现，付出成本是预计成本的2-4倍以上均有可能。建议采用对此类复杂需求通过关联创建人定义的SQL语句来实现。 2、表单自定义功能实现的方式一般是数据库表中预制了很多字段或者是一个表中的记录存储为ID、字段名、值、字段类型，而且值的类型往往是字符型，这些做法给数据的查询统计及SQL优化带来的是非常大的性能损失和阻力，业务系统数据量不大的时候看不出，一旦数据业务表大到一定程度的时候，性能瓶颈就会出现。我们知道需要工作流的业务系统都是大量用户和大规模业务数据的。对于表单自定义做法，性能瓶颈是一定要考虑的； 3、表单自定义往往实现的是一个数据实体的增、删、改，但对于一个系统来讲一个表单仅仅是一个功能点而已，这个功能点对于整个系统来讲远不是那么单纯的，有可能一个数据实体的资料分别在多个表单里进行更新和维护，自定义逻辑往往是处理不了它们之间的冲突，还有查询和统计分析，这些是需要关联
很多基础数据、关联其它业务数据。自定义表单功能本身也只是从功能特性的角度去出发，对于系统复杂的实体关系、业务模式、设计模式的支持几乎为零，一个高质量系统需要的因素基本实现不了； 4、企业使用表单自定义工具的时候往往已经有了很多的系统，比如HR、CRM甚至ERP系统，很多关联数据会是来自于这些系统的数据。表单自定义工具往往无法提供高可靠性的集成方案，即使能集成也是勉强的，后续会付出很多手工同步、统计口径不一致等代价，为企业整体的信息化效果大打折扣； 5、另外从实际的使用情况而言，实现一个表单自定义功能的目标往往是为了方便用户实现自己的业务逻辑，但实际上很少客户会自己去自定义这些表单。而开发人员都会热忠于实现一个表单自定义工具，但不会愿意长期去做表单的定制工作。对于团队的管理者来说用程序员的工资去做表单配置工作也是不划算的； 6、假如我们一定要去实现一个好的表单自定义工具，一定是有很多事件接口的、一定是要能支持调试的、布局一定要能有足够的细致、自定义过程中要有提供给业务人员的自动向导（比开发人员需要的向导更加傻瓜化）、一定能做到足够的优化或支持优化的实现、能支持缓存、调用程序集、从WebService获取信息、能对页面交互过程进行优化。。。。。。这些都实现后，会发现做的表单定义工具其实就是大软件公司研发的IDE开发环境，如：visual studio 开发环境。
本技术公开了基于Bootstrap的自定义表单系统，属于表单数据管理技术领域，包括定义系统提供的表单元素控件，包括表单可视化编辑器，表单元素控件配置信息支持灵活的可扩展属性；表单基础信息和布局配置，以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放，提供实时预览功能，展现表单缩略图；表单呈现，根据配置的表单元素和布局，正确的显示表单信息；表单的查询结果列表配置，根据表单配置信息，提供该表单查询结果列表中要显示的列及其相关的配置；表单实体数据模型动态创建，根据表单配置信息动态生成数据模型。本技术灵活便捷的配置用户需要的表单，支持PC电脑和移动终端都能兼容的表单呈现功能。 权利要求书 1.基于Bootstrap的自定义表单系统，其特征在于包括： 定义系统提供的表单元素控件，包括表单可视化编辑器，通过灵活的配置信息来定义表单元素控件的类型、数据格式，表单元素控件配置信息支持灵活的可扩展属性； 表单基础信息和布局配置，以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放，提供实时预览功能，展现表单缩略图； 表单呈现，根据配置的表单元素和布局，正确的显示表单信息，支持在移动终端采用流式布局正确的展现表单信息； 表单的查询结果列表配置，根据表单配置信息，提供该表单查询结果列表中要显示的列及其相关的配置，根据查询结果列表配置信息，生成该表单的查询结果列表； 表单实体数据模型动态创建，根据表单配置信息，动态生成数据模型。 2.根据权利要求1所述的基于Bootstrap的自定义表单系统，其特征在于对表单可视化编辑器
进行功能区域划分，包括：已配置表单列表区域，可用表单控件列表区域，表单设计区域，表单控件属性配置区域，表单布局实时预览区域；通过设计器，新建表单，并编辑其基础信息；在基础信息保存后，继续选择想要使用的控件并拖放到设计区域，对该控件的相关属性进行个性化配置，该操作可重复进行，直到用户认为表单提供的功能达到预期；期间用户可根据实时预览图，调整控件属性或拖动调整各个控件的显示顺序；待配置好表单布局后，在查询结果列表配置选项卡中配置该表单的查询列表需要显示的列及其个性化配置，如果不配置，则默认显示全部表单元素属性。 3.根据权利要求1所述的基于Bootstrap的自定义表单系统，其特征在于对已配置的表单，根据其配置数据，生成该表单的编辑、查询呈现页面模版，其中使用Bootstrap技术对表单布局和查询结果列表进行流式布局控制，从而保证每个表单的呈现页面。 技术说明书 基于Bootstrap的自定义表单系统 技术领域 本技术涉及表单数据管理技术领域，具体地说是基于Bootstrap的自定义表单系统。 背景技术 随着移动互联网和智能手机的普及，广大用户访问互联网的习惯已由电脑转为通过移动终端来进行与生活工作相关的活动。如：移动办公、移动商务等。在我们的日常生活和工作中，随处可见各种填写表单的场景。例如：通信运营商的故障工单系统，都是由若干内容和格式不同的表单元素构成，运维人员只需根据故障填写相应的工单，就可发起一次修复故障的派遣单。这些工单的开发，主要有2种形式：
我们会定期对W3School 的CSS 参考手册进行浏览器测试。 CSS3 选择器 在CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个CSS 版本中定义的。（CSS1、CSS2 还是CSS3。） 选择器例子例子描述C S S .class.intro 选择class="intro" 的所有元素。 1 #id#firstname 选择id="firstname" 的所有元素。 1 ** 选择所有元素。 2 element p 选择所有 元素。 1 element,element div,p 选择所有
自定义表单设计思路 为了满足和现有工作流系统的耦合，在适当改动现有工作流的基础上，对自定义表单系统（包括与工作流相关）的设计做出如下的规划： 1.基础功能模块：部门、角色、人员信息、班组、岗位（这些都可能是潜在的流程参与者） 在现有基础上适当扩展； 2.权限管理：需要在操作权限的基础上增加字段权限和记录权限，也就是要实现表单权限、 记录权限、字段权限； 3.表单基本信息：表单对应的表实体的定义、实体属性定义等等； 4.可视化的表单定制工具：实现基于web的图形化表单设计器，争取做到可拖拽控件， 无需安装任何客户端控件；——难点为数据绑定，也就是页面元素与数据表字段的映射，另外动态数据存储结构问题、表间数据校验和计算、建立主从表的问题是难点；因此要建立相对应的样式库、脚本库、函数库、模板库等等。 5.除了可视化表单定制工具外应有：表单加载、表单解析、表单数据处理和表单存储功能； 6.设计出发点：争取为今后我们做系统实现以面向服务或面向流程的方式构建系统做准备 （即系统的运行已流程驱动或服务驱动），做到随需而变，使得将来的系统的维护不要停留在代码级的维护层面上； 7.设计目标：我们开发出的自定义表单系统做到工作流和自定义表单松耦合实现为好，用 户自定义表单并能与工作流有效结合的工作流过程定义方法及工作流系统结构； 8.整个表单系统的设计采用分层建模方法进行设计与开发，可以分为： 数据层建模、业务层建模以及表现层建模 9.采用基于描述的方法来提高表单的可维护性、可扩展性以及灵活性，是否通过采用XML 来描述表单数据模型、业务模型和表示模型需要讨论后确定（设计完成的表单以XML 形式保存到数据库指定表中）； 10.初步设想我们开发的自定义表单系统是基于XForms标准而非基于传统的HTML表单标 准，分类表单数据，行为与表示也需要在设计器中体现出来——表单模板+数据，本质上是以XML为核心并且实现表单数据模型与表现层（表单格式）分离。 大致的建立表单步骤如下： 第一步：定义表单基本信息； 第二步：表单设计器数学模型的建立，表单设计器引擎是整个表单设计的核心； 第三步：通过表单设计器定义表单样式和所有字段详细信息；
CSS3选择器 在css3中新增了很多选择器，大部分浏览器都支持了，但是要知道坑爹的IE还在拖后腿，希望不久的将来IE能赶上来。下面就介绍一下css3中都增加了哪些选择器。 1.属性选择器 E[attr] →有attr属性的E元素。 E[attr^=’value’] →寻找属性值以value开头的元素。 E[attr$=’value’] →寻找以属性值value结束的元素。 E[attr*=’value’] →寻找属性值包含value的元素。 灵活运用，可以组合使用，例如： a[href^=’http://’][href*=’/folder2/’][href$=’.pdf’]{ } E ~ F { } 相邻兄弟连接符，选择的是文档树的同一层级中，紧邻元素E之后的任意元素F。 E + F { } 普通兄弟连接符，选择的是文档树的同一层级中，位于元素E之后的任意元素F，不管它是否直接相邻。 以上选择器大部分浏览器都支持，包括坑爹的IE。 2.伪类 E：first-child{ } //在css2引入，css3中增加11个新的结构伪类。 E：nth-child(n/2n/3n-1/odd/even){ } E：nth-of-type(n/2n/3n-1/odd/even){ } E：nth-last-child( ){ }和E：nth-last-of-type( ){ }与上面参数相同，但是元素要从最后一个算。 first-child{ }和:first-of-type{ } //选择其父元素的第一个子元素和其父元素的某种指定类型的第一个子元素。 last-child{ }和:last-of-type{ } //选择父元素的最后一个子元素和属于某种类型的最后一个子元素。 only-child和only-of-type，选择的是该元素有一个父元素，但没有任何的兄弟元素或者没有相同类型的兄弟元素。 例：p:only-of-type{ } p:only-child{ } 3.其它伪类 target伪类，指向网页内部特定元素的链接。例：
表单自定义设计器功能设计--2012毕业论文
表单自定义设计器功能设计 1设计思路 1.1表单自定义功能的误区 1、关于成本：表单自定义一般容易实现的仅布局、字段的增减、简单的脚本控制等，但有很多诸如复杂脚本控制、自动计算、特殊逻辑验证、主从关系，复杂基础数据选择（过滤、合并）、与其它功能模块的交互等等需求，自定义工具都不能很轻易地解决，最终可能带来的代价是重做，甚至推翻整个系统架构重新实现，付出成本是预计成本的2-4倍以上均有可能。建议采用对此类复杂需求通过关联创建人定义的SQL语句来实现。 2、表单自定义功能实现的方式一般是数据库表中预制了很多字段或者是一个表中的记录存储为ID、字段名、值、字段类型，而且值的类型往往是字符型，这些做法给数据的查询统计及SQL优化带来的是非常大的性能损失和阻力，业务系统数据量不大的时候看不出，一旦数据业务表大到一定程度的时候，性能瓶颈就会出现。我们知道需要工作流的业务系统都是大量用户和大规模业务数据的。对于表单自定义做法，性能瓶颈是一定要考虑的； 3、表单自定义往往实现的是一个数据实体的增、删、改，但对于一个系统来讲一个表单仅仅是一个功能点而已，这个功能点对于整个系统来讲远不是那么单纯的，有可能一个数据实体的资料分别在多个表单里进行更新和维护，自定义逻辑往往是处理不了它们之间的冲突，还有查询和统计分析，这些是需要关联很多基础数据、关联其它业务数据。自定义表单功能本身也只是从功能特性的角度去出发，对于系统复杂的实体关系、业务模式、设计模式的支持几乎为零，一个高质量系统需要的因素基本实现不了； 4、企业使用表单自定义工具的时候往往已经有了很多的系统，比如HR、CRM甚至ERP系统，很多关联数据会是来自于这些系统的数据。表单自定义
关于自定义报表设计方案 方案设计 中间件设计方案：结合客户端控件、服务器组件和主程序本身开发中间件式WEB设计器。 比如常用技术采用：C/S模式的报表设定器－＞生成XML报表模板－＞发布到WEB服务器中－＞通过程序（JSP/ASPX）向报表引擎中传入参数（报表条件等）－＞报表引擎处理、展现数据。 现列出广州市国土资源和房屋管理局花都分局房地产登记薄管理系统建设项目招标文件中”自定义报表需求”： 评分表中对该模块的评分如下： 仔细分析了需求，主要是对报表设计器的需求和对生成的报表打印功能的需求。
●设计器与BS平台集成在一起，设计器要求是BS的，可以是BS的吗？仔 细考虑了很久，设计器是BS和CS应该是可以选择的 ●设计器要求直观，易用，采用拖拽的方式设计报表的样式、控件和绑定数据 集 ●设计器支持生成不同类型的报表如固定行列、简单扩展、分组、交叉、标签、分 栏、图表等报表类型，并且也要支持不同类型报表的复杂组合 ●生成的报表可以方便支持各种打印功能：精确打印，支持套打、按行列分页、固 定表头、批量打印 于是在明确了需求的基础上，考虑通过怎么样的技术去实现. ●使用研发中心的designer ？无法实现。designer只能设计简单的表单和非常 简单的报表，简单扩展、分组、交叉、标签、分栏、图表报表都是无法实现的 ●使用开源报表工具： 仔细研究了几个开源报表工具ireport&JasperReport 、jfreeReport发现都无法满足需求，后来再网上发现了快逸报表、润乾报表、FineReport，好好了熟悉了一下他们的使用，仔细对比了一下，最后觉定：FineReport是我们原型设计中最好的选择，基本上可以实现标书中对自定义报表的各种需求，当然啦，用免费版的啊，如果完成不了就需要二次开发了。 附：基于BS的网上报表设计方案(部分) 作者：匿名文章来源：Java业界新闻网时间：2007-4-8 11:32:37 阅读次数：438 问题分析 报表系统开发涉及的问题是很多的，主要存在如何获取、如何显示和生成、如何存储等数据和样式的多样性。下面只列出部分设计前期主要存在问题和意见分析。 问题一： 报表到底是如何产生和实现？两种方式：“画”和“填”。 “报表”就是把一些数据放在固定格式的固定位置上的表格，而表格有简易复杂多种。 “画表”就是产生一格的同时也将数据按格式放在格子内，就是格式数据同时产生，这样整个表格画完了，表中的数据也有了，报表就生成了。这种方式适合于用来产生规整的报表，这样才可以逐行或逐列的画出该报表。这种方式的优点是产生报表快（成批处理数据）、处理程序简单（一个循环语句就可以了）。
仅限阅读请勿传播 当您阅读本方案时，即表示您 同意不传播本方案的所有内容 表单建模应用实例(图书管理)制作详解 Submitted By Weaver 上海泛微网络科技股份有限公司 中国上海耀华支路39弄9号（通耀路济明路路口） 邮政编码：200126 电话：+86 21
版本 目录 版本 .............................................................. 错误!未定义书签。第一部分应用背景................................................. 错误!未定义书签。
一. 需求描述................................................. 错误!未定义书签。第二部分制作步骤................................................. 错误!未定义书签。 一. 图书基本信息............................................. 错误!未定义书签。 1. 创建图书基本信息的字段................................... 错误!未定义书签。 2. 表单建模新建图书模块..................................... 错误!未定义书签。 3. 设置图书信息的操作权限................................... 错误!未定义书签。 4. 设置页面布局............................................. 错误!未定义书签。 5. 设置查询信息............................................. 错误!未定义书签。 6. 前台体验................................................. 错误!未定义书签。 二. 图书分类................................................. 错误!未定义书签。 1. 新建图书分类台账......................................... 错误!未定义书签。 2. 新建图书类别的浏览按钮................................... 错误!未定义书签。 三. 图书清单................................................. 错误!未定义书签。 1. 新建图书清单台账......................................... 错误!未定义书签。 2. 新建图书卡片............................................. 错误!未定义书签。 四. 图书借阅................................................. 错误!未定义书签。 1. 制作图书借阅流程......................................... 错误!未定义书签。 2. 新建图书借阅台账......................................... 错误!未定义书签。 3. 流程数据转入台账......................................... 错误!未定义书签。 4. 可借数量的扣减........................................... 错误!未定义书签。 5. 新建借阅卡片............................................. 错误!未定义书签。 6. 自定义右键浏览按钮....................................... 错误!未定义书签。 五. 人员的借阅记录........................................... 错误!未定义书签。 1. 新建人员借阅台账......................................... 错误!未定义书签。 2. 更新人员的借阅信息....................................... 错误!未定义书签。第三部分练习题 .................................................. 错误!未定义书签。 一. 需求描述................................................. 错误!未定义书签。 1. 办公用品基本信息的建立................................... 错误!未定义书签。 2. 资产清单的建立........................................... 错误!未定义书签。 3. 搭建入库流程............................................. 错误!未定义书签。 4. 搭建办公用品领用流程..................................... 错误!未定义书签。 5. 卡片制作................................................. 错误!未定义书签。 6. 思考 .................................................... 错误!未定义书签。 第一部分应用背景 一.需求描述 在图书管理系统中，管理员为每个读者建立一个账户，账户内存储读者个人的详细信息，能有效的管理读者借、还、续借、查询等操作，并根据借阅记录得出最热门书籍的排行。 借阅图书时，读者可以根据不同的图书分类预览书籍信息，并可查看当前书籍的可借数量。读者借阅必须通过申请，图书管理员能快速找到可以借出的图书编号并分配给读者，完成借书操作的同时即刻更新相关数量，并留下借阅记录。 归还图书时，系统自动更新图书的借阅状态，管理员能根据借阅人申请时的归还时间判断是否按时归
新中大软件股份有限公司 功能手册 版本 1.0
自定义表单功能手册 修订历史记录
前言 前言 企业用户可以通过自定义表单，根据自己的实际情况独立进行业务配置，来进行个性 化、行业化定制。使Psoft能持续满足客户的需要，为企业打造个性化系统。并带来持久的信息化投资收益。 自定义表单采用图形化可视化操作，所见即所得，通过拖拉即可完成表单设计。用户无 需编程或是修改代码，完全在界面上操作即可设计完表单；通过简单的拖拉设置就可以实现 控件所能实现的功能，从而大大减少了代码的编写和调试难度。它和工作流审批、权限设 置、附件挂带、套打定义、自定义报表等功能无缝集成。快速进行表单升级。 下面介绍自定义表单在Psoft产品使用。
自定义表单功能手册 目录 第1章自定义表单功能概述 .......................................................................................................................... - 3 -1.1表单设计平台功能介绍 (3) 1.2工具栏和菜单 (3) 1.3工具箱 (4) 1.4项目 (5) 1.5属性 (7) 1.6输出 (14) 1.7界面设计 (14) 第2章业务表单设计流程 ............................................................................................................................ - 19 -1.8业务表单设计流程图.. (19)
本文部分内容来自网络整理，本司不为其真实性负责，如有异议或侵权请及时联系，本司将立即删除！ == 本文为word格式，下载后可方便编辑和修改！ == css3选择题使用方法详解 一通用选择器 1 *{}通配选择符(CSS2)：适合所有元素对象。 2 E类型(HTML)选择符（CSS1）：以文档语言对象类型DOM作为选择符。 3 E#myid是id选择符（CSS1）：以唯一标识符id属性等于myid的E对象作为选择符。 4 E.myclass是类class选择符(CSS1)：以class属性包含myclass的E 对象作为选择符。 5 E F：包含选择符(CSS1)：选择所有被E元素包含的F元素。 CSS3新增的通用选择器：同级元素通用选择器： 1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。只要F在E的后边，E只是作为一个参考。E~F { background:#ff0; } 2 临近(相邻)选择器(css2)：E+F{}：EF元素相邻，即选择紧贴在E元素之后F元素。 3 包含（子）选择器(css2)：E>F{}：EF不可以隔代，E只能匹配到下一个相邻辈F。 二属性选择器 1．E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。 2．E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。 3．E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E 元素。
4．E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 5．E[att] 选择具有att属性的E元素。 6．E[att="val"]选择具有att属性且属性值等于val的E元素。 7．E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 注：4~7是CSS2特有的属性。 input最常用属性选择器。 三伪类选择器 1 与用户界面有关的伪类： (1) E:enabled：匹配表单中激活的元素，表单中可操作的元素。 (2) E:disabled（常用）：常用匹配表单中禁用的元素 disabled="disabled" 。 eg:input[type="text"]:disabled { background:#ddd;} 只可以看不可操作。 (3) E:checked：匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 是整体伪类（匹配整个DOM文档）： (4) ::selection 匹配用户当前选中的元素，即设置对象被选择时的颜 色。 ::selection。 2 结构性伪类 1) :root 匹配文档的根元素，对于HTML文档，就是只能匹配HTML根元素。 2) E:nth-child(n) 匹配其当前元素 E :nth-child(n):匹配其父元素E的第n个子元素，第一个编号为1 E F:nth-child(n):匹配其父元素E的第n个F元素，第一个编号为1（貌 似只对ul 可用） 3) E:nth-last-child(n)：匹配其父元素的倒数第n个子元素，第一个编 号为1。 E:last-child：匹配父元素的最后一个子元素，等同于:nth-last- child(1)。
关于流程表单设计器自定义开发及常见场景方案分享 一、表单设计器模板如何自定义开发 表单设计器可设置自定义属性以及插入代码块，二者相辅结合、灵活运用，可实现多样化客户需求 自定义属性分为：行自定义属性(绑定在table布局tr行标签上)、单元格自定义属性(绑定在table布局td标签子元素div上)、列自定义属性(绑定在明细table此列所有td标签上)；代码块可填写Script代码块、Style样式块及直接对JS/CSS文件的引用； 二、常用开发场景实现 场景1：控制日期字段选择范围，比如费用产生日期只能选择当前日期往前十天至今天，否则不允许流程提交 实现方式: 代码块插入 封装方法：cus_judgeDateRange(fieldid, floorday, upperday) * @param {fieldid} 日期字段ID * @param {floorday} 下限天数(与当前日期比较)，空值代表不限制 * @param {upperday} 上限天数(与当前日期比较)，空值代表不限制 * @return 返回true表示在范围内，false表示超出限定范围或日期置为空 场景2：实时计算两个日期时间字段组合相差小时数，并赋值给另一字段实现方式：代码块插入 jQuery(document).ready(function(){ var bindFun = function(){ var diffhours = cus_CalTimeDiff("field31,field32", "field35,field36", 2); jQuery("[name=field39]").val(diffhours); } jQuery("#field31,#field32,#field35,#field36").bindPropertyChange(bindFun); bindFun(); });