微信小程序实现调查问卷表单

最新推荐文章于 2025-02-27 17:33:31 发布

C币贫困户

最新推荐文章于 2025-02-27 17:33:31 发布

阅读量4.1k

点赞数 5

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_48747169/article/details/124050907

版权

微信小程序专栏收录该内容

9 篇文章

订阅专栏

该博客展示了如何使用微信小程序创建一个问卷调查表单，包括输入学号、姓名、多选题、滑块选择、单选题、文本输入、开关选择等元素，并实现了表单提交和重置功能。用户可以填写个人信息、选择手机用途、评估使用时长、回答是否打球、分享课程收获以及评价课程难度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序问卷调查表单

功能演示：

20220408_202155

index.wxml


<view id="container-top">
<view id="container-img">
<swiper indicator-dots="true" autoplay="true" interval="3000" indicator-active-color="black">
<swiper-item>
<image src="../../img/1.png" class="img"></image>
</swiper-item>
<swiper-item>
<image src="../../img/2.png" class="img"></image>
</swiper-item>
<swiper-item>
<image src="../../img/3.png" class="img"></image>
</swiper-item>
</swiper>
</view>
<form bindsubmit="formsubmit" bindreset="formreset">
<view>1、输入你的学号</view>
<input type="text" placeholder="请输入你的学号" name="code"/>
<view>2、输入你的姓名</view>
<input type="text" placeholder="请输入你的姓名" name="name"/>
<view>3、你是用手机的最大用途是什么</view>
<checkbox-group name="use">
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
  <label><checkbox value="{{item.val}}"/>{{item.val}}</label>
</block>
</checkbox-group>
<view>4、每天使用手机多少小时</view>
<slider value="0" show-value max="24" name="time"/>
<view>5、平常打不打球</view>
<radio-group name="ball">
  <label><radio value="打"/>打</label>
  <label><radio value="不打"/>不打</label>
</radio-group>
<view>6、谈谈目前课程所得</view>
<input type="text"  name="get" placeholder="请输入你的收获"/>
<view>7、这门课难不难</view>
<switch name="hard"/>
<view>
<button type="primary" class="button" form-type="submit" size="mini">点击提交</button>
<button type="primary" class="button" form-type="reset" size="mini">点击重置</button>
</view>
</form>
</view>
<view id="container-bottom">
<view>学号：{{code}}</view>
<view>姓名：{{name}}</view>
<view>所得：{{get}}</view>
<view>时长：{{time}}个小时</view>
<view>用途：{{use}}</view>
<view>打球：{{ball}}</view>
<view>难度：{{hard}}</view>

</view>

index.wxss

input{
  border: 1px black solid;
  margin-top: 2%;
  margin-bottom: 2%;
}

.button{
  display: inline-block;
  margin-left: 15%;
}

#container-top{
  height: 70%;
}
#container-bottom{
  height: 30%;
}
#container-img{
  width: 80%;
  margin-left: 15%;
}
.img{
  margin-left: 5%;
  margin-top: 5%;
  width: 90%;
  height: 90%;
  border-radius: 6%;
}

index.js


Page({
data:{
  code:"",
  name:"",
  use:[],
  time:"",
  ball:"",
  get:"",
  hard:"",
  items:[{val:"社交"},{val:"购物"},{val:"学习"},{val:"其他"},],
},

formsubmit:function(e){
this.setData({
  code:e.detail.value.code,
  name:e.detail.value.name,
  time:e.detail.value.time,
  ball:e.detail.value.ball,
  get:e.detail.value.get,
  hard:e.detail.value.hard,
  use:e.detail.value.use
})
},
formreset:function(e){
this.setData({
  code:"",
  name:"",
  use:"",
  time:"",
  ball:"",
  get:"",
  hard:""
})
}
})