Analysis of forms in WeChat mini programs

This article mainly introduces the relevant information about the detailed explanation of the WeChat mini program Form example. Here is a detailed introduction to the form form, and the example code is attached. Friends in need can refer to it

WeChat Mini Program Form Example

Form Form is widely used. We can use form design to log in and register, or we can design a form of answering questionnaires. Today we will mainly talk about the use of form

Form form, submit the values of "switch", "input", "checkbox", "slider", "radio", and "picker" entered in the component. The format of the data is: name :value, so all controls in the form need to add a name attribute, otherwise the value of the corresponding control cannot be found. Its main attributes:

Main code to create a form:

  form表单    
  switch开关    slider滑块    input输入框    radio单选  radio1 radio2    checkbox多选  checkbox1 checkbox2    地区选择器   当前选择：{{array[index]}}     时间选择器   当前选择: {{time}}     日期选择器   当前选择: {{date}}     Submit提交 Reset重置  

How to get the value of the control inside the form, you need to use the relevant properties of the form. The code is as follows

// pages/index/Component/FormM/FormM.js Page({ //初始化数据 data: { array: ['大中国', '美国', '巴西', '小日本'], index: 0, date: '2016-12-20', time: '11:19', allValue:'' }, //表单提交按钮 formSubmit: function(e) { console.log('form发生了submit事件，携带数据为：', e.detail.value) this.setData({ allValue:e.detail.value }) }, //表单重置按钮 formReset: function(e) { console.log('form发生了reset事件，携带数据为：', e.detail.value) this.setData({ allValue:'' }) }, //---------------------与选择器相关的方法 //地区选择 bindPickerChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, //日期选择 bindDateChange: function(e) { this.setData({ date: e.detail.value }) }, //时间选择 bindTimeChange: function(e) { this.setData({ time: e.detail.value }) }, })

## Rendering:

Result value in the output form:

Introduction to the GET request of the WeChat applet

WeChat applet implements the pop-up menu function

The above is the detailed content of Analysis of forms in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!