本篇文章主要讲解：使用cocos creator 是如何使用表单中单选、多选、复选、下拉框、输入框等组件的方法。
作者：任聪聪
日期：2023年2月7日
cocos 引擎版本2.4.3
提示: 如果是新手同学，建议结合附件中的demo，来进行学习，这样会有一个整体的操作认知,掌握表单制作的能力也会快一点。
文章附件下载地址：https://download.csdn.net/download/hj960511/87424999
一、按钮的使用
1.1 构造按钮及修改样式
步骤一、点击button组件，拖拽到画布中
步骤二、点击button组件，在左侧可以看到相对应的属性及尺寸，这里我们可以多按钮的大小和尺寸进行调整以及背景和交互效果。
步骤三、修改按钮的名称，点击左侧的层级管理中的，label。
在右侧我们就会看到
点击修改string为，按钮ok。
1.2 事件绑定及获取数据
步骤一、创建一个脚本，右击选择typescript
步骤二、点击空节点，绑定这个脚本，如下：
步骤三、点击button
找到右侧的click events，输入一
步骤四、拖拽空节点到cc.node中，并选择脚本，选择脚本中的函数。
步骤五、修改class name 及创建一个按钮函数
//按钮绑定事件
testBtn (e,v) {
cc.log(e,v)
}
creator中的配置
查看点击效果：
二、单选组件绑定及获取参数说明
2.1 单选框的配置
步骤一、创建单选框组件
步骤二、点击 checkmark 修改单选框的默认属性
步骤三、增加文本说明，右击组件选择label
label配置如下：
实际效果：
2.2 单选框获取数据
步骤一、绑定事件，与上一步相同，这里不做细讲
步骤二、创建对应事件
//radio事件
radioBtn(e,v){
cc.log(v)
this.radio_txt.string = "单选框数据："+v;
}
实际效果：
三、多选框的创建及数据获取
步骤一、创建多选框，并自定义多选组件。
步骤二、创建事件并绑定事件
事件代码：
绑定事件：
tips：与其他组件的绑定形式一致。
实际效果：
tips：上述需要声明对象，并绑定对象，这个在文章的附件中有整体的体现。也可以看我的这篇文章学习如何声明页面对象，控制页面元素变化。【Cocos新手入门】cocos creator操作 canvas绑定脚本及通过代码操作label组件变化的方法
如上图所示，本文章所绑定的相关组件信息。
四、下拉框
步骤一、创建一个按钮，并修改为如下样式
步骤二、创建一个select_box的空节点
步骤三、给空节点绑定上layout的布局，并设置为如下，改为：select_item_box
在空节点中创建item，label类型的。
步骤四、修改样式
步骤五、将opacity改为0，隐藏itembox
步骤六、绑定事件
事件代码：
绑定item的事件
五、输入框
5.1 单行及多行文本说明
文本框属性说明
string ：默认的输入框存在的值
placeholder ：提示信息，输入即消失
input mode： any为多行，其他都为单行
max length ： 最大输入字符数限制
5.2 文本框的数据获取方式
1.监听状态说明
如下是一个文本框的四种监听状态类型，分为输入开始、输入改变、输入结束、输入返回
此处的绑定方式也可在我上方提到的文章内容中找到。
2.监听输入数据并赋值
说明：分别为四种形式的数据获取形式，通过一个函数来做演示，查看我们输入表单后对数据的获取效果。
代码片段：
// v 值 e 事件对象 s 为customEventData的值
getInput(v,e,s){
console.log(v,e,s)
}
监听效果，四种形式
故此：我们选择适合自己场景下的方式即可，这里我们选择的是changed 的状态类型
文本框操作详细教程：【Cocos新手入门】使用 cocos creator 创建单行文本输入框及多行文本输入框
最终效果：
