Introduction to form interpretation and analysis of WeChat applet component form

This article describes how to interpret and analyze the form component of the applet:

Form to input Submit.

When you click

The formType in the form is submit The value in the form component is submitted, and the name must be added to the form component as the key.

Form component usage:

Reset:Reset

The sample code of the form component runs as follows:

The following is the WXML code:

    
       
    
     
Form control
      
         
         
    
     
Your name:
          
        
       
         
    
     
Gender:
          
            
     
      Male        
     
      Female        
     
      Others      
        
       
         
    
     
Age:
          
        
       
         
    
     
Development languages:
          
            
     
      Java        
     
      JavaScript
    
   
  

The following is the JS code:

Page ({data: {pickerHidden: true, chosen: '', modalHidden: true, name:'', gender: '', age:'', technology :'', isPublic: ''}, formSubmit: function (e) {var value = e. detail. value; this. setData ({modalHidden: false, name: value. name, gender: value. gender, age: value. age, technology: value. technology, isPublic: value. isPublic}); console. log ('form has a submit event, with the following data: ', e. detail. value)}, formReset: function (e) {console. log ('form has a reset event and carries the following data: ', e. detail. value) this. setData ({chosen: ''})}, modalChange: function (e) {this. setData ({modalHidden: true })},})

The following is the WXSS code:

wx-label {  display: block;  margin-top: 10rpx;  margin-left: 15rpx;}.section__title{  font-size: 30rpx;  margin-bottom: 30rpx;  font-weight: bold;}.page {    min-height: 100%;    flex: 1;    background-color: #FBF9FE;    font-size: 32rpx;    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;    overflow: hidden;}.page__hd{    padding: 50rpx 50rpx 100rpx 50rpx;    text-align: center;}.page__title{    display: inline-block;    padding: 20rpx 40rpx;    font-size: 32rpx;    color: #AAAAAA;    border-bottom: 1px solid #CCCCCC;}.page__desc{    display: none;    margin-top: 20rpx;    font-size: 26rpx;    color: #BBBBBB;}.section{    margin-bottom: 80rpx;}.section_gap{    padding: 0 30rpx;}.section__title{    margin-bottom: 16rpx;    padding-left: 30rpx;    padding-right: 30rpx;}.section_gap .section__title{    padding-left: 0;    padding-right: 0;}.btn-area{    padding: 0 30px;}.btn-area button{    margin-top: 20rpx;    margin-bottom: 20rpx;}.page input{    padding: 20rpx 30rpx;    background-color: #fff;    margin-left: 20rpx;}

Main Attributes of form:

Note:

The modal component used in this case is about to expire. we recommend that you use the wx. showModal API.

You can rewrite the formSubmit method. Currently, the content of the wx. showModal API does not support line breaks. it may be a Bug and is expected to be optimized later.

FormSubmit: function (e) {var value = e. detail. value; wx. showModal ({title: 'the form you entered is as follows', content: 'name:' + value. name + 'gender: '+ value. gender + 'age: '+ value. age + 'development language: '+ value. technology + 'public information: '+ value. isPublic, showCancel: false, success: function (res) {if (res. confirm) {console. log ('User click ')}}});},

The preceding section describes how to interpret and analyze the form of the applet component. For more information, see other related articles in the first PHP community!