ionic 表单和输入框+toggle(切换开关)+checkbox(复选框)+单选框

ionic 表单和输入框

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

输入框属性：placeholder

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

尝试一下 »

输入框属性：input-label

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

 
   
    用户名： 
     
   
   
    密码： 
     
  

尝试一下 »

---

堆叠标签

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

 
   
    First Name 
     
   
   
    Last Name 
     
   
   
    Email 
     
  

尝试一下 »

---

浮动标签

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

 
   
    First Name 
     
   
   
    Last Name 
     
   
   
    Email 
     
  

尝试一下 »

---

内嵌表单

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

尝试一下 »

---

内嵌输入域

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

 

  
 
     
       
     
     
      Submit 
     
  

尝试一下 »

---

带图标的输入框

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

尝试一下 »

---

头部输入框

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

 
   
     
     
   
   
    取消 
  

尝试一下 »

---

---

ionic Toggle(切换开关)

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

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

 

  
 
     HTML5 
      
         
        
 
          
 
        
 
      
  
 

  ...

尝试一下 »

运行效果如下：

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

---

---

ionic checkbox（复选框）

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

 

  
 
     
       
     
    Flux Capacitor 
  
 

  ...

尝试一下 »

运行效果如下：

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

---

---

ionic 单选框

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

 
   
  
 
    Go 
  
 
  


 
   
  
 
    Python 
  
 
  


 
   
  
 
    Ruby 
  
 
  


 
   
  
 
    .Net 
  
 
  


 
   
  
 
    Java 
  
 
  


 
   
  
 
    PHP 
  
 
    

尝试一下 »

运行效果如下：

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