前言
1.Form表单的定义
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:
-
表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
-
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
-
表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
2.Form表单的属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
report-submit | boolean | false | 否 | 是否返回 formId 用于发送模板消息 | 1.0.0 |
report-submit-timeout | number | 否 | 等待一段时间(毫秒数)以确认 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)
},
onl oad: 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)
},
onl oad: function () {
},
})