⼩程序开发之——调查问卷-编写表单页⾯（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="张三"/>htmlradio的text出不来
</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 ainer {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": "调查问卷",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。