【愚公系列】2022年03月 微信小程序

【愚公系列】2022年03月 微信小程序

文章目录

• 前言
• • 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表单的属性

一、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

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 () {},
})