组件：表单

表单组件用于收集和提交用户输入数据，支持添加输入框、多行编辑框、下拉框、单选项、多选项、文件选择框等控件，以及设置标签宽度、输入宽度、行间距等布局属性，常用于登录注册、信息录入、数据提交等表单场景。

典型使用场景：

  • 用户注册表单（个人信息、账号设置）
  • 登录表单（用户名密码验证）
  • 数据录入表单（订单信息、调查问卷）
  • 搜索表单（条件筛选、高级搜索）
  • 设置表单（个人偏好、系统配置）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作属性/方法示例
设置表单宽度宽度表单1.宽度 = 400
设置标签宽度标签宽度表单1.标签宽度 = 80
设置输入宽度输入宽度表单1.输入宽度 = 200
设置行间距行间距表单1.行间距 = 20
添加输入框添加输入框(标题, 默认值, 提示文本, 类型, 名称)表单1.添加输入框("用户名", "", "", "text", "username")
添加多行编辑框添加多行编辑框(标题, 默认值, 提示文本, 行数)表单1.添加多行编辑框("备注", "", "", 3)
添加下拉框添加下拉框(标题, 选项数组)表单1.添加下拉框("城市", [{文本:"北京", 值:"BJ"}])
获取表单数据获取数据()变量 数据 = 表单1.获取数据()
清空表单清空()表form1.清空()
设置提交回调置被提交回调(回调)表单1.置被提交回调((源对象, 数据) => { ... })

样式美化参考

以下为常用样式组合示例，可根据实际需求调整：

表单布局样式：

  • 标准表单：宽度 = 500，背景颜色 = "#ffffff"，边框 = "1px solid #e8e8e8"，边框圆角 = "8px"，内边距 = "24px"
  • 卡片表单：背景颜色 = "#ffffff"，边框 = "none"，边框圆角 = "12px"，内边距 = "32px"，阴影 = "0 2px 8px rgba(0,0,0,0.1)"
  • 紧凑表单：宽度 = 360，行间距 = 16，内边距 = "16px"

输入字段样式：

  • 标准输入：标签宽度 = 100，输入宽度 = 250，行间距 = 24
  • 宽表单：标签宽度 = 120，输入宽度 = 300，行间距 = 28
  • 紧凑表单：标签宽度 = 80，输入宽度 = 200，行间距 = 16

表单按钮样式：

  • 提交按钮：背景颜色 = "#1890ff"，文本颜色 = "#ffffff"，边框圆角 = "6px"，高度 = 40
  • 重置按钮：背景颜色 = "transparent"，文本颜色 = "#ff4d4f"，边框 = "1px solid #ff4d4f"，边框圆角 = "6px"
  • 按钮组：置内联样式("display", "flex")，置内联样式("gap", "12px")

验证状态样式：

  • 正常状态：边框 = "1px solid #d9d9d9"
  • 聚焦状态：边框 = "1px solid #1890ff"
  • 错误状态：边框 = "1px solid #ff4d4f"
  • 成功状态：边框 = "1px solid #52c41a"

响应式设计：

  • 移动端适配：宽度 = "100%"，置内联样式("max-width", "480px")，置内联样式("margin", "0 auto")

基础示例

简单场景内完整的表单使用演示

' 1. 创建表单
变量 表单1 = 创建 表单()
' 2. 设置属性
表单1.左边 = 100
表单1.顶边 = 100
表单1.宽度 = 400
表单1.标签宽度 = 80
表单1.输入宽度 = 250
表单1.行间距 = 20
' 3. 添加表单字段
表单1.添加输入框("用户名", "", "请输入用户名", "text", "username")
表单1.添加输入框("密码", "", "请输入密码", "password", "password")
表单1.添加下拉框("城市", [
    {文本:"请选择城市", 值:""},
    {文本:"北京", 值:"BJ"},
    {文本:"上海", 值:"SH"},
    {文本:"广州", 值:"GZ"},
    {文本:"深圳", 值:"SZ"}
])
' 4. 设置事件回调
表单1.置被提交回调((源对象, 表单数据) => {
    调试输出("表单提交数据：" + JSON编码(表单数据))
})
' 5. 添加到父容器
添加组件(表单1)

综合示例：用户注册表单

本示例展示表单与各种输入控件配合使用的完整注册场景，包含表单验证、数据处理等功能。

' ========== 创建注册表单 ==========
变量 注册表单 = 创建 表单()
注册表单.左边 = 50
注册表单.顶边 = 50
注册表单.宽度 = 500
注册表单.标签宽度 = 100
注册表单.输入宽度 = 300
注册表单.行间距 = 24
注册表单.背景颜色 = "#ffffff"
注册表单.边框圆角 = "8px"
注册表单.边框 = "1px solid #e8e8e8"
注册表单.内边距 = "32px"
添加组件(注册表单)

' ========== 添加基本信息字段 ==========
注册表单.添加输入框("用户名", "", "请设置4-20位用户名", "text", "username")
注册表单.添加输入框("密码", "", "请设置8-20位密码", "password", "password")
注册表单.添加输入框("确认密码", "", "请再次输入密码", "password", "confirmPassword")
注册表单.添加输入框("邮箱", "", "请输入邮箱地址", "email", "email")
注册表单.添加输入框("手机号", "", "请输入11位手机号", "tel", "phone")

' ========== 添加个人信息字段 ==========
注册表单.添加下拉框("性别", [
    {文本:"请选择性别", 值:""},
    {文本:"男", 值:"male"},
    {文本:"女", 值:"female"},
    {文本:"其他", 值:"other"}
])
注册表单.添加多行编辑框("个人简介", "", "请简单介绍一下自己（选填）", 3)

' ========== 添加协议复选框 ==========
变量 协议复选框 = 注册表单.添加多选项("阅读协议", [
    {文本:"我已阅读并同意《用户协议》和《隐私政策》", 值:"agreement"}
], [])

' ========== 设置提交回调 ==========
注册表单.置被提交回调((源对象, 表单数据) => {
    ' 表单验证
    如果(表单Data.用户名 == "" 或 取文本长度(表单Data.用户名) < 4)
        弹出提示("用户名至少需要4个字符")
        返回
    结束 如果
    
    如果(表单Data.密码 == "" 或 取文本长度(表单Data.密码) < 8)
        弹出提示("密码至少需要8个字符")
        返回
    结束 如果
    
    如果(表单Data.密码 != 表单Data.确认密码)
        弹出提示("两次输入的密码不一致")
        返回
    结束 如果
    
    如果(表单Data.邮箱 == "" 或 寻找文本("@", 表单Data.邮箱) == 0)
        弹出提示("请输入有效的邮箱地址")
        返回
    结束 如果
    
    如果(表单Data.手机号 == "" 或 取文本长度(表单Data.手机号) != 11)
        弹出提示("请输入11位手机号")
        返回
    结束 如果
    
    如果(协议复选框[0] != 真)
        弹出提示("请阅读并同意用户协议")
        返回
    结束 如果
    
    ' 提交成功处理
    弹出提示("注册成功！")
    调试输出("注册信息：" + JSON编码(表单数据))
    
    ' 清空表单
    注册表单.清空()
})

' ========== 添加表单按钮 ==========
注册表单.添加按钮组([
    {文本:"注册", 类型:"submit", 样式:"主要"},
    {文本:"重置", 类型:"reset", 样式:"默认"}
])

' ========== 添加表单说明 ==========
变量 说明标签 = 创建 标签()
说明标签.左边 = 50
说明标签.顶边 = 注册表单.顶边 + 注册表单.高度 + 20
说明标签.宽度 = 500
说明标签.高度 = 40
说明标签.文本 = "注册即表示您同意我们的服务条款和隐私政策"
说明标签.文本颜色 = "#999999"
说明标签.字体大小 = "12px"
说明标签.内容水平对齐方式 = "center"
添加组件(说明标签)

函数：添加输入框(标题, 默认值, 提示文本, 类型, 名称)

向表单中添加一个文本输入框，返回创建的input元素。

参数：

  • 标题：输入框的标签文本
  • 默认值：输入框的默认值（可选）
  • 提示文本：输入框的占位提示文本（可选）
  • 类型：输入框类型，如 "text"、"password"、"email"、"tel" 等（可选）
  • 名称：表单提交时的字段名（可选）

示例：

变量 用户名输入框 = 表单1.添加输入框("用户名", "", "请输入用户名", "text", "username")

函数：添加多行编辑框(标题, 默认值, 提示文本, 行数)

向表单中添加一个多行文本编辑框，返回创建的textarea元素。

参数：

  • 标题：编辑框的标签文本
  • 默认值：编辑框的默认值（可选）
  • 提示文本：编辑框的占位提示文本（可选）
  • 行数：编辑框的显示行数（可选）

函数：添加下拉框(标题, 选项数组)

向表单中添加一个下拉选择框，返回创建的select元素。

参数：

  • 标题：下拉框的标签文本
  • 选项数组：选项列表，每个选项包含 文本 和 值 属性

函数：添加单选项(标题, 选项数组, 默认索引)

向表单中添加一组单选框，返回创建的radio元素数组。

函数：添加多选项(标题, 选项数组, 选中索引数组)

向表单中添加一组复选框，返回创建的checkbox元素数组。

函数：添加文件选择框(标题)

向表单中添加一个文件选择框，返回创建的file input元素。

函数：添加按钮组(按钮配置数组)

向表单底部添加一组按钮，返回创建的按钮容器元素。

按钮配置格式：

[
    {文本:"提交", 类型:"submit", 样式:"主要"},
    {文本:"重置", 类型:"reset", 样式:"默认"}
]

函数：获取数据()

获取表单中已输入的数据，返回包含所有字段值的关联数组。

函数：取数据()

获取表单中已输入的数据，与 获取数据() 功能相同。

函数：清空()

清空表单中的所有输入字段，重置为默认状态。

函数：置被提交回调(回调函数)

设置表单提交事件的自定义处理函数。

回调函数格式：

表单1.置被提交回调((源对象, 表单数据) => {
    ' 处理表单数据
    调试输出(表单数据)
})

函数：置按钮被单击回调(回调函数)

设置添加的按钮组被单击时的回调。

事件：被提交(源对象,表单数据)

当表单被提交时触发并回调该事件。

事件处理示例：

事件 注册表单.被提交(源对象, 表单数据)
    调试输出("表单提交：" + JSON编码(表单数据))
结束 事件

事件：按钮被单击(源对象,按钮标题)

当表单按钮被单击时触发并回调该事件。

⚠️ 注意事项

  1. 表单验证：提交前建议进行数据验证，确保数据格式正确。
  2. 字段命名：每个字段应有唯一的名称，便于数据收集和处理。
  3. 用户体验：可添加实时验证反馈，提升用户体验。
  4. 数据安全：敏感数据（如密码）建议在后端进行二次验证。
  5. 响应式设计：考虑在不同设备上的显示效果。

相关文档

  • 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
  • 文档文本类组件_输入框 —— 表单中的输入框组件
  • 文档文本类组件_编辑框 —— 表单中的多行编辑框组件
  • 文档文本类组件_下拉框 —— 表单中的下拉选择组件
  • 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式语法规则