list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。
以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。
| <html ng-app="ionicApp"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> |
| <title>芝麻(web3.xin)</title> |
| <link href="/ionic/css/ionic.min.css" rel="stylesheet"> |
| <script src="/ionic/js/ionic.bundle.min.js"></script> |
| </head> |
| <body> |
| <div class="bar bar-header"> |
| <div class="h1 title">预输入标签</div> |
| </div> |
| <div class="content has-header"> |
| <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> |
| <div class="padding"> |
| <button class="button button-block button-positive">Submit</button> |
| </div> |
| </div> |
| </body> |
| </html> |
使用 input-label 将标签放置于输入框 input 的左侧。
| <div class="list"> |
| <label class="item item-input"> |
| <span class="input-label">用户名：</span> |
| <input type="text"> |
| </label> |
| <label class="item item-input"> |
| <span class="input-label">密码：</span> |
| <input type="password"> |
| </label> |
| </div> |
堆叠标签通常位于输入框的头部。每个选项使用 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> |
浮动标签类似于堆叠标签，但浮动标签有一个动画的效果，每个选项需要指定 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> |
默认情况下每个输入域宽度都是100%，但我们可以使用 list list-inset 或 card 类设置表单的内边距(padding)， card 类带有阴影。
| <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> |
使用 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> |
item-input 输入框可以很简单的添加图标。 图标可以在 <input> 前添加。
| <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> |
输入框可放置在头部，并可添加提交或取消按钮。
| <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="搜索"> |
| </label> |
| <button class="button button-clear"> |
| 取消 |
| </button> |
| </div> |
