Inputs

http://ionicframework.com/docs/v2/components/#inputs

Inputs是安全的收集和处理用户输入的重要方式。它们应该遵循每个平台的样式和交互原则，所以对用户交互是很直观的。Ionic使用了Angular 2的form库，也就是两个依赖包：Controls和Control Groups。

每个表单的Input区域都有一个Control，可以提供绑定值的功能，并执行验证。Control Group是Control的集合。Control Group处理提交动作，并在提供了较高层次的API来决定表单是否验证通过。

有很多属性可以用来设置表单和其中Input区域的样式。更多表单逻辑的内容请查看API。

Fixed Labels

使用fixed属性在Input元素左侧放一个Label。这个Label在输入文本的时候不会消失。Input会对齐到相同的位置，不管Label是什么长度。占位文本也可以和Fixed Label一起使用。

<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 Labels

Floating Labels当选择输入的时候会浮动到上方。给ion-lable添加floating属性来使用。

<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>

Inline Labels

没有任何属性的ion-label是一个Inline 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>

Inset Labels

每个输入项默认占据父级元素100%宽度。给ion-list组件添加inset属性，Input会嵌入项中。

<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 Labels

为input元素添加placeholder属性，当输入文本的时候，占位文本会消失。

<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 Labels

Stacked Lebel通常会显示在Input上方。给ion-label添加stacked属性。可以和占位文本一起使用。

<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>