Small program form development

info.wxml interface:

<!--Main container-->
<view class="info-container">

<!--User Information-->
<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:

/**User information style**/
.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({
  /**
   * Initial data of the page
   */
  data: {
     array:['IT','Manufacturing','Internet','Network Equipment'],
     date:"1992-10-12",
     index:'0'
  },
  /**
   * Get form data
   */
  submitData:function(event){
    console.log(event.detail.value)
    wx.showToast({
      title: 'Data modified successfully',
    })
  },
    /**
   * Get industry data
   */
  bindIndustryChange:function(event){
    this.setData({
      index: event.detail.value
    })
 
  },
    /**
   * Get date data
   */
  bindDateChange: function (event) {
    this.setData({
      date: event.detail.value
    })
  },
})



 

Interface effect: