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

发表于 2020-10-26 分类于开发， F-跨平台，微信小程序阅读时长 ≈ 2 分钟

一概述

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

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

二编写调查问卷表单页面

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

2.1 index.wxml

<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 样式代码

.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": "调查问卷",

一 概述

二 编写调查问卷表单页面