一，效果图。

二，代码。

<!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. ASP.NET Core 2.2中的Endpoint路由

    Endpoint路由 在ASP.NET Core 2.2中,新增了一种路由,叫做Endpoint(终结点)路由.本文将以往的路由系统称为传统路由. 本文通过源码的方式介绍传统路由和Endpoint路由 ...

  2. Dispatch Queue 之内存中常驻的几个结构

    _dispatch_main_q 也就是主要主队列,一定运行在主线程里. // 6618342 Contact the team that owns the Instrument DTrace pro ...

  3. linux常用的BootLoader U-boot的前世今生

    U-Boot,全称 Universal Boot Loader,是遵循GPL条款的开放源码项目.U-Boot的作用是系统引导. U-Boot从FADSROM.8xxROM.PPCBOOT逐步发展演化而 ...

  4. python国外博客推荐

    http://michal.karzynski.pl/blog/2013/06/09/django-nginx-gunicorn-virtualenv-supervisor/ https://www. ...

  5. 课程五(Sequence Models)，第一 周（Recurrent Neural Networks） —— 1.Programming assignments：Building a recurrent neural network - step by step

    Building your Recurrent Neural Network - Step by Step Welcome to Course 5's first assignment! In thi ...

  6. Python：SQLMap源码精读—start函数

    源代码 def start(): """ This function calls a function that performs checks on both URL ...

  7. 详解C#的协变和逆变

    一.使用协变(Covariance)和逆变(Contravariance )能够实现数组之间.委托实例和方法之间.泛型委托实例之间.泛型接口的变量和泛型类型的对象之间.泛型接口的变量之间的隐式转换:使 ...

  8. leetcode — two-sum-ii-input-array-is-sorted

    import java.util.ArrayList; import java.util.List; /** * Source : https://oj.leetcode.com/problems/m ...

  9. Kafka命令清单

    一.队列常用命令 #创建topics $ ./kafka-topics.sh --create --zookeeper chenx02:2181 --replication-factor 1 --pa ...

  10. [TensorFlow] Introducing TensorFlow Feature Columns

    Welcome to Part 2 of a blog series that introduces TensorFlow Datasets and Estimators. We're devotin ...