# ionic 表單和輸入框
list 類同樣可以用于 input 元素。item-input 和 item 類指定了文本框及其標簽。
### 輸入框屬性:placeholder
以下實例中,默認為100%寬度(左右兩側沒有邊框),并使用 placeholder 屬性設置輸入字段預期值的提示信息。
```
<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-label
使用 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>
```
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作