小程序表单开发

最新推荐文章于 2025-07-02 09:48:24 发布

云徒川

最新推荐文章于 2025-07-02 09:48:24 发布

阅读量8.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签：表单小程序

本文链接：https://blog.youkuaiyun.com/liberalliushahe/article/details/79287195

本文介绍了如何在小程序中开发表单，详细讲解了wxml、wxss和js文件的编写，展示了最终的界面效果，涵盖了表单组件的使用和交互逻辑的实现。

info.wxml界面：

<!--主容器-->
<view class="info-container">

<!--用户信息-->
<form bindsubmit="submitData" >
 <view class="page-body-setting">
  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">  <text>昵称:  </text></view>
  <view class="info-text"> 长歌</view>
  </view>
  </view>

  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">  <text>姓名:  </text></view>
  <view class="info-text"> <input name="name" class="input-text" /></view>
  </view>
  </view>

  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">性别:</view>
  <view class="info-text">
  
  <radio-group name="sex">
  <radio value="1" checked="true">男</radio>
  <radio value="0">女</radio>
  </radio-group>
  </view>
  </view>
  </view>

  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name"> 地址:</view>
  <view class="info-text">  <input name="address" class="input-text" /></view>
  </view>
  </view>

    <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">行业:</view>
  <view class="info-text"> <picker bindchange="bindIndustryChange" name="industry" value="{{index}}" range="{{array}}">
    <view class="picker">
 {{array[index]}}
    </view>
  </picker></view>
  </view>
  </view>

  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">号码:</view>
  <view class="info-text">  <input name="phone" class="input-text" maxlength="10" /></view>
  </view>
  </view>

  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">生日:</view>
  <view class="info-text">
    <picker name="birthday" bindchange="bindDateChange" mode="date" value="{{date}}" start="1990-01-01" end="2018-12-31">
    <view class="picker">
{{date}}
    </view>
  </picker>
  
  </view>
  </view>
  </view>

  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">公司:</view>
  <view class="info-text"> <input name="company" class="input-text" /></view>
  </view>
  </view>

  <view class="page-body-setting-item" >
  <view class="own-info-item">
  <view class="info-name">职位:</view>
  <view class="info-text">  <input name="work" class="input-text" /></view>
  </view>
   </view>

  <view>
  <button class="button" form-type="submit">修改信息</button>
  </view>

  </view>
  
</form>
</view>

info.wxss:

/**用户信息样式**/
.info-container{
   background-color:#EFEFF4;
  height: 100%;
}
.page-body-setting {
  margin-top: 12rpx;
  height: 100%;
}

.page-body-setting-item {
  height: 90rpx;
  background-color: #fff;
  font-size: 32rpx;
  line-height: 90rpx;
   border-bottom-width: 90%;
  border-bottom: 2px solid #EFEFF4;
 
}
.own-info-item{
  width: 100%;
  display: flex;
  justify-content: space-around;
  
}
.info-name{
  width: 40%;
  font-size: 14px;
  color: gray;
  text-align: left;
  margin-left: 10px;
}
.info-text{
  width: 60%;
    text-align: right;
    margin-right: 10px;
  font-size: 14px;
  color:gray;
}
.input-text{
  margin-top: 20rpx;
}
.button{
  margin-top: 8px;
 background-color:#00BFFF;
 color: #FFF;
 width: 96%;
 margin-bottom: 10px;
}
.button-hover {
  background-color: green;
}

info.js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
     array:['IT','制造业','互联网','网络设备'],
     date:"1992-10-12",
     index:'0'
  },
  /**
   * 获取表单数据
   */
  submitData:function(event){
    console.log(event.detail.value)
    wx.showToast({
      title: '数据修改成功',
    })
  },
    /**
   * 获取行业数据
   */
  bindIndustryChange:function(event){
    this.setData({
      index: event.detail.value
    })
 
  },
    /**
   * 获取日期数据
   */
  bindDateChange: function (event) {
    this.setData({
      date: event.detail.value
    })
  },
})

界面效果：