TML作为一种用来描述网页的语言，是制作网页必不可少的，但HTML 不是一种编程语言，而是一种标记语言 (markup language），本着为了更好的了解大数据开发的基础，今天就带着大家更进一步的了解HTML的使用，HTML的表格与表单。

1.HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的作用就不言而喻了，让看起来更简洁直观有序性。

下面给大家带来一些常用的标签：

<table> 表格的最外层容器

<tr> 定义表格行

<th> 定义表头

<td> 定义表格单元

<caption>定义表格表题

　　<width>:宽度。可以用像素或百分比表示。 常用960像素。

　　<border>：边框，常用值为0。

　　<cellpadding>：内容跟边框的距离，常用值为0。

　　<cellspacing>：单元格与单元格之间的间距，常用值为0。

　　<algin>：对齐方式。

　　<bgcolor>：背景色。

<background>：背景图片。

<align>: 一行内容的水平对齐方式。

<valign>: 一行内容的垂直对齐方式。

<height>：行高。

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>

<tr>

<td>单元格内的文字</td>

...

</tr>

...

</table>

举个例子

其中：table用于定义一个表格标签。

tr标签 用于定义表格中的行，必须嵌套在 table标签中。

td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

字母 td 指表格数据（table data），即数据单元格的内容。

再比如说我们可以建立个有颜色的格子，如下图

表格的作用除了可以显示一个表格外，有的时候还可以用于辅助排版。但现在都不怎么使用了，因为时代的进步，以前的表格排版的网页已经被淘汰了。

2. HTML表单

关于表单的制定，因为在浏览器中输入的内容都必须要经过网络提交到服务器端再处理，所以需要把所有的控件都包含在一个form表单控件中，然后一次提交给服务器，再由服务器处理用户提交的数据。

HTML 支持有序列表(有序列表是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。)无序列表(无序列表也是一个项目的列表，此列项目使用粗体圆点“典型的小黑圆圈“进行标记。)和定义列表(自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。)。

表单常用标签：

form: 表单的最外层容器

input: 用于搜集用户信息,根据不同的type属性值,展示不同的控件

Text：普通的文本输入框

Password：密码输入框

Checkbox：复选框

Radio：单选框

File：上传文件

Submit：提交按钮

Reset：重置按钮

Cols：列

Rows：行

注意事项：

<form id="" name="" method="post/get" action="负责处理的服务端">--输入系统时，必须有

Name ：定义表单的名称；

Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get

Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）

Fieldset：把表单分组；

Legend：分组名称。

id不可重复，name可重复，get提交有长度限制，并且编码后的内容在地址栏可见，post提交没有长度限制，且编码后内容不可见。

举个例子

<form action="login.asp" method="post">

<label>用户名: </label><input type="text" name="username" />

<label>密码: </label><input type="password" name="password" />

</form>

得到结果如图

本期的内容比较多，大家可以在平日里多加练习，这是大数据开发基础的重要部分，做到能更熟练，更准确，希望大家能有所进步。

<form >
	<input type="text" />			
</form>

<fieldset >
	<legend>学生信息</legend>
	姓名：<input type="text" /><br>
	班级：<input type="text" /><br>			
</fieldset>

单的本质是业务，没有表单是无法完成业务系统的，而动态表单使业务系统更高级。动态表单是什么呢？它是如何工作的？应用场景有哪些？一起来看一下吧。

一、表单

表单在网页中主要负责数据采集功能，是提交数据的一切形式。表单的本质是提交数据，不仅仅包含输入框、下拉选择框等这些控件，常见的按钮空间也属于一个表单。

1. 动态表单

动态表单（Dynamic Form），指在前端运行过程中可依赖某些业务逻辑发生表单项变化的表单，还包括表单布局、表单数据管理、表单校验、表单交互、表单项联动逻辑等原本由前端编程完成的表单开发，转由后端通过 API 接口输出表单描述自动完成上述所有内容的表单开发形式。

（动态表单原理示意图）

2. 动态表单的特点优势

表单的本质是业务，而动态表单使业务系统更高级。

普通表单是一个表单写一份前端的代码，代码全部由前端开发者完成（后端配合接口输出）。而动态表单则是一个表单对应一个 JSON（由后端输出），所有表单由一份代码（动态表单引擎）进行加载和渲染。

所以，动态表单具有以下优势：

• 客户端运行的代码量更少；
• 每个表单的JSON按需加载；
• 表单需求变化时，无需前端修改发版，只需编辑数据库中的JSON。

二、表单控件

表单控件是提供一组允许用户操作的对象，从而接收用户输入的数据，用户可操作该对象来执行对表单设计，修改等操作。

1. HTML表单种常见的13个控件

input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件。

2. 动态表单控件

动态表单是老厂商天翎核心技术之一，也是天翎公司核心产品MyApps的重要组成部分。通过对于动态表单的应用，可以避免在电子流程系统中硬编码的数据采集及处理表单，提高系统的可维护性。

说明：

Form，动态表单实现的基本入口，描述了DynaForm的最基本属性，比如名称、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通过此XML描述两类信息：

1. Form中所具有的Field以及Field的类型、名称、长度、计算代码等等，XML；
2. Form的格式，比如排列次序、表格定列化的过程当中，系统自动解析XML的内容并将其转换为Java Object并由此具备Object的行为特性；位等。Form作为一个ValueObject存储在数据库中。

FormElement，接口，表示Form中的基本元素；

FormField，动态表单的最基本元素，在myApps/OBPM中被声明为Abstract，具体Object行为依赖于具体的SubClass实现；

TextField，单行文本框，继承FormField；

SelectField，下拉选择框，继承FormField；

TextareaField，多行文本框，继承FormField；

CheckBoxField，复选框，继承FormField；

RadioBoxField，单选框，继承FormField；

Textpart，静态文本段，除各种Field以外的静态文本部分，继承FormElement；

ComponentField，自定义组件，继承FormField；

AttachmentUploadField，附件上传组件，继承FormField；

ImageUploadField，图片上传组件，继承FormField；

ViewDialogField，视图组件，用于实现主从结构的表单，继承FormField；

CalctextField，计算文本组件，用于实现需要计算的文本，继承FormField；

IncludeField，实现SubForm的包含，继承FormField；

WordField，Word组件，继承FormField；

OcrField，为将来预留的接口，系统暂未实现；

三、表单引擎

表单引擎是为快速实施项目研发的轻量级表单设计工具。采用表单引擎工具可在不开发和新增加代码的情况下设计出新表单样式，同比程序开发可省掉程序员差不多70%的开发工作量，并且后期维护相对简单，管理方便。

1. 工作原理

在了解了表单的基本机构后，进一步看看表单引擎是如何工作的。

从客户端（Client）输入数据（Document），比如一个excel文件，表单（Form）结合excel文件自动生成HTML，如下图：

（表单结合文档生成HTML过程）

（XML解析为表单对象的过程）

（表单转为HTML过程）

（表单生成数据库）

2. 应用场景

天翎Myapps低代码开发平台的表单引擎是基于Web界面上可视化编辑的表单设计系统，同时支持印刷模式和拖拽模式两种设计方式，形象可见，操作方便。印刷模式可以做一些复杂的表单配置，同时还支持word表格的导入；拖拽模式：基于Vue的表单设计器，采用可视化拖拉拽的模式进行表单的设计。

（表单前台）

（表单后台）

本文由 @周志军Jarod 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。