微信小程序 表单Form实例详解（附源码）

微信小程序微信小程序 表单表单Form实例详解（附源码）实例详解（附源码）

主要介绍了微信小程序 表单Form实例详解的相关资料,这里对form 表单进行了详细介绍，并附实例代码，需要

的朋友可以参考下

微信小程序微信小程序 表单表单Form实例实例

表单表单Form的应用很广泛，我们可以利用的应用很广泛，我们可以利用form设计登录注册，也可以设计一种答题问卷的形式，今天主要讲一下设计登录注册，也可以设计一种答题问卷的形式，今天主要讲一下form的使用的使用

form表单，将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为：name:value，所

以表单中控件都需要添加name属性，否则找不到对应控件的值。其主要属性：

主要代码，创建一个主要代码，创建一个form表单：表单：

（e.detail.value.nameName1）调用,

form自带有提交和重置按钮，会自动获取表单中所有控件值的改变-->

<form class="page__bd" bindsubmit="formSubmit" bindreset="formReset">

<view class="section section_gap">

<view class="section__title">switch开关</view>

<switch name="switch"/>

</view>

<view class="section section_gap">

<view class="section__title">slider滑块</view>

<slider value="50" name="slider" show-value ></slider>

<view class="section__title">radio单选</view>

<radio-group name="radio-group">

<label><radio value="radio1"/>radio1</label>

<label><radio value="radio2"/>radio2</label>

</radio-group>

</view>

<view class="section section_gap">

<view class="section__title">checkbox多选</view>

<checkbox-group name="checkbox">

<label><checkbox value="checkbox1"/>checkbox1</label>

<view class="picker">

当前选择：{{array[index]}}

</view>

</picker>

</view>

<view class="section">

<view class="section__title">时间选择器</view>

<picker name="timePicker" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">

<view class="picker">

当前选择: {{time}}