# Form 表单组合
本章节主要讲如何将多个 form 表单组件进行组合，形成一个完整的表单页面。
常见的 form 表单为`单元格`形式的展示，即左侧为表单的标题描述，右侧为表单的输入。
其中，`Input 输入框`、`Picker 选择器`、 `Calendar 日历选择器`, `ColPicker 多列选择器`、`SelectPicker 单复选选择器` 和 `DatetimePicker 日期时间选择器`具有`单元格`的展示形式，而 `InputNumber 计数器`和 `Switch 开关`需要使用 `Cell 单元格`进行包裹使用。
所有的表单组件都支持 `name` 属性，可以结合小程序原生的 `form` 组件，监听 `submit` 事件，统一获取到所有表单组件的 `value`，也可以单独对每个表单组件监听 `change` 事件来获取单个表单组件的 `value`。
> 对于表单组件，建议对 wd-cell-group 开启 border 属性，这样每条cell就会有边框线隔离开，这样表单的划分比较清晰。
下面是 Demo 示例：
html 文件代码：
```html
```
> 自定义按钮组件的 form-type 无法触发小程序官方form组件的submit事件，微信要求小程序基础库 2.10.3 才支持，京东小程序的则暂时不支持，因此需要用小程序自带的官方 button 组件，样式上可以引入 wot-design 中 button 的样式文件，使用 `wd-button` , `is-primary` , `is-suck` , `is-block`, `is-plain` , `is-disabled` 等类名进行组合使用来展示 wot-design 组件库的按钮样式。
index.js 文件代码：
```typescript
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
import { useToast } from '@/uni_modules/wot-design-uni'
import { areaData } from '@/utils/area'
import { ref } from 'vue'
const couponName = ref('')
const couponNameErr = ref(false)
const platform = ref([])
const platformList = ref([
{
value: '1',
label: '京东'
},
{
value: '2',
label: '开普勒'
},
{
value: '3',
label: '手Q'
},
{
value: '4',
label: '微信'
},
{
value: '5',
label: '1号店'
},
{
value: '6',
label: '十元街'
},
{
value: '7',
label: '京东极速版'
}
])
const promotion = ref('1')
const promotionlist = ref([
{
value: '1',
label: '满减'
},
{
value: '2',
label: '无门槛'
}
])
const threshold = ref('')
const price = ref('')
const date = ref(Date.now())
const address = ref([])
const count = ref(1)
const area = ref([
Object.keys(areaData[86]).map((key) => {
return {
value: key,
label: areaData[86][key]
}
})
])
const areaChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
return {
value: key,
label: areaData[selectedItem.value][key]
}
})
)
} else {
finish()
}
}
const content = ref('')
const coun = ref(1)
const read = ref(false)
const switchVal = ref(true)
const cardId = ref('')
const phone = ref('')
const toast = useToast()
const messageBox = useMessage()
function handleCouponName({ value }) {
console.log(value)
couponNameErr.value = false
}
function handlePlatform({ value }) {
console.log(value)
}
function handleThreshold({ value }) {
console.log(value)
}
function handlePrice({ value }) {
console.log(value)
}
function handleAddress({ value }) {
console.log(value)
}
function handleContent({ value }) {
console.log(value)
}
function handleCount({ value }) {
console.log(value)
}
function handleSwitch({ value }) {
console.log(value)
}
function handleRead({ value }) {
read.value = value
}
function handleCardId({ value }) {
console.log(value)
}
function handlePhone({ value }) {
console.log(value)
}
function formSubmit() {
if (!couponName.value) {
toast.error('请填写优惠券名称')
return
}
messageBox.alert('提交成功')
}
function handleIconClick() {
toast.info('优惠券提示信息')
}
function handleDate({ value }) {
console.log(value)
}
```
css 文件代码：
```scss
.inline-txt {
display: inline-block;
font-size: 14px;
margin: 0 8px;
color: rgba(0, 0, 0, 0.45);
vertical-align: middle;
}
:deep(.group) {
margin-top: 12px;
}
.tip {
margin: 10px 15px 21px;
color: #999;
font-size: 12px;
}
.footer {
padding: 0 25px 21px;
}
:deep(.label-class) {
color: #999 !important;
font-size: 12px !important;
}
```