.槪念

用来收集用户输入的信息，定义采集数据的范围，并且完成与用户的基本交互的作用。

表单就是输入框、单选框、复选框、按钮、选项菜单等网页元素，也称表单元素。

2.语法

form标签，所有表单元素都要放在form标签中。

<form action = "#" method = "get">xx</form>   <!-- # 是没有数据时的占位--> 

from标签属性：

① action：设置发送数据的位置；

② method：用什么方式发送数据。

属性值分为get和post：get，发送数据时直接显示在url栏中，发

送数据量小，且不安全；post，直接通过服务器发送数据，用户看不到过

程，且数据量较大。

3.表单元素

一般使用 input标签：

<form action = "#" method>
 			<input type  = "text" name = "age"/>
  </form>

input标签属性：

type属性：设置当前输入框的不同形态。值分别为：

password 密码框，text输入文字、字母、数字等

submit 提交按钮，reset 重置按钮

button 普通按钮，checkbox 表单复选框

radio表单单选框。

name 属性：给当前的表单元素数据起个名字，不能是中文和特殊符号。 （除了按钮标签外需要输入数据的都要加name属性）

value 属性：当前表单元素的默认值，在按钮标签中会显示在按钮上，在选项框里必须有，否则后端看到为on。

例如，<input type = "radio" name = "sex" value = "男"/>，传递给后端数据为sex=男，如果不写value，则显示sex=on。

placeholder属性：输入框的提示信息。

maxlength属性：设置输入text和password输入框的最大字符数。

size属性：当type = "text"或"password"时，设置元素的宽度。

checked属性：当type为radio或checkbox时，设置单选框或复选框的默认选中项。

4.扩展表单元素

如图，select 标签表示声明下拉列表；option 标签用于声明列表项；selected 改变下拉列表默认选中项。

多文本域（textarea）：

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

一、表单

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

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协议

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

eb前端开发课程：html表单-单选框多选框。

讲课人：波波老师。

radio单选框、checkbox多选框，这两个只需要选择不需要输入。现在来看一下单选框和多选框的演示。

·首先是单选框，输入一个inputradio，可以看到默认给了两个属性：name和id。把name="radio"，id="radio1"。当然光一个单选框也没有用，还需要给它加一个label，for-"radio1"，这个4abel for="">。这里要放上前面这个(单选框的id)"radio1"，代表着这是它的label。

·这里输入一个单选选项一，可以看到点击单选选项一，同时也可以把radio选中，这就是label的作用。多复制几个，可以看到选择"选项一"它被选中了，选择选项二，选项二被选中的时候，选项一的选中状态就被去掉了，它们三个只能选中一个，这就叫单选框。它们是以什么为同组标准的？就是以name为同组标准。

·假设现在再建一个单选框<input>，选择name="radioradio"，id"radio4"，label for="radio4"。单选选项4，选择1234，选4的时候对前面三个选项不产生影响，这就是单选框。

·接着再来看多选框，多选框，input：checkbox，4abel for="checkbox1"。选项一，把这行复制一下，可以看多选框也输入完了。点击多选框，可以看到它是可以同时选择多个项目的，这就是多选框。