首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

AmazeUI 输入框组的示例代码

Posted in HTML / CSS onAugust 14, 2020

本文主要介绍了AmazeUI 输入框组的示例代码，分享给大家，具体如下：

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>输入框组</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 10px;">
<!--输入框与标签-->
<div class="am-input-group">
 <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
 <input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group">
 <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
 <input type="text" class="am-form-field" placeholder="Password">
</div>
<div class="am-input-group">
 <input type="text" class="am-form-field">
 <span class="am-input-group-label">.00</span>
</div>
<div class="am-input-group">
 <span class="am-input-group-label">$</span>
 <input type="text" class="am-form-field">
 <span class="am-input-group-label">.00</span>
</div>
<!--复选/单选框与输入框-->
<div class="am-g">
 <div class="am-u-lg-6">
  <div class="am-input-group">
   <span class="am-input-group-label">
    <input type="checkbox">
   </span>
   <input type="text" class="am-form-field">
  </div>
 </div>
 <div class="am-u-lg-6">
  <div class="am-input-group">
   <span class="am-input-group-label">
    <input type="radio">
   </span>
   <input type="text" class="am-form-field">
  </div>
 </div>
</div>
<!--输入框结合 Button-->
<div class="am-g">
 <div class="am-u-lg-6">
  <div class="am-input-group">
   <span class="am-input-group-btn">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
   </span>
   <input type="text" class="am-form-field">
  </div>
 </div>
 <div class="am-u-lg-6">
  <div class="am-input-group">
   <input type="text" class="am-form-field">
   <span class="am-input-group-btn">
    <button class="am-btn am-btn-default" type="button">手气还行</button>
   </span>
  </div>
 </div>
</div>
<!--尺寸-->
<div class="am-input-group am-input-group-lg">
 <span class="am-input-group-label">@</span>
 <input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group">
 <span class="am-input-group-label">@</span>
 <input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group am-input-group-sm">
 <span class="am-input-group-label">@</span>
 <input type="text" class="am-form-field" placeholder="Username">
</div>
<!--颜色-->
<div class="am-input-group am-input-group-primary">
 <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
 <input type="text" class="am-form-field" placeholder="提示信息">
</div>
<div class="am-input-group am-input-group-secondary">
 <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
 <input type="text" class="am-form-field" placeholder="提示信息">
</div>
<div class="am-input-group am-input-group-success">
 <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
 <input type="text" class="am-form-field" placeholder="提示信息">
</div>
<div class="am-input-group am-input-group-warning">
 <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
 <input type="text" class="am-form-field" placeholder="提示信息">
</div>
<div class="am-input-group am-input-group-danger">
 <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
 <input type="text" class="am-form-field" placeholder="提示信息">
</div>
<div class="am-g">
 <div class="am-u-lg-6">
  <div class="am-input-group am-input-group-danger">
   <span class="am-input-group-label">
    <input type="checkbox">
   </span>
   <input type="text" class="am-form-field">
  </div>
 </div>
 <div class="am-u-lg-6">
  <div class="am-input-group am-input-group-primary">
   <span class="am-input-group-btn">
    <button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button>
   </span>
   <input type="text" class="am-form-field">
  </div>
 </div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

效果图：

AmazeUI 输入框组的示例代码

到此这篇关于AmazeUI 输入框组的示例代码的文章就介绍到这了,更多相关AmazeUI 输入框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

AmazeUI 输入框组的示例代码

- Author -

iteye_17658

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS3实现圆角效果（含IE兼容解决方法）
May 07 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 #HTML / CSS
AmazeUI 图标的示例代码
Aug 13 #HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 #HTML / CSS
AmazeUI 网格的实现示例
Aug 13 #HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 #HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 #HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 #HTML / CSS
SOA面试题(9) Delphi面试题(13) 自我评价(886) 求职信(1029) 岗位职责(1324) Ruby面试题(15) J2EE面试题(19) 推荐信(292) 自我鉴定(671) 自荐信(981)
You might like
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Python计算字符宽度的方法
2016/06/14 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python networkx包的实现
2020/02/14 Python
Python面向对象程序设计之私有变量，私有方法原理与用法分析
2020/03/23 Python
python中PyQuery库用法分享
2021/01/15 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
Champion官网：美国冠军运动服装
2017/01/25 全球购物
Lentiamo荷兰：在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
《长城和运河》教学反思
2014/04/14 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
纪念九一八事变演讲稿：牢记历史，捍卫主权
2014/09/14 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
工会经费申请报告
2015/05/15 职场文书
承诺书的签字人，需不需要承担相应的责任？
2019/07/09 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL