一，效果图。

二，代码。

<!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. “全栈2019”Java多线程第三十七章：如何让等待的线程无法被中断

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  2. 「NOI2018」屠龙勇士（EXCRT）

    「NOI2018」屠龙勇士(EXCRT) 终于把传说中 \(NOI2018D2\) 的签到题写掉了... 开始我还没读懂题目...而且这题细节巨麻烦...(可能对我而言) 首先我们要转换一下,每次的 ...

  3. SpringCloud总结

    初级入门使用轮廓,整理一下思路

  4. java visualVM(jconsole)远程监控服务器java进程

    1. JMX方式(jconsole也可通过此方式进行连接) jmx方式能监控到CPU信息,但无法使用visualVM的visualVM GC插件    jmx无密码方式 监控普通的java进程 . 设 ...

  5. LabVIEW（十五）：右键菜单添加创建VI模版

    如果在项目研究中使用到的某一个模版文件次数较多,可以单独为某一个模版文件新建右键选项.以文本格式打开注册表,添加的右键内容即为Data后面的内容.Reg内容不可手动修改,可以通过LabVIEW的编程实 ...

  6. python 牛客网 你的输出为:空。请检查一下你的代码，有没有循环输入处理多个case。问题解决

    你的输出为:空.请检查一下你的代码,有没有循环输入处理多个case.点击查看如何处理多个case 核心:他这个程序测试正确与否的流程是 连续输入多组测试数据进行测试,只有每组数据都对才行 所以必须使用 ...

  7. 从零开始学 Web 之 移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Percona Toolkit mysql辅助利器

    1 PT介绍 Percona Toolkit简称pt工具—PT-Tools,是Percona公司开发用于管理MySQL的工具,功能包括检查主从复制的数据一致性.检查重复索引.定位IO占用高的表文件.在 ...

  9. java学习-消息队列rabbitmq的组成

    rabbitMQ组成部分 rabbitmq有以下组成部分,分别为: 1. Server(broker)接受客户端连接,实现AMQP消息队列和路由功能的进程 2.虚拟主机virtual host虚拟主机 ...

  10. Docker实践:python应用容器化

    一.前言 容器使用沙箱机制,互相隔离,优势在于让各个部署在容器的里的应用互不影响,独立运行,提供更高的安全性.本文主要介绍python应用(django)跑在docker容器里,编写dockerfil ...