一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

</head>

<body>

    <!--输入框属性:placeholder-->

    <div class="list">

        <label class="item item-input">

            <input type="text" placeholder="fist 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-->

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

    <!--堆叠标签-->

    <div>

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

    <!--浮动标签-->

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

    <!--内嵌表单-->

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

    <!--内嵌输入域-->

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

    <!--带图标的输入框-->

    <div class="list list-inset">

        <label class="item item-input">

            <i class="icon ion-search placeholder"></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"></i>

            <input type="search" placeholder="搜索">

        </label>

        <button class="button button-clear">取消</button>

    </div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-表单和输入框的更多相关文章

  1. ionic-CSS：ionic 表单和输入框

    ylbtech-ionic-CSS:ionic 表单和输入框 1.返回顶部 1. ionic 表单和输入框 list 类同样可以用于 input 元素.item-input 和 item 类指定了文本 ...

  2. 【代码笔记】Web-JavaScript-JavaScript表单验证

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. Yii学习笔记之四（表单验证 api 翻译）

    1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数  yii\base\Model::validate()  进行验证 他会返回boolean值的 ...

  4. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  5. .Net web 关于表单标题

    今天跟以前同事学到一个好东西,就是后台web界面表单标题展示的一个方法,新学到的一个方法...赶紧分享一下 在model 属性上加  [DisplayName("标题"), Req ...

  6. KindEditor设置为过滤模式，但在代码模式下提交表单时不过虑HTML标签的解决方法

    KindEditor设置filterMode为true,但在代码模式下提交表单的话,发现并没有过虑掉自己不想保留的HTML标签. 这时只需同步内容前加上红色部分内容即可: onClick=" ...

  7. 不让input表单的输入框保存用户输入的历史记录

    如何不让input表单的输入框保存用户输入的历史记录.  有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...

  8. 清除表单input输入框内数据

    清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...

  9. web之表单form

    表单是我们平常编写Web应用常用的工具,表单(<form>)用来收集用户提交的数据,发送到服务器.比如,用户提交用户名和密码,让服务器验证,就要通过表单.表单是一个包含表单元素或控件的区域 ...

  10. angular学习的一些小笔记(中)之表单验证

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...

随机推荐

  1. 一道面试题（C语言）

    题:输入一个数,列出所有加和等于该数的式子. 分析: 以 6 为例: 从上面的分析就比较容易找到规律了. C语言代码: #include <stdio.h> int main() { in ...

  2. Django(序列化、SweetAlert插件)

    day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...

  3. 三种实现Android主界面Tab的方式

    在平时的Android开发中,我们经常会使用Tab来进行主界面的布局.由于手机屏幕尺寸的限制,合理使用Tab可以极大的利用屏幕资源,给用户带来良好的体验.学会Tab的使用方法已经成为学习Android ...

  4. 什么是RDD？

    顾名思义,从字面理解RDD就是 Resillient Distributed Dataset,即弹性分布式数据集. 它是Spark提供的核心抽象. RDD在抽象上来讲是一种抽象的分布式的数据集.它是被 ...

  5. 第二十二节：Java语言基础-详细讲解位运算符与流程控制语句

    位运算符(二进制位运算) 运算符 运算 例子 << 左移 3 << 2 = 12 --> 3 * 2 * 2 =12 >> 右移 3 >> 1 = ...

  6. 如何使用spring配合mybatis配置多个数据源并应用？

    使用多数据源的场景应该是很多的,如操作同一台服务器上不同的数据库,或者多地机器上的相同或不相同数据库. 虽然涉及到不同数据库时,我们也许可以通过跨库操作的方式,如 other.user 使用同一数据源 ...

  7. Springboot中读取.yml文件

    自定义配置文件application-dev.yml spring: dataresource: druid: driver-class-name: com.mysql.jdbc.Driver url ...

  8. Javascript 实现[网红] 时间轮盘

    话不多说,先上图. 成品链接 大致效果如上图,接下来就开始制作吧. HTML部分: 我们需要将容器旋转rotate使之以圆点为中心. 怎么转呢,请看图. 将同一级的容器用一个大的容器包裹起来,绝对定位 ...

  9. javascript 最全面的数组操作合集

    一.数组添加.删除.替换.截取操作 1.arr.unshift(1) 在数组头部添加一个元素 1 (直接改变原数组,返回值为添加元素后数组的length) 2.arr.shift() 在数组的头部删除 ...

  10. 和嗲妹妹面试python，是种什么体验？

    这次给大家讲讲我2年前去爱奇艺面试高级运维开发岗位的经历,希望对大家带来一些帮助. 公众号「Python专栏」后台回复:自动化运维平台,获取整套自动化运维平台的源代码 聊骚阶段 嗲妹妹:你好,我是爱奇 ...