小程序表单页面

html

<form bindsubmit="formSubmit">
    <view class="main">
        <view class="top-title">基本信息</view>
        <view class="form-content">
            <view class="form-item">
                <view class="left">成员姓名</view>
                <input class="right-input" placeholder="请输入成员真实姓名" />
            </view>
            <view class="form-item">
                <view class="left">身份证号</view>
                <input class="right-input" placeholder="请输入身份证号" />
            </view>
            <view class="form-item">
                <view class="left">生存状态</view>
                <input class="right-input" placeholder="请输入生存状态" />
            </view>
            <view class="form-item">
                <text class="left">成员性别</text>
                <view class="sex-box">
                    <radio-group name="sex" bindchange="changeSex">
                        <radio class="radio-item" value="1" checked="checked" color="#DBB975">
                            男
                        </radio>
                        <radio class="radio-item" value="2" checked="" color="#DBB975">女</radio>
                    </radio-group>
                </view>
            </view>
            <view class="form-item">
                <view class="left">与户主关系</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="请选择与户主关系" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">劳动技能</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="请选择劳动技能" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">在校生情况</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="请选择在校生情况" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">健康情况</view>
                <input class="right-input" placeholder="如健康、残疾 、长期慢性病" />
            </view>
        </view>
    </view>
    <view class="bottom">
        <button class="save-btn" form-type="submit">保存</button>
    </view>
</form>

css

page {
    background-color: #ffffff;
}

.main {
    margin-left: 30rpx; 
    margin-right: 30rpx;
    .top-title {
        margin-top: 40rpx;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    .form-item {
        height: 120rpx;
        border-bottom: 1rpx solid #e3e3e3;
        display: flex;
        align-items: center; // 垂直居中
        .left {
            width: 210rpx;
            line-height: 120rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: rgba(102, 102, 102, 1);
        }
        .right-input {
            width: 480rpx;
            font-size: 32rpx;
            line-height: 120rpx;
            font-weight: 500;
            color: rgba(170, 170, 170, 1);
            // border: 1rpx solid red;
        }

        .sex-box {
            width: 480rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            .radio-item:nth-child(2) {
                margin-left: 80rpx;
            }
        }

        .select-box {
            display: flex;
            .more {
                width: 14rpx;
                height: 26rpx;
            }
        }

        
    }

    .form-item:last-child { // 必须很纯粹，才可以
        border-bottom: 0rpx solid #e3e3e3;
    }
}
.bottom {
    background-color: #f6f6f6;
    padding-top: 70rpx;
    height: 190rpx;
    overflow-y: hidden;
    .save-btn {
        margin-right: 30rpx;
        margin-left: 30rpx;
        width: 690rpx;
        height: 102rpx;
        background: rgba(78, 135, 241, 1);
        border-radius: 6rpx;
        line-height: 102rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
    }
}

js

// pages/tmp/add_member.js
Page({
  formSubmit({ detail: { value } }) {
    console.log('form发生了submit事件，携带数据为：', value);
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    array:['选项一','选项二','选项三'],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

小程序中的select，通过picker组件来实现。