首页
所有分类
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实现背景模糊的三种方式
Mar 09 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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
通知(159) 开幕词(63) 慰问信(53) 计划(88) 报告(147) 汇报材料(247) 导游词(322) 党团范文(807) 工作总结(1972) 闭幕词(9)
You might like
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
浅析PHP关键词替换的类(避免重复替换，保留与还原原始链接)
2015/09/22 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jQuery版Tab标签切换
2011/03/16 Javascript
javascript中获取下个月一号，是星期几
2012/06/01 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python将unicode转为str的方法
2017/06/21 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python tkinter界面居中显示的方法
2018/10/11 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python如何实现爬取B站视频
2020/05/20 Python
selenium学习教程之定位以及切换frame（iframe）
2021/01/04 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
英国信箱在线鲜花速递公司：Bloom & Wild
2019/03/10 全球购物
博士生导师推荐信
2014/07/08 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL