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

功能演示：

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:""
})
}
})