---
name: "form"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "form - Form"
---

## form

> [VERSION] Base Library >= 2.10.0

### Description

Form container for submitting values of child components.


#### Events

| Event | Type | Description |
| --- | --- | --- |
| `submit` | `(event: FormSubmitEvent) => void` | Triggered with the data from the form |
| `reset` | `(event: FormResetEvent) => void` | Triggered when the form is reset |

**FormSubmitEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"submit"` |  |
| `detail` | `FormSubmitDetail` |  |

**FormResetEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"reset"` |  |
| `detail` | `FormResetDetail` |  |

### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<form bind:submit=\"onSubmit\">
  <input name=\"username\" placeholder=\"Please enter username\" />
  <button form-type=\"submit\">Submit</button>
</form>
```

*index.tyss*

```css
input {
  margin: 20rpx;
  padding: 10rpx;
  border: 1rpx solid #ccc;
}
```

*index.js*

```javascript
Page({
  onSubmit(e) {
    console.log('Form data:', e.detail.value);
  },
});
```

#### Complete form (submit and reset)

*index.tyml*

```xml
// index.tyml
<form bind:submit=\"onSubmit\" bind:reset=\"onReset\">
  <view class=\"form-item\">
    <text>Switch:</text>
    <switch name=\"switch\" />
  </view>
  <view class=\"form-item\">
    <text>Input:</text>
    <input name=\"input\" placeholder=\"Please enter\" />
  </view>
  <view class=\"form-item\">
    <text>Select:</text>
    <checkbox-group name=\"fruits\">
      <label><checkbox value=\"apple\" />Apple</label>
      <label><checkbox value=\"banana\" />Banana</label>
    </checkbox-group>
  </view>
  <button form-type=\"submit\" type=\"primary\">Submit</button>
  <button form-type=\"reset\">Reset</button>
</form>
```

*index.tyss*

```css
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
button {
  margin-top: 10rpx;
}
```

*index.js*

```javascript
Page({
  onSubmit(e) {
    console.log('Submit:', e.detail.value);
  },
  onReset() {
    console.log('Form reset');
  },
});
```


### FAQ

#### Does the miniapp form support silent triggering?

No, it is not supported. The form must be triggered by user interaction.