ionic-CSS：表单 Forms

Forms & Inputs(表单和输入框)

list 类同样可以用于 input 元素。item-input 和item 类指定了文本框及其标签。

Ionic 更倾向于在元素<label> 外创建item-input , 这样无论任何某一行的任何部位被点击的时候都可以进入输入状态.

另外, 开发者们需要知道不同的 HTML5 Input 类型,这样就可以重现给用户不同的键盘.

输入框属性: Placeholder 标签

以下实例中，默认为100%宽度（左右两侧没有边框），并使用placeholder 属性设置输入字段预期值的提示信息。当用户开始输入的时候Placeholder标签就会隐藏掉, 注意正确使用<textarea>
的多行输入.

<div class="list"> 
  <label class="item item-input"> 
    <input type="text" placeholder="First Name"> 
  </label> 
  <label class="item item-input"> 
    <input type="text" placeholder="Last Name"> 
  </label> 
  <label class="item item-input"> 
    <textarea placeholder="Comments"></textarea> 
  </label>
</div>

输入框属性：Input Labels

使用 input-label 将标签放置于输入框 input 的左侧。同时你还可以使用placeholder。

<div class="list"> 
  <label class="item item-input"> 
    <span class="input-label">Username</span> 
    <input type="text"> 
  </label> 
  <label class="item item-input"> 
    <span class="input-label">Password</span> 
    <input type="password"> 
  </label>
</div>

Text Input: Stacked Labels(堆叠标签)

堆叠标签通常位于输入框的头部。每个选项使用 item-stacked-label 类指定。每个输入框需要指定input-label。以下实例也使用了placeholder 属性来设置信息输入提示。

<div class="list"> 
  <label class="item item-input item-stacked-label"> 
    <span class="input-label">First Name</span> 
    <input type="text" placeholder="John"> 
  </label> 
  <label class="item item-input item-stacked-label"> 
    <span class="input-label">Last Name</span> 
    <input type="text" placeholder="Suhr"> 
  </label> 
  <label class="item item-input item-stacked-label"> 
    <span class="input-label">Email</span> 
    <input type="text" placeholder="john@suhr.com"> 
  </label>
</div>

Text Input: Floating Labels(浮动标签)

浮动标签类似于堆叠标签，但浮动标签有一个动画的效果，每个选项需要指定item-floating-label 类，输入标签需要指定input-label。

<div class="list"> 
  <label class="item item-input item-floating-label"> 
    <span class="input-label">First Name</span> 
    <input type="text" placeholder="First Name"> 
  </label> 
  <label class="item item-input item-floating-label"> 
    <span class="input-label">Last Name</span> 
    <input type="text" placeholder="Last Name"> 
  </label> 
  <label class="item item-input item-floating-label"> 
    <span class="input-label">Email</span> 
    <input type="text" placeholder="Email"> 
  </label>
</div>

Inset Forms(内嵌表单)

默认情况下每个输入域宽度都是100%，但我们可以使用list list-inset 或card 类设置表单的内边距(padding)，card
类带有阴影。另外, 如果列表的父元素有 padding 那么当前元素同样会有一个内嵌的表现.

<div class="list list-inset"> 
  <label class="item item-input"> 
    <input type="text" placeholder="First Name"> 
  </label> 
  <label class="item item-input"> 
    <input type="text" placeholder="Last Name"> 
  </label>
</div>

Inset Inputs(内嵌输入域)

使用 list-inset 设置内嵌实体列表。使用 item-input-inset 样式可以内嵌一个按钮。

<div class="list"> 

  <div class="item item-input-inset"> 
    <label class="item-input-wrapper"> 
      <input type="text" placeholder="Email"> 
    </label> 
    <button class="button button-small"> Submit </button> 
  </div>

</div>

Input Icons(带图标的输入框)

item-input 输入框可以很简单的添加图标。图标可以在<input> 前添加。默认的图标会使用label文字的颜色, 但你也可以添加placeholder-icon来改变placeholder的颜色

<div class="list list-inset"> 
  <label class="item item-input"> 
    <i class="icon ion-search placeholder-icon"></i> 
    <input type="text" placeholder="Search"> 
  </label>
</div>

Header Inputs(头部输入框)

输入框可放置在头部，并可添加提交或取消按钮。

<div class="bar bar-header item-input-inset"> 
  <label class="item-input-wrapper"> 
    <i class="icon ion-ios-search placeholder-icon"></i> 
    <input type="search" placeholder="Search"> 
  </label> 
  <button class="button button-clear"> 
    Cancel 
  </button>
</div>

ionic-CSS：表单 Forms