微信小程序表单组件分享及实际应用详细解读

why 130 2024-09-29

1.表单，将组件内的用户输入的 提交。当点击

表单中 formType 为 submit 的  组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。


image.png

1

2

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

</form>

2.picker

从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

image.png

3.label:用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：


二.列子

index.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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

    <view class="section">

        <view class="section__title">姓名：</view>

        <input name="name" placeholder="请输入姓名"  maxlength="12" type="text" focus="false" class="section__iput"/>

    </view>

    <view class="section">

        <view class="section__title">密码：</view>

        <input placeholder="请输入您的密码" password="true" maxlength="12" type="text" focus="false" class="section__iput"/>

    </view>

    <view class="section section_gap">

        <view class="section__title">性别：</view>

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

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

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

        </radio-group>

    </view>

    <view class="section section_gap">

        <view class="section__title">兴趣：</view>

        <checkbox-group name="checkbox">

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

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

        </checkbox-group>

    </view>

    <view class="section">

        <view class="section__title">日期:</view>

        <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" class="section__iput">

            <view class="picker">

            {{date}}

            </view>

        </picker>

    </view>

    <view class="section section_gap">

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

        <switch name="switch"/>

    </view>

    <view class="section">

        <view class="section__title">留言：</view>

        <textarea auto-height placeholder="请输入内容" />

    </view>

    <view class="btn-area">

        <button formType="submit" type="primary">Submit</button>

        <button formType="reset"  type="default">Reset</button>

    </view>

</form>

2.index.wxss

.section{
	margin:10px 20px; 
	display:flex;
	border-bottom:1px solid #ccc;
	padding:15px 0;
}
.section__title{
	width:30%;
}
.section__iput{
	width:70%;
	line-height:25px;
	border:1px solid #ccc;
}
.btn-area{
	display:flex;
	justify-content:center;
	margin:20px;
}
.btn-area button{
	width:40%;
}

3.index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

var app = getApp()

Page({

    data: {

        date: &#39;2016-09-01&#39;,

    },

    //日期

    bindDateChange: function(e) {

        this.setData({

          date: e.detail.value

        })

    },

    //提交

    formSubmit: function(e) {

        console.log(&#39;form发生了submit事件，携带数据为：&#39;, e.detail.value)

    },

    //重置

    formReset: function() {

        console.log(&#39;form发生了reset事件&#39;)

    }

})

image.png


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 输入 属性
上一篇:微信小程序表单验证开发全面解析与实践操作
下一篇:微信小程序列表开发全面详解及实际操作步骤
相关文章

 发表评论

暂时没有评论，来抢沙发吧~