一，效果图。

二，代码。

<!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. GCD on Blackboard

    题目大意:给你n个数,然后在这n个数中选一个数,选中的这个数可以变成任意的数,使这n个数的gcd(最大公约数)最大.打印这个最大的gcd. 思路:这题一看貌似很复杂,其实这题只要你知道前缀和  和  ...

  2. 4.json解析

    格式 {"name":"zhangsan", "age":18, "books":[{"name": ...

  3. JSP标准标签库：JSTL

    JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能. jstl出现的目的同el一样也是要代替jsp页面中的脚本代码. ...

  4. GraphQL：你的容颜，十万光年

    What? GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源.SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQ ...

  5. Linux - 基础命令汇总

    珠玉在前,不再赘言. 60个命令 对Linux新手非常有用的20个命令 对中级Linux用户非常有用的20个命令 对Linux专家非常有用的20个命令 一些技巧 最实用的 Linux 命令行使用技巧 ...

  6. vueAdmin ui基础包

    这个版本的vueAdmin ui是针对官网版本进行修改而成,主要修改了后端接口修改,登录等等,一个通用的前端工程基础包,即开即用,省去了前期繁琐配置 Demo Build Setup # Clone ...

  7. package.json文件中dependencies和devDependencies的区别

    在工作和学习中,我经常会用的npm 下载各种包,有时就会遇到各种npm 的形式,现在就捋一捋 首先要先了解   package.json文件中dependencies和devDependencies的 ...

  8. Linux驱动：内核等待队列

    在Linux中, 一个等待队列由一个"等待队列头"来管理,等待队列是双向链表结构. 应用场合:将等待同一资源的进程挂在同一个等待队列中. 数据结构 在include/linux/w ...

  9. 05-TypeScript中的方法新功能（下）

    再TypeScript中,方法还有一些新功能能够让我们更好的控制方法执行. 1.Generator方法: yield关键字用于控制方法在执行的时候暂停住,后续方法调用方又可以从暂停的地方继续执行,这种 ...

  10. zookeeper集群操作【这里只说明简单的操作步骤,zk的相关参数、说明请参考官方文档】

      本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作.        [这里是在一台机器上搭建的 zk伪集群] 1.从官网下载下载zk http://apa ...