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

使用输入表格

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

您可以使用任何其他元素，但是标签将使您能够点击元素的任何部分以使您的文本输入集中。您可以设置一个占位符，该占位符看起来与输入文本不同，并且在您开始键入时将被隐藏。您可以在下面的示例中看到这一点。

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

离子标签

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

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

堆叠标签

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

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

   
      Label 1
      
   

   
      Label 2
      
   

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

浮动标签

浮动标签是我们可以使用的第三个选项。在我们开始键入之前，这些标签将被隐藏。键入开始后，它们就会以精美的浮动动画出现在元素顶部。我们可以像使用堆叠标签一样使用浮动标签。唯一的区别是这次我们将使用item-floating-label类。

   
      Label 1
      
   

   
      Label 2
      
   

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

插入输入

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

如果在标签旁边添加其他元素，标签大小将进行调整以适应新元素。您也可以在标签内添加元素(通常是图标)。

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

   

              
         
      
      button
   

   

      
         
         
      
   

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