组件：表单输入框

表单输入框组件用于带标题标签的输入字段，支持设置标题、内容、提示文本、输入类型（文本、密码、数字、邮箱、手机号、日期、时间、颜色、文件等）、置内容被改变回调等特性，常用于表单中成对的标签与输入组合场景。

典型使用场景：

用户注册表单（用户名、密码、邮箱等字段）
信息录入表单（姓名、电话、地址等）
搜索表单（关键词、筛选条件）
设置表单（偏好配置、参数调整）
数据验证表单（格式检查、实时反馈）

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作	属性/方法	示例
设置输入框标题	`标题`	`表单输入框1.标题 = "用户名："`
设置/获取输入内容	`内容`	`表单输入框1.内容 = "张三"`
设置提示文本	`提示文本`	`表单输入框1.提示文本 = "请输入用户名"`
设置输入类型	`输入类型`	`表单输入框1.输入类型 = "email"`
设置禁用状态	`禁用`	`表单输入框1.禁用 = 真`
设置只读状态	`只读`	`表单输入框1.只读 = 真`
设置最大长度	`最大长度`	`表单输入框1.最大长度 = 20`
设置内容改变回调	`置内容被改变回调(回调)`	`表单输入框1.置内容被改变回调((源对象, 新内容) => { ... })`

样式美化参考

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

输入框样式变体：

标准输入框：边框圆角 = 6，边框 = "1px solid #d9d9d9"，内边距 = "8px 12px"，背景颜色 = "#ffffff"
圆角输入框：边框圆角 = 20，边框 = "1px solid #d9d9d9"，内边距 = "10px 16px"
下划线输入框：边框 = "none"，边框底边 = "2px solid #d9d9d9"，边框圆角 = 0
阴影输入框：边框圆角 = 6，边框 = "1px solid #d9d9d9"，置内联样式("box-shadow", "0 2px 8px rgba(0,0,0,0.1)")

状态样式：

正常状态：边框 = "1px solid #d9d9d9"
聚焦状态：边框 = "2px solid #1890ff"
错误状态：边框 = "1px solid #ff4d4f"
成功状态：边框 = "1px solid #52c41a"
禁用状态：背景颜色 = "#f5f5f5"，光标样式 = "not-allowed"，透明度 = 0.6

尺寸样式：

大尺寸输入框：宽度 = 400，高度 = 48，字体大小 = 16，内边距 = "12px 16px"
中尺寸输入框：宽度 = 300，高度 = 36，字体大小 = 14，内边距 = "8px 12px"
小尺寸输入框：宽度 = 160，高度 = 28，字体大小 = 12，内边距 = "4px 8px"

特殊类型样式：

密码输入框：输入类型 = "password"，字体大小 = "14px"
数字输入框：输入类型 = "number"，文本对齐 = "right"
搜索输入框：输入类型 = "search"，置内联样式("background-image", "url('search-icon.png')")

标签样式：

左对齐标签：标题位置 = "left"，标题宽度 = 80，标题颜色 = "#333333"
右对齐标签：标题位置 = "right"，标题宽度 = 80，标题颜色 = "#666666"
顶部标签：标题位置 = "top"，标题颜色 = "#333333"，标题字体大小 = "12px"

验证反馈样式：

错误提示：边框 = "1px solid #ff4d4f"，置内联样式("background-image", "url('error-icon.png')")
成功提示：边框 = "1px solid #52c41a"，置内联样式("background-image", "url('success-icon.png')")

实时验证：通过 置内容被改变回调 实时更新样式，例如：

表单输入框1.置内容被改变回调((源对象, 新内容) => {
  如果(为空(新内容))
      表单输入框1.边框 = "1px solid #ff4d4f"  ' 错误状态
  否则
      表单输入框1.边框 = "1px solid #52c41a"  ' 成功状态
  结束 如果
})

基础示例

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

' 1. 创建表单输入框
变量 表单输入框1 = 创建 表单输入框()
' 2. 设置属性
表单输入框1.左边 = 100
表单输入框1.顶边 = 100
表单输入框1.宽度 = 320
表单输入框1.标题 = "邮箱"
表单输入框1.输入类型 = "email"
表单输入框1.提示文本 = "请输入邮箱地址"
表单输入框1.内容 = "user@example.com"
表单输入框1.最大长度 = 50
' 3. 设置事件回调
表单输入框1.置内容被改变回调((源对象, 新内容) => {
    ' 实时验证邮箱格式
    如果(寻找文本("@", 新内容) > 0 且 寻找文本(".", 新内容) > 寻找文本("@", 新内容))
        表单输入框1.边框 = "1px solid #52c41a"  ' 成功状态
    否则
        表单输入框1.边框 = "1px solid #d9d9d9"  ' 默认状态
    结束 如果
    
    调试输出("邮箱：" + 新内容)
})
' 4. 添加到父容器
添加组件(表单输入框1)

综合示例：用户信息录入表单

本示例展示多个表单输入框配合使用的完整信息录入场景，包含实时验证、格式检查、状态反馈等功能。

' ========== 创建用户信息表单容器 ==========
变量 表单容器 = 创建 标签()
表单容器.左边 = 50
表单容器.顶边 = 50
表单容器.宽度 = 500
表单容器.高度 = 500
表单容器.背景颜色 = "#ffffff"
表单容器.边框圆角 = "8px"
表单容器.边框 = "1px solid #e8e8e8"
表单容器.内边距 = "24px"
添加组件(表单容器)

' ========== 创建用户名表单输入框 ==========
变量 输入框_用户名 = 创建 表单输入框()
输入框_用户名.左边 = 0
输入框_用户名.顶边 = 0
输入框_用户名.宽度 = 100%
输入框_用户名.标题 = "用户名："
输入框_用户名.输入类型 = "text"
输入框_用户名.提示文本 = "请设置4-20位用户名"
输入框_用户名.最大长度 = 20
输入框_用户名.边框圆角 = "6px"
输入框_用户名.边框 = "1px solid #d9d9d9"
输入框_用户名.内边距 = "8px 12px"
输入框_用户名.置内容被改变回调((源对象, 新内容) => {
    ' 用户名验证：4-20位，只能包含字母、数字、下划线
    变量 长度 = 取文本长度(新内容)
    如果(长度 < 4 或 长度 > 20)
        输入框_用户名.边框 = "1px solid #ff4d4f"
        输入框_用户名.提示文本 = "用户名长度应在4-20位之间"
    否则
        输入框_用户名.边框 = "1px solid #52c41a"
        输入框_用户名.提示文本 = "用户名格式正确"
    结束 如果
})
添加组件(输入框_用户名)

' ========== 创建密码表单输入框 ==========
变量 输入框_密码 = 创建 表单输入框()
输入框_密码.左边 = 0
输入框_密码.顶边 = 60
输入框_密码.宽度 = 100%
输入框_密码.标题 = "密码："
输入框_密码.输入类型 = "password"
输入框_密码.提示文本 = "请设置8-20位密码"
输入框_密码.最大长度 = 20
输入框_密码.边框圆角 = "6px"
输入框_密码.边框 = "1px solid #d9d9d9"
输入框_密码.内边距 = "8px 12px"
输入框_密码.置内容被改变回调((源对象, 新内容) => {
    ' 密码强度检测
    变量 长度 = 取文本长度(新内容)
    变量 强度 = "弱"
    变量 颜色 = "#ff4d4f"
    
    如果(长度 >= 8)
        强度 = "中"
        颜色 = "#faad14"
    结束 如果
    
    如果(长度 >= 12 且 寻找文本数字(新内容) > 0 且 寻找文本字母(新内容) > 0)
        强度 = "强"
        颜色 = "#52c41a"
    结束 如果
    
    输入框_密码.边框 = "1px solid " + 颜色
    输入框_密码.提示文本 = "密码强度：" + 强度
})
添加组件(输入框_密码)

' ========== 创建确认密码表单输入框 ==========
变量 输入框_确认密码 = 创建 表单输入框()
输入框_确认密码.左边 = 0
输入框_确认密码.顶边 = 120
输入框_确认密码.宽度 = 100%
输入框_确认密码.标题 = "确认密码："
输入框_确认密码.输入类型 = "password"
输入框_确认密码.提示文本 = "请再次输入密码"
输入框_确认密码.最大长度 = 20
输入框_确认密码.边框圆角 = "6px"
输入框_确认密码.边框 = "1px solid #d9d9d9"
输入框_确认密码.内边距 = "8px 12px"
输入框_确认密码.置内容被改变回调((源对象, 新内容) => {
    ' 密码一致性检查
    如果(新内容 != 输入框_密码.内容)
        输入框_确认密码.边框 = "1px solid #ff4d4f"
        输入框_确认密码.提示文本 = "两次输入的密码不一致"
    否则
        输入框_确认密码.边框 = "1px solid #52c41a"
        输入框_确认密码.提示文本 = "密码确认正确"
    结束 如果
})
添加组件(输入框_确认密码)

' ========== 创建邮箱表单输入框 ==========
变量 输入框_邮箱 = 创建 表单输入框()
输入框_邮箱.左边 = 0
输入框_邮箱.顶边 = 180
输入框_邮箱.宽度 = 100%
输入框_邮箱.标题 = "邮箱："
输入框_邮箱.输入类型 = "email"
输入框_邮箱.提示文本 = "请输入有效的邮箱地址"
输入框_邮箱.最大长度 = 50
输入框_邮箱.边框圆角 = "6px"
输入框_邮箱.边框 = "1px solid #d9d9d9"
输入框_邮箱.内边距 = "8px 12px"
输入框_邮箱.置内容被改变回调((源对象, 新内容) => {
    ' 邮箱格式验证
    如果(为空(新内容))
        输入框_邮箱.边框 = "1px solid #d9d9d9"
        输入框_邮箱.提示文本 = "请输入邮箱地址"
    否则 如果(寻找文本("@", 新内容) > 0 且 寻找文本(".", 新内容) > 寻找文本("@", 新内容))
        输入框_邮箱.边框 = "1px solid #52c41a"
        输入框_邮箱.提示文本 = "邮箱格式正确"
    否则
        输入框_邮箱.边框 = "1px solid #ff4d4f"
        输入框_邮箱.提示文本 = "请输入有效的邮箱地址"
    结束 如果
})
添加组件(输入框_邮箱)

' ========== 创建手机号表单输入框 ==========
变量 输入框_手机号 = 创建 表单输入框()
输入框_手机号.左边 = 0
输入框_手机号.顶边 = 240
输入框_手机号.宽度 = 100%
输入框_手机号.标题 = "手机号："
输入框_手机号.输入类型 = "tel"
输入框_手机号.提示文本 = "请输入11位手机号"
输入框_手机号.最大长度 = 11
输入框_手机号.边框圆角 = "6px"
输入框_手机号.边框 = "1px solid #d9d9d9"
输入框_手机号.内边距 = "8px 12px"
输入框_手机号.置内容被改变回调((源对象, 新内容) => {
    ' 手机号格式验证
    变量 长度 = 取文本长度(新内容)
    如果(长度 == 11 且 寻找文本数字(新内容) == 11)
        输入框_手机号.边框 = "1px solid #52c41a"
        输入框_手机号.提示文本 = "手机号格式正确"
    否则
        输入框_手机号.边框 = "1px solid #ff4d4f"
        输入框_手机号.提示文本 = "请输入11位数字手机号"
    结束 如果
})
添加组件(输入框_手机号)

' ========== 创建提交按钮 ==========
变量 按钮_提交 = 创建 按钮()
按钮_提交.左边 = 0
按钮_提交.顶边 = 300
按钮_提交.宽度 = 100%
按钮_提交.高度 = 44
按钮_提交.文本 = "提交注册"
按钮_提交.背景颜色 = "#1890ff"
按钮_提交.文本颜色 = "#ffffff"
按钮_提交.边框圆角 = "6px"
按钮_提交.字体大小 = "16px"
按钮_提交.置被单击回调((源对象, 事件对象) => {
    ' 验证所有字段
    变量 验证通过 = 真
    
    如果(输入框_用户名.边框 != "1px solid #52c41a")
        验证通过 = 假
    结束 如果
    
    如果(输入框_密码.边框 != "1px solid #52c41a")
        验证通过 = 假
    结束 如果
    
    如果(输入框_确认密码.边框 != "1px solid #52c41a")
        验证通过 = 假
    结束 如果
    
    如果(输入框_邮箱.边框 != "1px solid #52c41a")
        验证通过 = 假
    结束 如果
    
    如果(输入框_手机号.边框 != "1px solid #52c41a")
        验证通过 = 假
    结束 如果
    
    如果(验证通过)
        弹出提示("注册信息提交成功！")
        ' 这里可以添加实际的提交逻辑
    否则
        弹出提示("请检查并修正表单中的错误")
    结束 如果
})
添加组件(按钮_提交)

' ========== 添加表单说明 ==========
变量 说明标签 = 创建 标签()
说明标签.左边 = 0
说明标签.顶边 = 360
说明标签.宽度 = 100%
说明标签.高度 = 24
说明标签.文本 = "* 所有字段均为必填项，请确保信息准确无误"
说明标签.文本颜色 = "#999999"
说明标签.字体大小 = "12px"
说明标签.内容水平对齐方式 = "center"
添加组件(说明标签)

属性：标题

类型： 文本型
说明： 设置或获取输入框的标题文本，显示在输入框上方或左侧。

属性：内容

类型： 文本型
说明： 设置或获取输入框中的文本内容。

属性：提示文本

类型： 文本型
说明： 设置或获取输入框的提示文本，当输入框为空时显示。

属性：输入类型

类型： 文本型
说明： 设置或获取输入框类型，支持：
- text：普通文本输入
- password：密码输入（显示为圆点）
- email：邮箱输入（带邮箱验证）
- tel：电话号码输入（数字键盘）
- number：数字输入（带上下调按钮）
- date：日期选择
- time：时间选择
- datetime-local：日期时间选择
- url：URL地址输入
- search：搜索输入框
- color：颜色选择器
- file：文件选择
- image：图片选择
- audio：音频选择
- video：视频选择

属性：禁用

类型： 逻辑型
说明： 设置或获取输入框是否禁用，禁用后用户无法输入。

属性：只读

类型： 逻辑型
说明： 设置或获取输入框是否为只读状态，只读状态下用户无法修改内容但可以查看。

属性：最大长度

类型： 数值型
说明： 设置或获取输入框允许输入的最大字符数。

函数：置内容被改变回调(回调函数)

设置当输入框内容被改变时的回调函数，回调函数返回两个参数：(事件对象, 新内容)

回调函数格式：

表单输入框1.置内容被改变回调((源对象, 新内容) => {
    ' 处理内容变化
    调试输出("新内容：" + 新内容)
})

事件：内容被改变(源对象,新内容)

当输入框内容被改变时触发并回调该事件。

事件处理示例：

事件 表单输入框1.内容被改变(源对象, 新内容)
    调试输出("内容变为：" + 新内容)
结束 事件

⚠️ 注意事项

输入验证：建议在 置内容被改变回调 中添加实时验证逻辑，提升用户体验。
类型限制：不同输入类型有不同的验证规则，如 email 会自动验证邮箱格式。
性能优化：避免在回调中执行耗时操作，特别是频繁触发的内容变化事件。
移动端适配：移动端设备上，不同输入类型会显示不同的键盘布局，需考虑用户体验。
无障碍访问：建议为输入框添加适当的 aria-label 属性，提升可访问性。

轻语言网站开发SDK文档