1.案例分析
本节将通过开发一个调查问卷的案例来学习常用表单组件的使用，以及如何收集用户填写的表单信息提交给服务器，
或者从服务器获取数据后显示在表单中。
实现效果如下，
有单行文本框，单选框，复选框，文本域，以及一个提交按钮。当用户单击提交按钮后，会将表单中填写的值提交给服务器。
2.编写表单页面
在微信开发者工具中创建一个新项目，然后在项目中创建pages/index/index页面，在该页面的index.wxml文件中编写调查问卷的表单。
index.wxml代码如下：
1 <!--index.wxml--> 2 <view class="container"> 3 <form bindsubmit="submit"> 4 <view> 5 <text>姓名：</text> 6 <input name="name" value="张三" /> 7 </view> 8 <view> 9 <text>性别：</text> 10 <radio-group name="gender"> 11 <label><radio value="0" checked />男</label> 12 <label><radio value="1" />女</label> 13 </radio-group> 14 </view> 15 <view> 16 <text>专业技能：</text> 17 <checkbox-group name="skills"> 18 <label><checkbox value="html" checked />HTML</label> 19 <label><checkbox value="css" checked />CSS</label> 20 <label><checkbox value="js" />JavaScript</label> 21 <label><checkbox value="ps" />Photoshop</label> 22 </checkbox-group> 23 </view> 24 <view> 25 <text>您的意见：</text> 26 <textarea name="opinion" value="测试" /> 27 </view> 28 <button form-type="submit">提交</button> 29 </form> 30 </view>
index.wxss代码如下
1 /**index.wxss**/
2 .container {
3 margin: 50rpx;
4 padding: 0rpx;
5 }
6 view{
7 margin-bottom: 30rpx;
8 }
9 input{
10 width: 600rpx;
11 margin-top: 10rpx;
12 border-bottom: 2rpx solid #ccc
13 }
14 label{
15 display: block;
16 margin: 8rpx;
17 }
18 textarea{
19 width: 600rpx;
20 height: 100rpx;
21 margin-top: 10rpx;
22 border: 2rpx solid #eee;
23 }
View Code
index.json文件中设置导航栏标题，代码如下：
1 {
2 "navigationBarTitleText": "调查问卷"
3 }
View Code
3.服务器数据交互
将用户提交的表单提交到服务器，可以通过小程序中的网络API wx.request()来实现。
需要注意的是，对于正式上线的项目，小程序要求服务器域名必须在小程序管理后台中添加，域名必须经过ICP备案，且值支持HTTPS和WSS协议。
对于开发人员来说，为了学习方便，可以在微信开发者工具中关闭这些验证，从而利用本地服务器来测试网络功能。
接下来，本地搭建一个服务器。
标签：index,程序,调查,表单,提交,服务器,margin,问卷 From： https://www.cnblogs.com/Vincent-yuan/p/17118116.html