基于Extjs的web表单设计器 第六节
web前端开发表单课程设计
web前端开发表单课程设计一、课程目标知识目标：1. 学生能理解表单在Web前端开发中的重要性，掌握表单的基本结构。
2. 学生能掌握常用的表单元素及其属性，并了解其在不同浏览器中的兼容性。
3. 学生能学会使用HTML和CSS对表单进行布局和美化，提高用户填写体验。
技能目标：1. 学生能独立完成一个完整、功能齐全的表单页面编写，包括表单元素、布局和样式。
2. 学生能通过运用JavaScript和jQuery等前端框架，实现表单的验证和数据处理。
3. 学生能掌握基本的表单提交方式，了解前后端数据交互的基本原理。
情感态度价值观目标：1. 学生通过学习表单制作，培养细心、严谨的编程习惯。
2. 学生在学习过程中，学会合作、分享，提高团队协作能力。
3. 学生能认识到Web前端开发在互联网行业中的广泛应用，激发学习兴趣，树立职业规划意识。
课程性质分析：本课程为Web前端开发基础课程，重点在于培养学生的实际动手能力和解决问题的能力。
通过学习表单制作，使学生掌握Web前端开发的基本技能，为后续学习打下坚实基础。
学生特点分析：学生为初中或高中年级，具备一定的计算机操作能力和逻辑思维能力。
学生对新鲜事物充满好奇，但注意力容易分散，需要通过实际案例和互动教学激发学习兴趣。
教学要求：1. 教学内容要紧密结合实际，以案例为主线，引导学生掌握表单制作的各项技能。
2. 教学过程中注重启发式教学，培养学生的创新意识和解决问题的能力。
3. 强化实践教学，让学生在实践中掌握知识，提高技能。
二、教学内容1. 表单基础概念：介绍表单的定义、作用及其在Web页面中的应用场景。
- 理解表单的结构与组成- 掌握表单的常用属性和方法2. 表单元素：学习各种表单控件，如输入框、单选框、复选框、下拉菜单等。
- 熟悉各元素的使用方法及其属性设置- 了解不同表单元素的默认行为和样式3. 表单布局与美化：运用HTML和CSS进行表单布局设计，实现美观的表单界面。
《网页设计与制作》第六章
6.2 通过邮件接收表单
表单中的信息输入完毕以后需要将信息提供给 服务器端的相关人员，用户可以通过表单域属性 面板中的“动作”属性指定通过电子邮件接收表 单数据。 在属性面板的“动作”文本框中输入 mailto:***@***.***,也就是在mailto后面加上邮 件地址。在浏览者提交表单后，会弹出窗口询问 是否继续以电子邮件形式提交，单击“确定”按 钮，浏览器会自动打开Outlook或Outlook Express， 将表单中的数据整理为E-mail内容发送到设定的 信箱中去。
《网页设计与制作》
第六章 交互式表单制作源自讲解提纲• 6.1 创建表单 • 6.2 通过邮件接收表单
• 6.3 制作跳转菜单
6.1 创建表单
使用表单，可以帮助Internet服务器从用户 那里收集信息，它由两部分组成：前台显示页面 和后台处理程序。前台显示页面用于显示表单的 内容，主要包括文本域、单选按钮、复选框、菜 单和提交按钮等。后台处理程序用于处理用户提 交的表单数据。 在 Dreamweaver 中，表单输入类型称为表 单对象。可以通过选择“插入”菜单“表单”子 菜单来插入表单对象，或者通过 “插入”工具栏 的“表单”子工具栏来插入表单对象。
3.插入单选按钮 要求浏览者只能从一组选项中选择一个选项 时，使用单选按钮。单选按钮通常成组地使用，在 同一组中的每个单选按钮的名称必须一致，这样整 个单选组才能有效。 要插入单选按钮，将光标定位后，单击“表 单”工具栏上的“单选按钮”按钮，即可插入一个 单选按钮。
4.插入复选框 复选框允许在一组选项中选择多项，用户可 以选择任意多个适用的选项。 要插入复选框，将光标定位后，单击“表单” 工具栏上的“复选框”按钮，即可插入一个复选 框。 5.插入文件域 文件域使用户可以浏览到其硬盘上的文件， 并将这些文件作为表单数据上传， 要插入文件域，将光标定位后，单击“表单” 工具栏上的“文件域”按钮，即可插入一个文件 域。
ExtJS中表格控件的使用,属性设置和数据的获取
ExtJS中表格控件的使用，属性设置和数据的获取ExtJS中表格的特性简介表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：JsonStore，SimpleStore，GroupingStore…一个表格的基本编写过程：1、创建表格列模型var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role'},{header: '等级', dataIndex: 'grade'},{header: '创建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')} //创建日期类型的数据});2、创建数据数组var data = [['士兵','7','2011-07-2412:34:56'],['将军','10','2011-07-2412:34:56'],];3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式ArrayReader的mapping用来设置列的排列顺序var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}{name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'} //创建日期列和显示格式])});store.load();4、创建GridPanel，装配ColumnModel和storevar grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cm});另外获取远程数据可以使用ScriptTagProxy,如下所示var store = new Ext.data.Store({proxy: new Ext.data.ScriptTagProxy({url:'http://...'}),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}]),sortInfo: {field: "role", direction: "ASC"} //设置默认排序列，ASC/DESC });表格的常用属性功能var grid = new Ext.grid.GridPanel({enableColumnMove: false, //禁止拖放列enableColumnResize: false, //禁止改变列的宽度stripeRows: true, //斑马线效果loadMask: true, //读取数据时的遮罩和提示功能renderTo: 'grid',store: storecm: cm});var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role', width:90, sortable: true}, //width 设置列宽度，默认为100px，sortable设置排序功能{id:'grade', header: '等级', dataIndex: 'grade', width:40}});var grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cmviewConfig:{ //让每列自动填充满表格forceFit: trueautoExpandColumn: 'grade' //自动延伸列，列的id在ColumnModel中定义});渲染表格，为表格设置特殊样式只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。
网页设计与制作第6章 表单的使用
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
网页设计与制作项目教程 单元6 表单网页的制作
续表
网页布局结构分析
网页色彩搭配分析 网页组成元素分析 任务实现流程分析
（1）网页布局结构，如图6-12所示 （2）无导航栏
网页中文字的颜色：#2b2b2b，背景颜色：#000000 主要包括表格、表单域、表单控件、表单外框、文本和图像等网页元素 制作表格布局的网页→插入表单域→插入表单控件→检查提交表单数据的正确性
本单元“模仿训练”的任务跟踪卡如表6.2所示。
表6.2 单元6“模仿训练”任务跟踪卡 任务编号 开始时间 完成时间 计划工时 实际工时 当前状态
本单元“模仿训练”网页task6-1.html的浏览效果如图6-12所示。
图6-12 北京大学网站新生注册表单网页task6-1.html的浏览效果图
任务6.1.1 插入表单域、设置属性及其表格布局
图6-13 插入表单域、设置属性及其表格布局
图6-14 模拟处理表单数据的程序文件
〖任务实施〗 （1）创建Unit6站点结构，将所需图片复制到“images”文件夹中，使用 “网页骨架.html”文件，保存为“task6-1.html”网页文件，将其拖曳到编辑 器中进行编辑，修改网页标题为“北京大学新生注册页面”，接着设置及 其他属性，保存该网页，并在浏览器中浏览。 （2）在网页中插入一个表单标记，设置action属性为“ok.html”，其中“ok. html”代表处理表单数据的程序文件。设置表单的method属性为“post”。
本单元难点 教学方法
（1）在网页中正确插入表单域，在表单域中正确插入各种表单元素 （2）检查提交表单数据的正确性
（1）在表单域中插入列表/菜单 （2）在表单域中插入表单外框 任务驱动法、分组讨论法
在Web网页中，浏览者经常需要与WEB服务器进行数据交换。 当浏览者需要填写数据，并将这些数据发送到服务器端时，需要 在页面中创建表单。 例如： 163免费邮箱的登录表单，如图6-1所示。
web程序设计设计表格
web程序设计设计表格
在web程序设计中，设计表格是一个常见的任务。
表格通常用
于展示和组织数据，使用户能够轻松地查看和比较信息。
在设计表
格时，有几个关键方面需要考虑：
1. 数据结构，首先，你需要确定你要在表格中显示的数据的结构。
这包括确定每列需要显示的数据类型（文本、数字、日期等）
以及数据之间的关系。
2. 表格布局，考虑表格的布局是很重要的。
你需要决定表格有
多少列和行，以及是否需要合并单元格或者添加分组等特殊布局。
3. 样式和格式，表格的样式和格式对用户体验至关重要。
你需
要考虑表格的颜色、字体、边框等外观属性，以确保表格清晰易读。
4. 响应式设计，在web程序设计中，响应式设计是必不可少的。
你需要确保你的表格能够在不同设备上（如电脑、平板和手机）上
显示良好，并且能够适应不同的屏幕尺寸。
5. 用户交互，最后，考虑用户与表格的交互。
你可能需要添加
排序、过滤和搜索功能，以便用户能够方便地浏览和操作表格中的数据。
总之，在设计web程序中的表格时，需要综合考虑数据结构、布局、样式、响应式设计和用户交互等多个方面，以确保最终的表格能够满足用户的需求并提供良好的用户体验。
基于Extjs的web表单设计器第七节——取数公式设计之取数公式定义
基于Extjs的web表单设计器第七节——取数公式设计之取数公式定义基于Extjs的web表单设计器第⼋节——表单引擎设计 本节我们介绍表单设计器的取数公式设计。
对于⼀个系统来说，我们除了最基本的业务之外，可能针对不同的企业⽤户或者不同的⽣成环境的⽤户会动态的增加⼀些不同于现有业务类型的数据，这也就会导致实际的⽣产环境要求我们的表单控件⽀持不同的数据来源取数。
在这⾥我先抛⼏个问题出来供⼤家思考⼀下：1. ⼀个⽐较复杂的表单的单控件⼀般有⼏种类型？2. 不同类型的控件数据来源形式有哪些？3. 针对这些不同形式的数据来源，我们能不能把它们抽象⼀下下，⽤⼀种⽐较统⼀的⽅式或者⽅法来集中对它们进⾏处理？ 我们仔细考虑⼀下这⼏个问题之后，会发现针对问题1表单的控件分类如下图⼀ 通过上⾯的图我们可以看出表单的控件基本上可以抽象的分为简单类型和复杂类型两类控件。
对于问题2我们通过分析这些控件可以发现这⼏种不同控件的数据来源⽆⾮如下图⼆所⽰的⼏种⽅式。
（PS：请注意Sad表情的⼏处地⽅，为什么我要⽤Sad表情，因为这⼏个地⽅通常是我们觉得灰常不好搞的地⽅） ⾄此问题1、问题2都解决了，那么问题3呢？答案是肯定的。
我们当然可以使⽤⼀种⽐较抽象的⽅式来针对不同⽅式的数据来源定义不同的取值⽅式。
取数公式的设计我们可以分为两个部分进⾏分开设计（如下图三所⽰），⼀个是取数公式的定义部分，另⼀个是取数公式的解析部分。
很明显我们除了要定义⼀套取数的公式之外，更重要的是能够解析这些取数公式，这样才能够在表单中灵活的使⽤它们来为我们⼯作。
取数公式的定义开始讲解取数公式的定义之前，先对⼏个概念做个解释，不然看不懂下⾯的图四。
系统资源：⽐如员⼯、组织结构等基础数据，也可以是系统涉及的业务类型、外部单位等等。
总之我们可以把系统中使⽤的任何数据都当成⼀种资源。
这些系统资源在系统中的存储除了它本⾝所具有的属性字段外，⼀般都还包含这些资源的Key、Value值。
网页设计与制作第6章 表单的使用PPT课件
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
6.3.2 插入单选按钮
当用户单击单选按钮组中的某个按钮时，其他按钮就会被 取消选中状态。单选按钮使用起来很方便，但适用的范围有限。 只有预知所有答案的各种可能项，且只有一项被选中时，才能 使用单选按钮 . 【单选按钮】：输入单选按钮的名字，同一组中的单选按钮必 须用同一个名字。 【选定值】：设置选中的单选按钮的值。当用户提交这个表单 时，这个值将会被发送至服务器的应用程序中，同一组中的每 个单选按钮必须设置不同的值。 【初始状态】：设置该单选按钮在第一次载入时的状态，有 【已勾选】与【未选中】两个选项。在一组单选按钮中，只能 将一个单选按钮设置为选中状态。
第6章 表单的使用
第6章 表单的使用
学习目标： 通过这章的学习，可以应用表单收集来自
用户的信息，包括网上调查、网上订单和建 立搜索界面等等。主要内容包括表单和表单 对象概念、创建表单和添加表单对象。
第6章 表单的使用
简单地说，表单就是用户可以在网页中填写信息的 表格，其作用是接收访问者信息并将提交给Web服务器 上特定的程序进行处理。表单是收集访问者反馈信息的 有效方式，是网站与浏览者实现互动的重要手段。在网 络中应用非常广泛。目前大多数的网站，尤其是专业型 的网站，都需要与访问者进行动态的交流。要实现与访 问者的交互，表单是必不可少的板块。例如，在线申请、 在线购物和在线调查问卷等。表单架设了网站和访问者 之间进行沟通的桥梁。这些过程就是需要填写一系列表 单，并将其发送到网站的后台服务器，交由服务器的脚 本或应用程序来处理。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基于Extjs的web表单设计器第六节基于Extjs的web表单设计器基于Extjs的web表单设计器第一节基于Extjs的web表单设计器第二节——表单控件设计基于Extjs的web表单设计器第三节——控件拖放基于Extjs的web表单设计器第四节——控件拖放基于Extjs的web表单设计器第五节——数据库设计基于Extjs的web表单设计器第六节——界面框架设计基于Extjs的web表单设计器第七节——取数公式设计基于Extjs的web表单设计器第八节——表单引擎设计这一节我给大家介绍一下表单设计器的界面框架设计（这一节距上一节时间有点长了，还望见谅）。
这一节的内容比较简单，主要是结合表单设计器的实际情况介绍一些ext前端界面布局、设计的方式，熟悉ext框架或者常用控件布局的人可以略过。
我们使用的前端框架是Ext，因此表单设计器的前端界面设计都是基于Ext展开。
设计器的总体设计方案为：1.打开设计器后第一层级展现的是目前已有的模板列表信息的一个grid，grid中包含了当前登录所具有操作表单模板的权限。
如（新增模板，编辑模板，发布模板，删除模板，停用模板等功能.）2.选择“新增模板”后，在填出的界面填入必要的模板信息然后“确定”后就会进入设计时界面；此时的设计时界面将会为我们产生一个全新的表单模板画布区域，等待你的设计；3.选中现有的某个模板点击“编辑模板”后，同样会进入设计时界面；此时的设计时界面将会为我们加载并生产该模板已有的表单区域及表单项信息；4.其他操作都不会进入我们的设计时界面；5.设计时界面采用类似Visual Studio 的设计器界面，主要分为左、中、右三个区域。
左侧为控件区域、中间为表单的画布设区域、右侧为属性区域（具体可以参考本系列的开篇的图样）。
基于上面的设计方案，在Ext我们可以采用这样的界面布局方式，第一级panel使用cardlayout，包含一个已有模板列表的grid和另外一个设计时的panel，设计时panel采用左中右的布局方式我们一般使用borderLayout来完成布局。
1 <ext:Panel runat="server" Border="false"Layout="CardLayout" Padding="5" ActiveIndex="0">2 <Items>3 <ext:GridPanel ID="GridPanel1" Title="现有表单模板列表" runat="server">4 <%--其他信息略..--%>5 </ext:GridPanel>6 <ext:Panel runat="server"Border="false" Layout="BorderLayout">7 <Items>8 <ext:TreePanel runat="server" Region="West" RootVisible="false"9 Width="200" Split="true" Collapsible="true" Collapsed="false">10 </ext:TreePanel>11 <ext:Panel ID="Panel2"runat="server" Region="Center" ButtonAlign="Center" Border="true"12 BodyPadding="10" OverflowY="Auto">13 </ext:Panel>14 <ext:Panel ID="Panel3"runat="server" Border="false" Region="East" Width="260"15 AutoScroll="true" Title="控件属性" Split="true" Collapsible="true" Collapsed="false"16Layout="ColumnLayout">17 </ext:Panel>18 </Items>19 </ext:Panel>20 </Items>21 </ext:Panel>设计界面左侧的控件区域我们也在本系列的第二节进行了介绍，这里不再重复，有兴趣的朋友可以去参考第二节——表单控件的设计。
这里主要介绍画布区域和右侧的属性区域。
画布区域就是一个能够接受卡片区域、表格区域及混合区域的控件。
根据前面第二节的表单控件设计一节的介绍，我们其实很容易的就知道了，画布区域其实就是一个混合区域（mixed）类型的panel。
因此上面总体布局代码中的Panel2的代码我们应该修改为：1 <ext:Panel ID="mainPanel" runat="server"Region="Center" ButtonAlign="Center" Border="true"2 BodyPadding="10"OverflowY="Auto">3 <CustomConfig>4 <ext:ConfigItem Name="type" Value="mixed" Mode="Value" />5 </CustomConfig>6 <TopBar>7 <ext:ToolbarID="templateRegionToolbar" runat="server">8 <Items>9 <ext:Button ID="btnEditTemplateJs" runat="server" Text="编辑模板JS 方法" Icon="Pencil">10<Listeners>11<Click Handler="EditTemplateJS(tempJsWin)" />12</Listeners>13</ext:Button>14<ext:ToolbarSeparator ID="ToolbarSeparator1"runat="server" />15 <ext:Button runat="server" ID="btnSaveTplInfo" Icon="Disk" Text="保存模板">16<Listeners>17<Click Handler="SaveTemplateInfo()" />18</Listeners>19</ext:Button>20<ext:ToolbarSeparator ID="ToolbarSeparator8"runat="server" />21 <ext:Button runat="server" ID="btnCancelTplInfo" Icon="Cancel"Text="取消">22<Listeners>23<Click Fn="CancelTplInfo" />24</Listeners>25</ext:Button>26 </Items>27 </ext:Toolbar>28 </TopBar>29 </ext:Panel>介绍完画布区域，就是我们的属性区域设计。
属性区域设计的内容项可能比较多一些，主要是我们要针对表单模板、表单区域、不同类型区域的表单项等内容项设置相关的属性（因为我们的卡片区域和表格区域里面即使都是同一种控件类型，可能所拥有的属性值也不一样，这里列举两个例子1.比如表格区域里面的控件可以具有子级列或者父级列；表格区域里面的数字或者金额控件可以具有选择不同的汇总方式，而我们的卡片区域的子控件是不具有这些属性的；2.卡片区域的子控件都具有占用几列的属性而我们的表格区域的子控件对应的却是实际占用列宽度的属性）。
为了考虑到职责的单一性，以及后期维护修改的简易性，我们考虑针对这几种不同的内容项的属性分别定义各自的功能属性，即使这些控件属性中有些是重复的属性，我们也会使用单独的控件来标记它们，而不是为了节省一个控件而去复用它们。