微信小程序开发之——调查问卷-编写表单页面(2.2.2)

一 概述

本节介绍表单页面相关的内容：

• 编写调查问卷表单页面
• 编写调查问卷样式
• 设置导航栏标题

二 编写调查问卷表单页面

在微信开发者工具中创建一个新项目，然后在项目中创建pages/index/index页面，在该页面的index.wxml文件中编写调查问卷的表单，具体代码如下。

2.1 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

<view class="container"> <form bindsubmit="submit"> <view> <text>姓名：</text> <input name="name" value="张三"/> </view> <view> <text>性别：</text> <radio-group name="gender"> <label><radio value="0" checked/>男</label> <label><radio value="1"/>女</label> </radio-group> </view> <view> <text>专业技能：</text> <checkbox-group name="skills"> <label><checkbox value="html" />HTML</label> <label><checkbox value="css"/>CSS</label> <label><checkbox value="js"/>JavaScript</label> <label><checkbox value="ps"/>Photoshop</label> </checkbox-group> </view> <view> <text>您的意见：</text> <textarea name="opinion" value="测试" /> </view> <button form-type="submit">提交</button> </form> </view>

2.2 代码说明

在上述代码中：

• <radio-group>性别标签标示将其包裹的所有<radio>标签当成一个单选框组，组内只有一个<radio>标签可以被选中。
• <checkbox-group>标签标示将其包裹的所有<checkbox>标签当成一个复选框组，<label>标签的作用类似于HTML中的同名标签，用于单击文本时也可以选中对应的单选或复选框。
• 在<radio>和<checkbox>标签中，value属性表示该项选中时提交的值，checked属性表示该项为选中状态

三 编写调查问卷样式

在pages/index/index.wxss文件中编写样式，具体代码如下：

3.1 样式代码

1 2 3 4 5

.container {margin: 50rpx;} view{margin-bottom: 30rpx;} input{width: 600rpx; margin-top: 10rpx;border: 2rpx solid #ccc;} label{display: block;margin: 8rpx;} textarea{width: 600rpx;height: 100rpx;margin-top: 10rpx;border: 2rpx solid #eee;}

3.2 样式代码说明

在上述代码中，display:block将<label>标签设为块元素，用于使单选框和复选框的每一项都独占一行

四 设置导航栏标题

最后在pages/index/index.json文件中设置导航栏标题，具体代码如下：

1	"navigationBarTitleText": "调查问卷",