一、输入框

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

1.输入框属性：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>



2.输入框属性：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>



3.堆叠标签

堆叠标签通常位于输入框的头部。每个选项使用 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>



4.浮动标签

浮动标签类似于堆叠标签，但浮动标签有一个动画的效果，每个选项需要指定 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>



5.内嵌表单

默认情况下每个输入域宽度都是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>



6.内嵌输入域

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



7.带图标的输入框

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



8.头部输入框

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

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

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

<label class="toggle">

   <input type="checkbox">

   <div class="track">

     <div class="handle"></div>

   </div>

</label>

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

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



三、ionic checkbox（复选框）

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

<ul class="list">

  <li class="item item-checkbox">

     <label class="checkbox">

       <input type="checkbox">

     </label>

     Flux Capacitor

  </li>

  ...

</ul>



四、ionic 单选框

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

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



五、ionic Range

ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。

<div class="range">

  <i class="icon ion-volume-low"></i>

  <input type="range" name="volume">

  <i class="icon ion-volume-high"></i>

</div>

<div class="list" style="margin-top: 13px">

  <div class="item item-divider">

    Ranges In A List

  </div>

  <div class="item range range-positive">

    <i class="icon ion-ios-sunny-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="12">

    <i class="icon ion-ios-sunny"></i>

  </div>

  <div class="item range range-calm">

    <i class="icon ion-ios-lightbulb-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="25">

    <i class="icon ion-ios-lightbulb"></i>

  </div>

  <div class="item range range-balanced">

    <i class="icon ion-ios-bolt-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="38">

    <i class="icon ion-ios-bolt"></i>

  </div>

  <div class="item range range-energized">

    <i class="icon ion-ios-moon-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="50">

    <i class="icon ion-ios-moon"></i>

  </div>

  <div class="item range range-assertive">

    <i class="icon ion-ios-partlysunny-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="63">

    <i class="icon ion-ios-partlysunny"></i>

  </div>

  <div class="item range range-royal">

    <i class="icon ion-ios-rainy-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="75">

    <i class="icon ion-ios-rainy"></i>

  </div>

  <div class="item range range-dark">

    <i class="icon ion-ios-lightbulb-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="88">

    <i class="icon ion-ios-lightbulb"></i>

  </div>

</div>



六、ionic select

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。
每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。

<div class="list">

  <div class="item item-input item-select">

    <div class="input-label">

      Lightsaber

    </div>

    <select>

      <option>Blue</option>

      <option selected="">Green</option>

      <option>Red</option>

    </select>

  </div>

  <div class="item item-input item-select">

    <div class="input-label">

      Fighter

    </div>

    <select>

      <option>ARC-170</option>

      <option>A-wing</option>

      <option>Delta-7</option>

      <option>Naboo N-1</option>

      <option>TIE</option>

      <option selected="">X-wing</option>

      <option>Y-wing</option>

    </select>

  </div>

  <div class="item item-input item-select">

    <div class="input-label">

      Droid

    </div>

    <select>

      <option>2-1B</option>

      <option>B1</option>

      <option>C-3PO</option>

      <option>IG-88</option>

      <option>IT-O</option>

      <option selected="">R2-D2</option>

    </select>

  </div>

  <div class="item item-input item-select">

    <div class="input-label">

      Planet

    </div>

    <select>

      <option>Alderaan</option>

      <option selected="">Dagobah</option>

      <option>Felucia</option>

      <option>Geonosis </option>

      <option>Hoth</option>

      <option>Kamino</option>

      <option>Mygeeto</option>

      <option>Naboo</option>

      <option>Tataouine</option>

      <option>Utapau</option>

      <option>Yavin</option>

    </select>

  </div>

</div>



Ionic入门五：表单的更多相关文章

  1. [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用

    前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...

  2. AngularJs入门之表单开发

    本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...

  3. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  4. PHP新手入门1——表单

    注:本身是Android,Android之前是java.但公司后台PHP特别多.就好奇php后台是怎么通过一个url给我数据的(完全不懂php).于是就学呗.学习系列随笔第一人称是一个Android小 ...

  5. php入门之表单创建和基本处理

    为了方便后面学习数组,这里引入了过渡章节就是表单,至于为什么,等真的学习到数组的时候你就会发现它的妙处拉. ============================================== ...

  6. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  7. jeecg入门操作—表单界面

    一.搭建jeecg开发环境 参考环境搭建步骤 https://www.cnblogs.com/dyh004/p/10687633.html 二.创建用户数据库表: 登录上jeecg平台,点击在线开发- ...

  8. AngularJS入门基础——表单验证

    <form name="form" novalidata>   <label name="email">your email</l ...

  9. 前端入门html(表单)

    day48 配置Django项目:https://blog.csdn.net/zV3e189oS5c0tSknrBCL/article/details/79606994 <!DOCTYPE ht ...

随机推荐

  1. Tomcat——Tomcat使用详解

    Tomcat简介 官网:http://tomcat.apache.org/ Tomcat GitHub 地址:https://github.com/apache/tomcat Tomcat是Apach ...

  2. SQL语句（十五）视图

    视图 实际上是一个查询语句, 如果将子查询保存为视图, 就可以将子查询的结果当作数据表使用 从而来简化查询语句 引言 例1 查询参加"数据库技术"课程的考试的学生学号.姓名.班级. ...

  3. [Luogu 3258] JLOI2014 松鼠的新家

    [Luogu 3258] JLOI2014 松鼠的新家 LCA + 树上差分. 我呢,因为是树剖求的 LCA,预处理了 DFN(DFS 序),于是简化成了序列差分. qwq不讲了不讲了,贴代码. #i ...

  4. Angular5基本入门

    基本环境安装 首先,确定安装了nodejs与npm,angular 5要求node版本在6.9.x以上.npm版本在 3.x.x以上: 1.安装@angular/cli npm install -g ...

  5. js 替换部分内容为星号

    function formatPhone(phone) { return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2"); } 姓 ...

  6. 实验一 《网络对抗技术》逆向及Bof技术

  7. 转 -- OK6410 tftp下载内核、文件系统以及nand flash地址相关整理、总结

    转载地址:http://emouse.cnblogs.com/ 飞凌官方提供了一键下载烧写linux的方式,相对来说比较方便,但是对于开发来说不够灵活,因此这篇文章把tftp相关的点介绍一下,整理下其 ...

  8. 用代码从文件中导入数据到SQL Server

    引言 导入数据到SQL Server 是常见的需求,特别是定期导入这种需求. 对于定期导入主要有以下几种方式可选择: Bulk Insert Bcp Utility OpenRowSet 写程序导入( ...

  9. Python练习-一个怪癖老师的不可描述

    # 编辑者:闫龙 # 定义老师类,把老师的属性:薪资,隐藏起来,然后针对该属性开放访问接口 # egon老师有多种癖好,把这种癖好隐藏起来,然后对外提供访问接口 # 而且以后还会egon老师培养很多其 ...

  10. React Native新手入门

    前言 React Native是最近非常火的一个话题,想要学习如何使用它,首先就要知道它是什么. 好像面对一个新手全面介绍它的文章还不多,我就归纳一下所有的资料和刚入门的小伙伴一起来认识它~ 将从以下 ...