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

举报
愚公搬代码 发表于 2022/03/07 14:41:52 2022/03/07
【摘要】 前言 1.Form表单的定义表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了...

前言

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表单基础使用

<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.使用内置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、组件定义

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、表单使用

{
  "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、组件定义

// 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、表单使用

{
  "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({
  behaviors: ['wx://form-field-button']
})
 <button type="primary" form-type="submit">在控制台查看输出</button>

2、表单使用

{
  "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 () {

  },
})

在这里插入图片描述

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。