ionic 表单和输入框+toggle(切换开关)+checkb

ionic 表单和输入框

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

输入框属性：placeholder

以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。</small>

<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

<small>使用 input-label 将标签放置于输入框 input 的左侧。</small>

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

尝试一下 »

---

堆叠标签

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

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

尝试一下 »

---

浮动标签

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

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

尝试一下 »

---

内嵌表单

<small>默认情况下每个输入域宽度都是100%，但我们可以使用 list list-inset 或 card 类设置表单的内边距(padding)， card 类带有阴影。</small>

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

尝试一下 »

---

内嵌输入域

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

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

尝试一下 »

---

带图标的输入框

<small>item-input 输入框可以很简单的添加图标。 图标可以在 <input> 前添加。</small>

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

尝试一下 »

---

头部输入框

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

<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 Toggle(切换开关)

<small>切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。
切换开关可以使用 toggle-assertive 来指定颜色。

<label class="toggle"> 
   <input type="checkbox"> 
   <div class="track"> 
      <div class="handle"></div> 
   </div>
</label>

该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。</small>

<ul class="list"> 

  <li class="item item-toggle"> 
     HTML5 
     <label class="toggle toggle-assertive"> 
        <input type="checkbox"> 
        <div class="track"> 
          <div class="handle"></div> 
        </div> 
     </label> 
  </li> 

  ...

</ul>

尝试一下 »

<small>运行效果如下：</small>

[运行效果点击查看](http://www.runoob.com/try/tryit.php?filename=ionic_toggle)

---

---

ionic checkbox（复选框）

<small>ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。
以下实例演示了多个复选框的列表。
注意，每个选项的 item 类后需要添加 item-checkbox 类。
复选框可以使用 checkbox-assertive 来指定颜色。</small>

<ul class="list"> 

  <li class="item item-checkbox"> 
    <label class="checkbox"> 
      <input type="checkbox"> 
    </label> 
    Flux Capacitor 
  </li> 

  ...

</ul>

尝试一下 »

<small>运行效果如下：</small>

[点击查看效果 » ](http://www.runoob.com/try/tryit.php?filename=ionic_item-checkbox)

---

---

ionic 单选框

<small>ionic 当选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。
每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。
ionic 在单选项中使用了 <label> 元素，使其更易点击。</small>
实例

<div class="list">

<label class="item item-radio"> 
  <input type="radio" name="group" value="go" checked="checked"> 
  <div class="item-content"> 
    Go 
  </div> 
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio"> 
  <input type="radio" name="group" value="python"> 
  <div class="item-content"> 
    Python 
  </div> 
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio"> 
  <input type="radio" name="group" value="ruby"> 
  <div class="item-content"> 
    Ruby 
  </div> 
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio"> 
  <input type="radio" name="group" value=".net"> 
  <div class="item-content"> 
    .Net 
  </div> 
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio"> 
  <input type="radio" name="group" value="java"> 
  <div class="item-content"> 
    Java 
  </div> 
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio"> 
  <input type="radio" name="group" value="php"> 
  <div class="item-content"> 
    PHP 
  </div> 
  <i class="radio-icon ion-checkmark"></i>  
</label>

</div>

尝试一下 »

<small>运行效果如下：</small>

[点击查看效果» ](http://www.runoob.com/try/tryit.php?filename=ionic_item-radio)