首页
所有分类
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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
浅谈CSS3特性查询（Feature Query: @supports）功能简介
Jul 31 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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) procedure(1) 分布式锁(3) Navicat(1) harbor(1) 内置函数(1) Tablespace(1) GoFrame(3) pytz(1) commit(1)
You might like
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
微信支付开发教程（一）微信支付URL配置
2014/05/28 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
屏蔽相应键盘按钮操作
2014/03/10 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python简单读取大文件的方法
2016/07/01 Python
python交互式图形编程实例（一）
2017/11/17 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python如何实现读取并显示图片（不需要图形界面）
2020/07/08 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
世界上最全面的汽车零部件和配件集合：JC Whitney
2016/09/04 全球购物
经济实惠的豪华背包和行李袋：Packs Project
2018/10/17 全球购物
电气技术员岗位职责
2013/11/19 职场文书
应用外语系自荐信
2014/06/26 职场文书
债务纠纷委托书
2014/08/30 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
解除租赁合同协议书
2016/03/21 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python