一，效果图。

二，代码。

<!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. 自适应Simpson法与积分初步

    前言 不知道为什么,今天感觉想要写一下数学的东西,然后就看了一下我还有这个模板不会,顺手写了一下. 没有学过微积分的最好还是看一下求导为好. 求导 听说很多人都不会求导,我写一下吧qwq 令\(f(x ...

  2. hadoop安装hive及java调用hive

     1.安装hive 在安装hive前,请确保已经安装好了hadoop,如未安装,请参考centoos 安装hadoop集群进行安装: 1.1.下载,解压 下载hive2.1.1:http://mirr ...

  3. Java学习笔记51（综合项目：家庭记账系统）

    javaEE的开发模式 1．什么是模式 模式在开发过程中总结出的“套路”,总结出的一套约定俗成的设计模式 2．javaEE经历的模式 model1模式: 技术组成:jsp+javaBean model ...

  4. SeaweedFS上手使用指南

    SeaweedFS是基于go语言开发的高可用文件存储系统,主要特性 1.成存储上亿的文件(最终受制于你的硬盘大小)2.速度快,内存占用小 上手使用比fastDFS要简单很多,自带Rest API. S ...

  5. Jquery 动态追加控件并获取值

    先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...

  6. c++11并行、并发与多线程编程

    首先,我们先理解并发和并行的区别. 你吃饭吃到一半,电话来了,你一直到吃完了以后才去接,这就说明你不支持并发也不支持并行. 你吃饭吃到一半,电话来了,你停了下来接了电话,接完后继续吃饭,这说明你支持并 ...

  7. chrome如何添加扩展程序及登录

    https://jingyan.baidu.com/album/7e440953191a2b2fc0e2ef0c.html?picindex=3

  8. Python3自动化运维之Fabric模版详解

    一.概要 Fabric是基于Python(2.7,3.4+以上版本)实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括 ...

  9. spring cloud+.net core搭建微服务架构：配置中心续（五）

    前言 上一章最后讲了,更新配置以后需要重启客户端才能生效,这在实际的场景中是不可取的.由于目前Steeltoe配置的重载只能由客户端发起,没有实现处理程序侦听服务器更改事件,所以还没办法实现彻底实现这 ...

  10. Atom编辑器中安装Emmet插件失败的问题

    今天使用Atom编辑器安装Emmet插件的时候,刚开始的时候报错: 报错内容如下: Installing “emmet@2.4.3” failed.Show output… Compiler tool ...