首页
所有分类
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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
table设置超出部分隐藏，鼠标移上去显示全部内容的方法
Dec 24 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
虚拟机(3) html5+(1) plus.io(1) RabbitMQ(3) Post(1) Get(1) Vmware(3) 目录管理(1) 磁盘管理(1) 日志(1)
You might like
新版PHP将向Java靠拢
2006/10/09 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PHP下SSL加密解密、验证、签名方法（很简单）
2020/06/28 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
Bootstrap 过渡效果Transition 模态框（Modal）
2017/03/17 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python的一些用法分享
2012/10/07 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Oakley西班牙官方商店：太阳眼镜和男女运动服
2019/04/26 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
感恩节寄语2015
2015/03/24 职场文书
面试通知邮件
2015/04/20 职场文书
坚持不是死撑，更重要的是心态
2019/08/19 职场文书
Mysql Show Profile
2021/04/05 MySQL
python实现图片批量压缩
2021/04/24 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技