一，效果图。

二，代码。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Todo</title>
  7.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  9.     <script src="lib/ionic/js/ionic.bundle.js"></script>
  10.     <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
  11.     <script src="js/app2.js"></script>
  12.     <script src="cordova.js"></script>
  13. </head>
  14.  
  15. <body>
  16.     <!--输入框属性:placeholder-->
  17.     <div class="list">
  18.         <label class="item item-input">
  19.             <input type="text" placeholder="fist name">
  20.         </label>
  21.         <label class="item item-input ">
  22.             <input type="text" placeholder="last name">
  23.         </label>
  24.         <label class="item item-input">
  25.             <textarea placeholder="comments"></textarea>
  26.         </label>
  27.     </div>
  28.     <!--输入框属性：input-label-->
  29.     <div class="list">
  30.         <label class="item item-input">
  31.             <span class="input-label">用户名:</span>
  32.             <input type="text">
  33.         </label>
  34.         <label class="item item-input">
  35.             <span class="input-label">密码:</span>
  36.             <input type="password">
  37.         </label>
  38.     </div>
  39.     <!--堆叠标签-->
  40.     <div>
  41.         <label class="item item-input item-stacked-label">
  42.             <span class="input-label">First Name</span>
  43.             <input type="text" placeholder="john">
  44.         </label>
  45.         <label class="item item-input item-stacked-label">
  46.             <span class="input-label">Last name</span>
  47.             <input type="text" placeholder="suhr">
  48.         </label>
  49.         <label class="item item-input item-stacked-label">
  50.             <span class="input-label">email</span>
  51.             <input type="text" placeholder="john@suhr.com">
  52.         </label>
  53.     </div>
  54.     <!--浮动标签-->
  55.     <div class="list">
  56.         <label class="item item-input item-floating-label">
  57.             <span class="input-label">First name</span>
  58.             <input type="text" placeholder="first name">
  59.         </label>
  60.         <label class="item item-input item-floating-label">
  61.             <span class="input-label">Last name</span>
  62.             <input type="text" placeholder="Last Name">
  63.         </label>
  64.         <label class="item item-input item-floating-label">
  65.             <span class="input-label">email</span>
  66.             <input type="text" placeholder="email">
  67.         </label>
  68.     </div>
  69.     <!--内嵌表单-->
  70.     <div class="list list-inset">
  71.         <label class="item item-input">
  72.             <input type="text" placeholder="First Name">
  73.         </label>
  74.         <label class="item item-input">
  75.             <input type="text" placeholder="last Name" </label>
  76.     </div>
  77.     <!--内嵌输入域-->
  78.     <div class="list">
  79.         <div class="item item-input-inset">
  80.             <label class="item-input-wrapper">
  81.                 <input type="text" placeholder="Email">
  82.             </label>
  83.             <button class="button button-small">Submit</button>
  84.         </div>
  85.     </div>
  86.     <!--带图标的输入框-->
  87.     <div class="list list-inset">
  88.         <label class="item item-input">
  89.             <i class="icon ion-search placeholder"></i>
  90.             <input type="text" placeholder="Search">
  91.         </label>
  92.     </div>
  93.     <!--头部输入框-->
  94.     <div class="bar bar-header item-input-inset">
  95.         <label class="item-input-wrapper">
  96.             <i class="icon ion-ios-search placeholder"></i>
  97.             <input type="search" placeholder="搜索">
  98.         </label>
  99.         <button class="button button-clear">取消</button>
  100.     </div>
  101. </body>
  102.  
  103. </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. App设计模式纵横谈（1）

    对我的文章和培训课程感兴趣的可以加我微信16230091进行关注. —————————————————————————————————— 今天聊聊我沉淀比较久的一门技术,设计模式.这里是第一篇,算是概 ...

  2. H5内联视频

    概述 微信上很多H5页面都会有会动的像视屏的页面,这样的效果很棒.从技术上来说,这个其实就是视屏,不过没有控制播放的按钮罢了.它们还有一个专业的名字--内联视频.下面我把自己对内联视屏的学习记录下来, ...

  3. Shell - 简明Shell入门14 - 操作符（Operator）

    示例脚本及注释 #!/bin/bash echo "No code, just some comments." # ### 通配符 # * 代表任意(0个或多个)字符 # ? 代表 ...

  4. 排序算法系列：快速排序算法JAVA版（靠谱、清晰、真实、可用、不罗嗦版）

    在网上搜索算法的博客,发现一个比较悲剧的现象非常普遍: 原理讲不清,混乱 啰嗦 图和文对不上 不可用,甚至代码还出错 为了不误人子弟耽误时间,推荐看一些靠谱的资源,如[啊哈!算法]系列: https: ...

  5. Python——pytessercat识别简单的验证码

    什么是验证码 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computersand Humans Apart” (全自动 ...

  6. [视频]K8飞刀 S2-020 exploit getshell 动画教程

    [视频]K8飞刀 S2-020 exploit getshell 动画教程 链接:https://pan.baidu.com/s/1G5x7Dcu6pzHz6ZfSCDDmKA 提取码:05kw

  7. [每天解决一问题系列 - 0009] File System Redirector

    问题描述: 在64位操作系统下,知道Wow64是干什么的,但一直不知道是怎么工作的 相关解释: https://msdn.microsoft.com/en-us/library/windows/des ...

  8. Alienware 15 R3 装Ubuntu 和 win10 双系统

    一.安装环境 Alienware 15 R3 win10 专业版64位 ubuntu16.04 二.软件下载 1.Ubuntu16.04 下载地址:https://www.ubuntu.com/dow ...

  9. (转)mtr命令详解诊断网络路由

    原文:https://blog.51cto.com/6226001001/1941355 http://www.zzbiji.com/2212.html----Linux下使用mtr做路由图进行网络分 ...

  10. Linux编程 6 (查看进程 ps 及输出风格)

    一．查看进程命令ps 1.1 默认ps 命令 在默认情况下,ps命令只会显示运行在当前控制台下,属于当前用户的进程,在上图中,我们只运行了bash shell以及ps命令本身. 上图中显示了程序的进程 ...