【愚公系列】2022年03月 微信小程序-Form表单

2022-03-08 12:45:20 浏览数 (2)

文章目录

  • 前言
    • 1.Form表单的定义
    • 2.Form表单的属性
  • 一、Form表单
  • 1.Form表单基础使用
    • 2.使用内置behaviors
      • 2.1 wx://form-field
      • 2.2 wx://form-field-group
      • 2.3 wx://form-field-button

前言

1.Form表单的定义

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

  • 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
  • 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  • 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

2.Form表单的属性

属性

类型

默认值

必填

说明

最低版本

report-submit

boolean

false

否

是否返回 formId 用于发送模板消息

1.0.0

report-submit-timeout

number

0

否

等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId

2.6.2

bindsubmit

eventhandle

否

携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}

1.0.0

bindreset

eventhandle

否

表单重置时会触发 reset 事件

1.0.0

一、Form表单

1.Form表单基础使用

代码语言：javascript复制
<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>
代码语言：javascript复制
Page({
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }
})

2.使用内置behaviors

对于 form 组件，目前可以自动识别下列内置 behaviors:

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

2.1 wx://form-field

属性名

类型

描述

最低版本

name

String

在表单中的字段名

1.6.7

value

任意

在表单中的字段值

1.6.7

1、组件定义

代码语言：javascript复制
Component({
  behaviors: ['wx://form-field'],
  data: {
    value: ''
  },
  methods: {
    onChange: function (e) {
      this.setData({
        value: e.detail.value,
      })
    }
  }
})
代码语言：javascript复制
<input placeholder="请输入名字" value="{{value}}" bindinput="onChange" ></input>
代码语言：javascript复制
input {
  margin: 60rpx 30rpx;
  border-bottom: 1px solid grey;
  padding-bottom: 2px;
}

2、表单使用

代码语言：javascript复制
{
  "usingComponents": {
    "custom-form-field": "../components/custom-form-field/custom-form-field"
  }
}
代码语言：javascript复制
<form bindsubmit="formSubmit">
  <text>表单</text>
  <custom-form-field name="custom-name"></custom-form-field>
  <button form-type="submit">提交</button>
</form>
代码语言：javascript复制
text {
  font-size: 40rpx;
  margin: 30rpx;
}
button {
  margin: 30rpx;
}
代码语言：javascript复制
const app = getApp()

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

2.2 wx://form-field-group

1、组件定义

代码语言：javascript复制
// components/custom-comp.js
Component({
  behaviors: ['wx://form-field-group']
})
代码语言：javascript复制
<view>
  <text>姓名: </text>
  <input name="name" />
</view>
<view>
  <text>学生:</text>
  <switch name="student" />
</view>
代码语言：javascript复制
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、表单使用

代码语言：javascript复制
{
  "usingComponents": {
    "custom-comp": "../components/custom-comp"
  }
}
代码语言：javascript复制
<form bindsubmit="formSubmit">
  <custom-comp></custom-comp>
  <button type="primary" form-type="submit">在控制台查看输出</button>
</form>
代码语言：javascript复制
.intro {
  margin: 30px;
  text-align: center;
}
代码语言：javascript复制
const app = getApp()

Page({
  data: {

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

  },
})

2.3 wx://form-field-button

1、组件定义

代码语言：javascript复制
Component({
  behaviors: ['wx://form-field-button']
})
代码语言：javascript复制
 <button type="primary" form-type="submit">在控制台查看输出</button>

2、表单使用

代码语言：javascript复制
{
  "usingComponents": {
    "custom-comp": "../components/custom-comp"
  }
}
代码语言：javascript复制
 <form bindsubmit="submit">
  <input name="name" placeholder="请输入名字"></input>
  <custom-comp></custom-comp>
 </form>
代码语言：javascript复制
input {
  margin: 30rpx;
  padding-bottom: 1px;
  border-bottom: 1px solid gray;
}
代码语言：javascript复制
const app = getApp()

Page({
  data: {

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

  },
})
button field form submit 表单

0 人点赞