输入

输入对于以安全的方式收集和处理用户输入至关重要。他们应该遵循每个平台的造型和互动指南，以便用户直观地进行交互。 Ionic使用Angular 2的表单库，它可以被认为是两个依赖的部分，控件和控件组。

表单中的每个输入字段都有一个Control，一个绑定到该字段中的值的函数，并执行验证。控制组是控件的集合。控制组处理表单提交，并提供可用于确定整个表单是否有效的高级API。

下面列出了可用于样式表单及其各种输入字段的许多属性。有关表单逻辑的更多信息，请查看Inputs API文档。

有关更多信息，请查看API文档。

效果：

固定内联标签

使用fixed将标签放在输入元素的左侧。输入文字时，标签不会隐藏。输入将在同一位置对齐，而不管标签的长度。占位符文本可以与固定标签一起使用。

<ion-list>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

效果：

浮动标签

浮动标签是在选择输入时动画或“浮动”的标签。将 floating 属性添加到要使用的 ion-label。

<ion-list>

  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

效果：

内敛标签

没有任何属性的 ion-label 是内联标签。输入文字时，标签不会隐藏。占位符文本可以与内联标签一起使用。

<ion-list>

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

<div padding>
  <button block>Sign In</button>
</div>

效果：

插入标签

默认情况下，每个输入项将填充其父元素宽度的100％。通过将inset属性添加到 ion-list 组件来进行输入插入。

<ion-list inset>

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

效果：

占位符标签

将 placeholder 属性添加到<input>元素以模拟输入的标签。当输入文本时，占位符标签被隐藏。

<ion-list>

  <ion-item>
    <ion-input type="text" placeholder="Username"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input type="password" placeholder="Password"></ion-input>
  </ion-item>

</ion-list>

效果：

堆叠标签

堆叠的标签将始终显示在输入的顶部。将 stacked 属性添加到要使用的 ion-label。占位符文本可以与堆叠标签一起使用。

<ion-list>

  <ion-item>
    <ion-label stacked>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label stacked>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

效果：

输入（Inputs）

输入