AmazeUI 输入框组

最新推荐文章于 2021-06-18 05:11:22 发布
最新推荐文章于 2021-06-18 05:11:22 发布
阅读量565 收藏
点赞数
分类专栏： 阅-AmUI 文章标签： ui javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17658/article/details/82647474
版权 
<!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>

效果图：

 

 

iteye_17658
关注
专栏目录
AmazeUI 下拉选框
08-12
NULL 博文链接：https://onestopweb.iteye.com/blog/2278105
AmazeUI 按钮组
一直专注于互联网
02-18 408
&lt;!doctype html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=
AmazeUI 文本大小对照表
gaotianyi110的博客
05-23 1337
AmazeUI 框架之text大小属性 .am-text-xs          -12px .am-text-sm        -14px .am-text-default  - 16px .am-text-lg          - 18px .am-text-xl          - 24px .am-text.xxl         - 32px .am-text-xxx
amazeui学习笔记--css（常用组件7）--输入框组Input-group
weixin_33796205的博客
05-09 894
amazeui学习笔记--css（常用组件7）--输入框组Input-group 一、总结 1、使用：Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。在容器上添加 .am-input-group，在标签文字上添加 .am-input-group-label 2、Icon组件及添加文字： &lt;div class="am-input-group"...
AmazeUI 输入框组的示例代码
11-20
本文主要介绍了AmazeUI 输入框组的示例代码，分享给大家，具体如下： <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta ...
Amaze后台html静态模板
12-04
1. **Amaze模板**: Amaze模板以其独特的设计和易用性著称，通常包含多种页面布局、颜色主题和UI元素，旨在提高开发效率。在这款模板中，开发者可以找到适合展示数据、处理表单、进行日历管理等多种场景的页面模版。 ...
Jquery调色板
11-06
1. **ColorPicker**：这是一个常见的jQuery调色板插件，提供基本的颜色选择功能，支持滑块和输入框两种方式选择颜色，还可以自定义颜色面板。 2. **Spectrum**：此插件提供了全面的颜色选择功能，包括色轮、HSV滑块...
清新风格的网站后台管理模板
文件名称列表中包含了“源码必读.txt”和“非常漂亮的网站后台管理模板Amaze UI”，这说明该模板提供了详细的文档说明，方便开发者理解和使用。同时，“Amaze UI”可能是指模板的名称或风格。如果这是模板的名称，它...
【AmazeUI】在模态框中嵌入表单，形成模态输入框
编程记录，亲测有效
05-22 7281
在《【AmazeUI】模态框》（点击打开链接）一文中，已经介绍过在AmazeUI这个手机版前端框架中，怎么使用模态框了，但是这篇文章提到的模态框只是那些单纯的模态框。如果要实现一个有表单，同时又有“提交”与“关闭”的按钮，要做出如下的效果，哪应该怎么实现呢？ 首先同样是HTML布局：
amazeui学习笔记--css（常用组件10）--导航条Topbar
weixin_33896726的博客
05-09 909
amazeui学习笔记--css（常用组件10）--导航条Topbar 一、总结 1、 导航条：就是页面最顶端的导航条：在容器上添加 .am-topbar class，然后按照示例组织所需内容。&lt;header class="am-topbar"&gt;导航条内容&lt;/header&gt; 2、am-topbar模块下很多东西：am-topbar是命名空间加上模块名，所以肯定在模块下...
html文本框嵌套,AmazeUI在模态框中嵌入表单形成模态输入框
weixin_31499919的博客
06-03 320
在《【AmazeUI】模态框》(点击打开链接)一文中，已经介绍过在AmazeUI这个手机版前端框架中，怎么使用模态框了，但是这篇文章提到的模态框只是那些单纯的模态框。如果要实现一个有表单，同时又有“提交”与“关闭”的按钮，要做出如下的效果，哪应该怎么实现呢？首先同样是HTML布局：Modal登录登录用户名：密码：提交关闭之后，这段HTML脚本要跟下面的JavaScript联系起来。比如一按“登录”...
【AmazeUI】各种的导航式菜单与解决方法
热门推荐
编程记录，亲测有效
05-12 1万+
与Bootstrap一样，AmazeUI提供的导航式菜单也是喜欢蜷缩在右上角的一个按钮里面，然后一点击就向下拉开一大段距离。这样很不友好。此前《【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas》（点击打开链接）是一种解决方案，但是对于一些不使用页面的页面，这种方案则无能无力。 对于此有如下的几种方案可以解决： 一、改造AmazeUI提供的手机端文字横排
文本域（可输入多行文本）
Ch_an_ger的博客
03-29 8257
1）和文本、密码输入框一样，文本域的代码也是在<form></form>标签内部的。 语法如下： <textarea rows="行数" cols="列数">文本</textarea> 如： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten...
Amaze UI框架搭建
赵瑞峰的博客
03-16 4110
开始使用Amaze UI 1.获取Amaze UI       1.1下载文件 首先打开百度输入：Amaze UI -->找到Amaze UI官网 -->点击开始使用 -->下载文件"Amaze UI v2.2.1" 和"Sublime"代码片段       （至于Sublime Text是一个高级记事本，大家在百度一搜便可知道，另外下载就好了，）。
【AmazeUI】AmazeUI的确定框与确定框的致命缺陷
编程记录，亲测有效
06-13 8687
在AmazeUI这个手机前端框架可以通过以下的脚本： function calculate(){ $('#confirm1').modal({ }); } 来触发在HTML已经如下布局的确定框： 确定框内容 确定 取消
html验证富文本验证,amazeui支持html的验证也支持js的验证
weixin_32820101的博客
06-18 285
amazeui支持html的验证也支持js的验证如果表单只面向 H5 浏览器，而且不需要过多的控制，那原生的表单验证无疑是省时省力的选择，通过 :valid、:invalid 伪类可以控制不同验证状态的样式。感兴趣的同学可以参考这里https://www.sitepoint.com/html5-form-validation/此外支持JS 表单验证主要包含下面的一些验证required: 必填；p...
input type="search" 实现搜索框
weixin_34059951的博客
12-11 3194
欲实现一个文字搜索的功能，要求输入时，键盘回车按钮提示显示为“搜索”。效果如下: 开始~ input type=text并不能达到这种效果，google了一下，html5 增加的type=search可以做到（但需要input type=search外面包上一层带action属性的form）。 <div class=...
vantui 输入框
最新发布
08-24
Vant-UI 提供了一个简单易用的输入框组件，可以用于用户输入文字或其他内容。你可以在你的项目中使用 Vant-UI 的输入框组件，具体使用方法如下： 1. 首先，确保你已经安装并导入了 Vant-UI 库。 2. 在需要使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值