首页
所有分类
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 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 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
create(1) frozenset(1) 并发(8) SingleFlight(2) Next.js(1) Mybatis-Plus(3) set(1) TableField(1) el-table(1) 脚手架(2)
You might like
经典的星际争霸，满是回忆的BGM
2020/04/09 星际争霸
网络资源
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（三）
2014/06/23 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
深入理解Promise.all
2018/08/08 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
python字符串对其居中显示的方法
2015/07/11 Python
详谈python http长连接客户端
2017/06/12 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
乐高瑞士官方商店：LEGO CH
2020/08/16 全球购物
全球精选男装和家居用品：Article
2020/04/13 全球购物
巴西最大的运动品牌：Olympikus
2020/07/14 全球购物
如何进行Linux分区优化
2013/02/12 面试题
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
个人收入证明范本
2014/09/18 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
文化大革命观后感
2015/06/17 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript