微信小程序中的表单组件包括 Button、Input、Checkbox、Radio、Switch、Slider、Picker 和 Form。以下是它们的简要介绍以及一些案例:
-
Button(按钮):
-
作用:用于触发事件或提交表单。
-
例子:
<button bindtap="handleTap">Click me</button>
-
-
Input(输入框):
-
作用:用于接收用户输入。
-
例子:
<input type="text" placeholder="请输入内容" bindinput="handleInput" />
-
-
Checkbox(复选框):
-
作用:允许用户选择多个选项。
-
例子:
<checkbox-group bindchange="handleCheckboxChange"> <checkbox value="option1">Option 1</checkbox> <checkbox value="option2">Option 2</checkbox> </checkbox-group>
-
-
Radio(单选框):
-
作用:允许用户从多个选项中选择一个。
-
例子:
<radio-group bindchange="handleRadioChange"> <radio value="option1">Option 1</radio> <radio value="option2">Option 2</radio> </radio-group>
-
-
Switch(开关):
-
作用:用于切换开关状态。
-
例子:
<switch bindchange="handleSwitchChange" />
-
-
Slider(滑动选择器):
-
作用:允许用户在指定范围内选择一个值。
-
例子:
<slider bindchange="handleSliderChange" />
-
-
Picker(选择器):
-
作用:用于从预设的列表中选择一个值。
-
例子:
<picker mode="selector" range="{{array}}" bindchange="handlePickerChange"> <view>{{array[index]}}</view> </picker>
-
-
Form(表单):
-
作用:用于将表单内的组件集合起来,方便提交时一并处理。
-
例子:
<form bindsubmit="handleSubmit"> <!-- 表单内的其他组件 --> <button formType="submit">提交</button> </form>
-
以上是一些微信小程序的表单组件和简单的使用案例。表单组件通常与事件绑定一起使用,以便在用户与表单交互时触发相应的处理函数。