Ionic 的表单组件提供了用于在移动和桌面应用程序中收集用户输入的关键 UI 元素。本页面详细介绍了核心表单控件、它们的实现以及框架中的常见模式。有关导航组件的信息，请参阅导航组件，有关覆盖组件的信息，请参阅覆盖组件。
Ionic 的表单组件是使用 Stencil 构建的 Web 组件，它们提供了一种跨不同平台收集用户输入的统一且可访问的方式。它们与原生表单系统集成，并支持 Angular、React 和 Vue 等各种框架。
来源
Ionic 的表单组件遵循一种一致的架构模式，可以无缝集成原生 HTML 表单和特定于框架的表单系统。
来源
这些组件处理文本和数据输入
| 组件 | 目的 | 关键属性 |
|---|---|---|
ion-input | 文本输入框 | type、value、placeholder |
ion-textarea | 多行文本输入 | autoGrow、rows、cols |
ion-searchbar | 带取消按钮的搜索输入框 | showCancelButton、debounce |
ion-datetime | 日期和时间选择 | presentation、min、max、value |
ion-datetime 组件尤其复杂，支持多种显示格式和本地化选项。它可以配置为显示日期、时间或两者兼有，并支持滚轮或日历界面。
来源
这些组件允许用户进行选择
| 组件 | 目的 | 关键属性 |
|---|---|---|
ion-checkbox | 切换项目的选择 | checked、indeterminate |
ion-radio | 从多个选项中选择一个 | value、checked |
ion-toggle | 二进制开关（开/关） | checked、enableOnOffLabels |
ion-select | 从选项列表中选择 | multiple、interface |
ion-range | 从值范围内选择 | min、max、step、dualKnobs |
来源
表单组件通常嵌套在 ion-item 组件中，该组件提供了一致的布局和样式。 ion-item 组件会自动检测表单元素并应用适当的样式。
来源
表单组件会发出标准化的事件，应用程序可以监听这些事件
| 事件 | 描述 | 触发时机 |
|---|---|---|
ionChange | 值已更改 | 用户交互完成后 |
ionInput | 值正在更改 | 在用户交互过程中 |
ionFocus | 组件获得焦点 | 当用户聚焦组件时 |
ionBlur | 组件失去焦点 | 当用户离开组件时 |
ionStyle | 样式需要更新 | 当某些状态改变时 |
例如，在 ion-datetime 组件中
来源
Ionic 表单组件可与原生 HTML 表单无缝集成。对于使用 Shadow DOM（这会阻止直接访问表单）的组件，Ionic 会实现隐藏的原生输入策略。
这种模式已在各种组件中实现，包括 ion-button 组件，该组件会生成一个隐藏的原生按钮以提交表单。
来源
ion-datetime 组件是 Ionic 中最复杂的表单组件之一，它提供了一个灵活的界面，用于通过各种显示模式进行日期和时间选择。
来源
Ionic 表单组件实现了可访问性功能，以确保每个人都能使用它们
例如，ion-datetime 组件在其日历视图中实现了键盘导航
来源
Ionic 组件通过自定义集成层与特定于框架的表单系统协同工作
| 框架 | 集成机制 | 特性 |
|---|---|---|
| Angular | 指令和 ControlValueAccessor | 双向绑定、响应式表单 |
| React | 自定义 Hooks 和受控组件 | 受控组件模式 |
| Vue | 自定义包装器和 v-model | 使用 v-model 进行双向绑定 |
例如，ion-datetime-button 提供了用于控制日期时间选择的集成功能
来源
表单组件支持 Ionic 的主题系统，具有 CSS 变量和特定于平台的样式
mode 属性的不同样式例如，ion-datetime 组件使用 CSS 变量进行主题自定义
来源
使用 Ionic 表单组件时
ion-item 中以获得一致的样式和布局ionChange 事件进行表单验证和状态更新来源
Ionic 的表单组件提供了一个全面的系统，用于构建在不同平台上一致工作，同时适应特定平台 UX 模式的输入界面。它们旨在与原生表单和框架表单系统集成，并提供广泛的无障碍、验证和自定义支持。