Ionic表单

Ionic形式 主要用于与用户交互并收集所需信息。本章将介绍各种文本输入表单，在随后的章节中，我们将解释如何使用Ionic框架使用其他表单元素。

使用输入表格

使用表单的最佳方法是使用 list 和 item 作为主要类。您的应用通常包含多个表单元素，因此将其组织为列表是有意义的。在以下示例中，您可以注意到item元素是标签标记。

您可以使用任何其他元素，但标签将提供点击元素的任何部分以聚焦文本输入的功能。您可以设置一个与输入文本不同的 占位符 ，一旦开始输入，它就会被隐藏。您可以在下面的示例中看到这一点。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上面的代码将生成以下屏幕 -

Ionic形式输入

Ionic标签

Ionic为您的标签提供了一些其他选择。如果希望在键入文本时占位符位于左侧，则可以使用 input-label 类。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上面的代码将生成以下屏幕 -

Ionic输入标签

堆叠标签

堆叠标签 是另一种选项，允许在输入的顶部或底部移动标签。为此，我们将 item-stacked-label 类添加到label元素中，我们需要创建一个新元素并为其分配 input-label 类。如果我们希望它在顶部，我们只需要在输入标记之前添加此元素。这在以下示例中显示。

请注意， span 标记位于输入标记之前。如果我们更改了它们的位置，它将显示在屏幕下方。

<div class = "list">
   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上面的代码将生成以下屏幕

Ionic堆叠标签

浮动标签

浮动标签 是我们可以使用的第三种选择。在我们开始输入之前，这些标签将被隐藏。一旦键入开始，它们将出现在具有漂亮浮动动画的元素的顶部。我们可以像使用堆叠标签一样使用浮动标签。唯一的区别是这次我们将使用 item-floating-label 类。

<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上面的代码将生成以下屏幕

Ionic浮动标签

插入输入

在上一章中，我们讨论了如何插入Ionic元素。您还可以通过将 item-input-inset 类添加到项目以及将 item-input- wrapper 到标签来插入输入。包装器将为您的标签添加额外的样式。

如果在标签旁边添加一些其他元素，则会调整标签大小以适应新元素。您还可以在标签内添加元素（通常是图标）。

以下示例显示了两个插入输入。第一个标签旁边有一个按钮，第二个标签里面有一个图标。我们使用 占位符图标 类来生成与占位符文本颜色相同的图标。没有它，图标将使用标签的颜色。

<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">     
         <input type = "text" placeholder = "Placeholder 1" />
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2" />
      </label>
   </div>
</div>

上面的代码将生成以下屏幕

Ionic插入输入