首页
所有分类
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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 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
二级域名(1) reload(1) 生成缩略图(1) 默认端口(3) 反向代理(2) 压力测试(1) 前后端分离(1) 防盗链(1) shell(3) 443(1)
You might like
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php处理带有中文URL的方法
2016/07/11 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
VUEJS实战之构建基础并渲染出列表（1）
2016/06/13 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
JavaScript 字符串数字左补位，右补位，取固定长度，截位扩展函数代码
2017/03/25 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python中的字符串内部换行方法
2018/07/19 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
在python里面运用多继承方法详解
2019/07/01 Python
python通过http下载文件的方法详解
2019/07/26 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python安装后的目录在哪里
2020/06/21 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
abstract是什么意思
2012/02/12 面试题
应聘英语教师求职信
2014/04/24 职场文书
团队精神的演讲稿
2014/05/14 职场文书
爱护草坪标语
2014/06/24 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL