[Yugong Series] March 2022 WeChat Mini Program-Form Form

---

foreword

1. Definition of Form

The form is mainly responsible for the data collection function in the web page. A form has three basic components:

• Form tag: This contains the URL of the CGI program used to process the form data and the method for submitting the data to the server.

• Form fields: Contains text boxes, password boxes, hidden fields, multi-line text boxes, checkboxes, radio buttons, drop-down selection boxes, and file upload boxes.

• Form buttons: including submit buttons, reset buttons, and general buttons; CGI scripts used to transfer data to the server or cancel input, and form buttons can also be used to control other processing tasks that define processing scripts.

2. Form properties

Attributes	Types of	Defaults	Required	illustrate	Minimum version
report-submit	boolean	false	no	Whether to return formId for sending template message	1.0.0
report-submit-timeout	number	0	no	Wait a while (in milliseconds) for formId to take effect. If this parameter is not specified, there is a small chance that the formId will be invalid (such as in the case of a network failure). Specifying this parameter will check whether the formId is valid, and use the time of this parameter as the timeout for this check. If it fails, it will return the formId starting with requestFormId:fail	2.6.2
bindsubmit	eventhandle		no	Carry the data in the form to trigger the submit event, event.detail = {value : {'name': 'value'} , formId: ''}	1.0.0
bindreset	eventhandle		no	The reset event is fired when the form is reset	1.0.0

1. Form form

1. Basic use of Form

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

Page({
    
    
  formSubmit: function (e) {
    
    
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function () {
    
    
    console.log('form发生了reset事件')
  }
})

2. Use built-in behaviors

For form components, the following built-in behaviors are currently automatically recognized:

• wx://form-field
• wx://form-field-group
• wx://form-field-button

2.1 wx://form-field

property name	Types of	describe	Minimum version
name	String	field names in the form	1.6.7
value	any	Field values ​​in the form	1.6.7

1. Component Definition

Component({
    
    
  behaviors: ['wx://form-field'],
  data: {
    
    
    value: ''
  },
  methods: {
    
    
    onChange: function (e) {
    
    
      this.setData({
    
    
        value: e.detail.value,
      })
    }
  }
})

<input placeholder="请输入名字" value="{
    
    {value}}" bindinput="onChange" ></input>

input {
    
    
  margin: 60rpx 30rpx;
  border-bottom: 1px solid grey;
  padding-bottom: 2px;
}

2. Form usage

{
    
    
  "usingComponents": {
    
    
    "custom-form-field": "../components/custom-form-field/custom-form-field"
  }
}

<form bindsubmit="formSubmit">
  <text>表单</text>
  <custom-form-field name="custom-name"></custom-form-field>
  <button form-type="submit">提交</button>
</form>

text {
    
    
  font-size: 40rpx;
  margin: 30rpx;
}
button {
    
    
  margin: 30rpx;
}

const app = getApp()

Page({
    
    
  formSubmit: function(e) {
    
    
    console.info('表单提交携带数据', e.detail.value)
  },
})

2.2 wx://form-field-group

1. Component Definition

// components/custom-comp.js
Component({
    
    
  behaviors: ['wx://form-field-group']
})

<view>
  <text>姓名: </text>
  <input name="name" />
</view>
<view>
  <text>学生:</text>
  <switch name="student" />
</view>

view {
    
    
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 30rpx;
}
text {
    
    
  margin-right: 30rpx;
}
input {
    
    
  padding-bottom: 1px;
  border-bottom: 1px solid gray;
}

2. Form usage

{
    
    
  "usingComponents": {
    
    
    "custom-comp": "../components/custom-comp"
  }
}

<form bindsubmit="formSubmit">
  <custom-comp></custom-comp>
  <button type="primary" form-type="submit">在控制台查看输出</button>
</form>

.intro {
    
    
  margin: 30px;
  text-align: center;
}

const app = getApp()

Page({
    
    
  data: {
    
    

  },
  formSubmit: function(e) {
    
    
    console.info('表单提交携带数据', e.detail.value)
  },
  onLoad: function () {
    
    

  },
})

2.3 wx://form-field-button

1. Component Definition

Component({
    
    
  behaviors: ['wx://form-field-button']
})

 <button type="primary" form-type="submit">在控制台查看输出</button>

2. Form usage

{
    
    
  "usingComponents": {
    
    
    "custom-comp": "../components/custom-comp"
  }
}

 <form bindsubmit="submit">
  <input name="name" placeholder="请输入名字"></input>
  <custom-comp></custom-comp>
 </form>

input {
    
    
  margin: 30rpx;
  padding-bottom: 1px;
  border-bottom: 1px solid gray;
}

const app = getApp()

Page({
    
    
  data: {
    
    

  },
  submit: function (e) {
    
    
    console.log("表单携带的数据：", e.detail.value)
  },
  onLoad: function () {
    
    

  },
})