Summarize and organize common form components of WeChat mini programs

This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces some common form components, including button, checkbox, input, label and other related issues. The following is Let's take a look, hope it helps everyone.

【Related learning recommendations: 小program learning tutorial】

1. Commonly used form components

1.1 button

is a button component, which is one of the commonly used form components and is used for event triggering and form submission. Its attribute table is shown below.

Code example:

<view>
  <view>7.button小案例</view>
  <view>(1)迷你按钮</view>
  <button>主要按钮</button>
  <button>次要按钮</button>
  <button>警告按钮</button>
  <view>(2)按钮状态</view>
  <button>普通按钮</button>
  <button>警用按钮</button>
  <button>加载按钮</button>
  <view>(3)增加按钮事件</view>
  <button>点我获取用户信息</button></view>

1.2 checkbox

　

is a check box component, often used to select multiple data in a form. The <checkbox-group></checkbox-group> of the check box is the parent control, and several <checkbox></checkbox> child controls are nested inside it. 　

The attributes are as follows:

##　　<checkbox></checkbox>

The attributes of the component are as follows: :

Code example:

checkbox.wxml

<view>
  <view>8.checkbox小案例</view>
  <view>利用for循环批量生成</view>
  <checkbox-group>
    <label>
      <checkbox></checkbox>{{item.value}}
    </label>
  </checkbox-group>
</view>

checkbox.js

Page({
  data: {
    items: [
      { name: "tiger", value: "老虎" },
      { name: "elephant", value: "大象" },
      { name: "lion", value: "狮子", checked: "true" },
      { name: "penguin", value: "企鹅" },
      { name: "elk", value: "麋鹿" },
      { name: "swan", value: "天鹅" },
    ]
  },
  checkboxChange:function(e) {
    console.log("checkbox发生change事件，携带value值为：", e.detail.value)
  }})

1.3 input



is an input box component, often used for inputting text (such as name, age, etc.). The attribute table is as follows:

<view>
  <view>9.input小案例</view>
  <view>(1)文字输入框</view>
  <input>
  <view>(2)密码输入框</view>
  <input>
  <view>(3)禁用输入框</view>
  <input>
  <view>(4)为输入框增加事件监听</view>
  <input></view>

1.4 label

　　

is the label component , will not render any effect, but can be used to improve the usability of form components. When the user clicks the text within the label element, this control will be triggered. That is, when the user selects the label, the event will be passed to the form control related to the label. You can use the for attribute to bind the id, or you can put the space in Inside the tag, the corresponding properties of the component are as follows.

wxml

<view>
  <view>10.lable小案例</view>
  <view>(1)利用for属性</view>
  <checkbox-group>
    <checkbox></checkbox>
    <label>老虎</label>
    <checkbox></checkbox>
    <label>大象</label>
    <checkbox></checkbox>
    <label>狮子</label>
  </checkbox-group>
  <view>(2)label包裹组件</view>
  <checkbox-group>
    <label>
      <checkbox></checkbox>老虎    </label>
    <label>
      <checkbox></checkbox>大象    </label>
    <label>
      <checkbox></checkbox>狮子    </label>
  </checkbox-group></view>

1.5 form

is the form control component, used to submit the form content in the component.

A variety of components can be nested inside the control component.

Component properties are as follows:

##form.wxml

<view>
  <view>11.form小案例</view>
  <view>模拟注册功能</view>
  <form>
    <text>用户名:</text>
    <input>
    <text>密码:</text>
    <input>
    <text>手机号:</text>
    <input>
    <text>验证码:</text>
    <input>
    <button>注册</button>
    <button>重置</button>
  </form></view>

form.js

Page({
  onSubmit(e) {
    console.log("form发生了submit事件，携带数据为：")
    console.log(e.detail.value)
  },
  onReset() {
    console.log("form发生了reset事件，表单已被重置")
  }})

·Enter the test data and click The register button triggers the form submit event.

##1.6 radio



is a radio button component, which often needs to be matched with component is used,

tags are nested in

. #　##<radio-group></radio-group>The component properties are as follows:## ：

radio.wxml

<view>
  <view>14.radio小案例</view>
  <view>利用for循环批量生成</view>
  <radio-group>
    <block>
      <radio></radio>{{item.value}}    </block>
  </radio-group></view>

radio.js

Page({
  data: {
    radioItems: [
      { name: 'tiger', value: '老虎' },
      { name: 'elephant', value: '大象' },
      { name: 'lion', value: '狮子', checked: 'true' },
      { name: 'penguin', value: '企鹅' },
      { name: 'elk', value: '麋鹿' },
      { name: 'swan', value: '天鹅' },
    ]
  },
  radioChange:function(e) {
    console.log("radio发生change事件，携带value值为：", e.detail.value)
  }})

1.7 slider

  

is a sliding selector, used to visually and dynamically change the value of a variable. The attribute table is as follows:

slider.wxml

<view>
  <view>15.slider小案例</view>
  <view>(1)滑动条右侧显示当前进度值</view>
  <slider></slider>
  <view>(2)自定义滑动条颜色与滑块样式</view>
  <slider></slider>
  <view>(3)禁用滑动条</view>
  <slider></slider>
  <view>(4)增加滑动条监听事件</view>
  <slider></slider></view>

1.8 switch

  <switch></switch>为开关选择器，常用于表单上地开关功能，属性表如下所示。

switch.wxml

<view>
  <view>16.switch小案例</view>
  <view>增加switch事件监听</view>
  <switch></switch>
  <switch></switch></view>

1.9 textarea

  <textarea></textarea>为多行输入框，常用于多行文字的输入。

2、实训小案例–问卷调查

survey.wxml

<view>
  <form>
    <view>1.你现在大几？</view>
    <radio-group>
      <radio></radio>大一      <radio></radio>大二      <radio></radio>大三      <radio></radio>大四    </radio-group>

    <view>2.你使用手机最大的用途是什么？</view>
    <checkbox-group>
      <label><checkbox></checkbox>社交</label>
      <label>
        <checkbox></checkbox>网购</label>
      <label>
        <checkbox></checkbox>学习</label><label>
        <checkbox></checkbox>其他</label>

    </checkbox-group>
    <view>3.平时每天使用手机多少小时？</view>
    <slider></slider>

     <view>4.你之前有使用过微信小程序吗？</view>
    <radio-group>
      <radio></radio>无      <radio></radio>有    </radio-group>

    <view>5.谈谈你对微信小程序未来发展的看法</view>
    <textarea></textarea>
    <button>提交</button>
    <button>重置</button>
  </form></view>

survey.js

Page({
  universityChange: function (e) {
    console.log("你选择的现在大几：", e.detail.value)
  },

  mobilChange: function (e) {
    console.log("你选择使用手机的最大用途是：", e.detail.value)
  },


  timechange: function (e) {
    console.log("你选择的每天使用手机的时间是：", e.detail.value + "小时")
  },

  programChange: function (e) {
    console.log("你选择的是否使用过微信小程序：", e.detail.value)
  },
 
 
  onSubmit(e) {
    console.log("你输入的对小程序发展前途的看法是："+e.detail.value.textarea)

  },
  onReset() {
    console.log("表单已被重置")
  }})

【相关学习推荐：小程序学习教程】

The above is the detailed content of Summarize and organize common form components of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!