WiFiManager项目中获取自定义HTML表单值的方法解析

在物联网开发中，WiFiManager是一个非常实用的库，它简化了ESP系列设备连接WiFi网络的配置过程。本文将详细介绍如何在WiFiManager项目中获取自定义HTML表单中输入的值。

自定义HTML表单的使用场景

WiFiManager允许开发者通过custom_html_inputs添加自定义的HTML表单元素到配置页面。这在需要用户进行额外配置时非常有用，比如：

• 选择设备工作模式
• 设置设备参数
• 配置设备名称等

获取表单值的正确方法

在WiFiManager中，获取自定义HTML表单值的方法与常规Web开发有所不同。以下是两种常见表单元素的获取方式：

1. 单选按钮(Radio Button)的值获取

对于如下的单选按钮组：

<input type='radio' id='choice1' name='program_selection' value='1'>
<input type='radio' id='choice2' name='program_selection' value='2'>

获取选中值的方法是：

String selectedValue = wm.server->arg("program_selection");

2. 下拉选择框(Select)的值获取

对于如下的下拉选择框：

<select name="input_select" id="input_select">
  <option value="0">Option 1</option>
  <option value="1" selected>Option 2</option>
</select>

获取选中值的方法是：

String selectedOption = wm.server->arg("input_select");

实现原理

WiFiManager内部使用了一个Web服务器来处理配置页面。当用户提交表单时，所有的表单数据都会作为HTTP请求的参数发送到服务器。wm.server->arg()方法就是用来获取这些参数的。

注意事项

1. 参数名称匹配：确保arg()方法中的参数名与HTML表单元素的name属性完全一致，包括大小写。

2. 默认值处理：对于可能没有值的表单元素，应该添加默认值处理逻辑。

3. 类型转换：获取的值是String类型，如需数值类型，需要进行类型转换。

4. 多值处理：对于复选框等多值元素，需要使用wm.server->arg()的其他重载方法。

完整示例代码

// 在配置回调函数中获取表单值
void saveConfigCallback() {
  // 获取单选按钮值
  String programSelection = wm.server->arg("program_selection");
  
  // 获取下拉框值
  String inputSelect = wm.server->arg("input_select");
  
  // 将值转换为整数
  int selectedProgram = programSelection.toInt();
  int selectedOption = inputSelect.toInt();
  
  // 使用获取的值进行后续处理
  // ...
}

通过以上方法，开发者可以轻松地在WiFiManager项目中获取用户通过自定义HTML表单输入的值，从而扩展设备的配置功能。