Ionic 表单和输入框学习笔记

表单

在 Ionic 中创建表单需要使用组件，如 ion-list、ion-item 等。以下是一个简单的例子：

htmlCopy Code
<ion-header>
  <ion-toolbar>
    <ion-title>表单</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="stacked">用户名</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">密码</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

在上面的代码中，我们创建了一个简单的表单，其中包含两个输入框，分别用于输入用户名和密码。ion-item 组件用于创建表单的每一行，ion-label 组件用于添加标签，ion-input 组件用于添加输入框。

输入框

Ionic 提供了各种类型的输入框，如文本输入框、数字输入框、日期选择器等。以下是一些实例：

文本输入框

htmlCopy Code
<ion-item>
  <ion-label position="floating">姓名</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

数字输入框

htmlCopy Code
<ion-item>
  <ion-label position="floating">年龄</ion-label>
  <ion-input type="number"></ion-input>
</ion-item>

日期选择器

htmlCopy Code
<ion-item>
  <ion-label>出生日期</ion-label>
  <ion-datetime displayFormat="YYYY-MM-DD" pickerFormat="YYYY MM DD"></ion-datetime>
</ion-item>

在上面的代码中，我们使用 ion-datetime 组件创建了一个日期选择器。pickerFormat 属性用于设置选择器的格式，displayFormat 属性用于设置输入框中显示的日期格式。

以上是一些简单的示例，你可以根据需要使用不同类型的输入框。