设为首页收藏本站
天天打卡
切换到窄版

 找回密码
 立即注册
搜索
爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享»首页 › 其他交流 | 闲聊交流 › HTML/Xhtml › AmazeUI 输入框组的示例代码
12下一页
返回列表 发新帖
查看: 91|回复: 10

AmazeUI 输入框组的示例代码

[复制链接]
无视危险

1

主题

59

回帖

141

积分

注册会员

积分
141
发表于 2024-4-20 10:28:57 | 显示全部楼层 |阅读模式
本文主要介绍了AmazeUI 输入框组的示例代码，分享给大家，具体如下：
  1. <!doctype html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>输入框组</title>
  10. <meta name="renderer" content="webkit">
  11. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  12. <link rel="icon" type="image/png" href="assets/i/favicon.png">
  13. <meta name="mobile-web-app-capable" content="yes">
  14. <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
  15. <meta name="apple-mobile-web-app-capable" content="yes">
  16. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  17. <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  18. <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  19. <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  20. <meta name="msapplication-TileColor" content="#0e90d2">
  21. <link rel="stylesheet" href="assets/css/amazeui.min.css">
  22. </head>
  23. <body style="margin: 10px;">
  24. <!--输入框与标签-->
  25. <div class="am-input-group">
  26. <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
  27. <input type="text" class="am-form-field" placeholder="Username">
  28. </div>
  29. <div class="am-input-group">
  30. <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
  31. <input type="text" class="am-form-field" placeholder="Password">
  32. </div>
  33. <div class="am-input-group">
  34. <input type="text" class="am-form-field">
  35. <span class="am-input-group-label">.00</span>
  36. </div>
  37. <div class="am-input-group">
  38. <span class="am-input-group-label">$</span>
  39. <input type="text" class="am-form-field">
  40. <span class="am-input-group-label">.00</span>
  41. </div>
  42. <!--复选/单选框与输入框-->
  43. <div class="am-g">
  44. <div class="am-u-lg-6">
  45.   <div class="am-input-group">
  46.    <span class="am-input-group-label">
  47.     <input type="checkbox">
  48.    </span>
  49.    <input type="text" class="am-form-field">
  50.   </div>
  51. </div>
  52. <div class="am-u-lg-6">
  53.   <div class="am-input-group">
  54.    <span class="am-input-group-label">
  55.     <input type="radio">
  56.    </span>
  57.    <input type="text" class="am-form-field">
  58.   </div>
  59. </div>
  60. </div>
  61. <!--输入框结合 Button-->
  62. <div class="am-g">
  63. <div class="am-u-lg-6">
  64.   <div class="am-input-group">
  65.    <span class="am-input-group-btn">
  66.     <button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
  67.    </span>
  68.    <input type="text" class="am-form-field">
  69.   </div>
  70. </div>
  71. <div class="am-u-lg-6">
  72.   <div class="am-input-group">
  73.    <input type="text" class="am-form-field">
  74.    <span class="am-input-group-btn">
  75.     <button class="am-btn am-btn-default" type="button">手气还行</button>
  76.    </span>
  77.   </div>
  78. </div>
  79. </div>
  80. <!--尺寸-->
  81. <div class="am-input-group am-input-group-lg">
  82. <span class="am-input-group-label">@</span>
  83. <input type="text" class="am-form-field" placeholder="Username">
  84. </div>
  85. <div class="am-input-group">
  86. <span class="am-input-group-label">@</span>
  87. <input type="text" class="am-form-field" placeholder="Username">
  88. </div>
  89. <div class="am-input-group am-input-group-sm">
  90. <span class="am-input-group-label">@</span>
  91. <input type="text" class="am-form-field" placeholder="Username">
  92. </div>
  93. <!--颜色-->
  94. <div class="am-input-group am-input-group-primary">
  95. <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
  96. <input type="text" class="am-form-field" placeholder="提示信息">
  97. </div>
  98. <div class="am-input-group am-input-group-secondary">
  99. <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
  100. <input type="text" class="am-form-field" placeholder="提示信息">
  101. </div>
  102. <div class="am-input-group am-input-group-success">
  103. <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
  104. <input type="text" class="am-form-field" placeholder="提示信息">
  105. </div>
  106. <div class="am-input-group am-input-group-warning">
  107. <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
  108. <input type="text" class="am-form-field" placeholder="提示信息">
  109. </div>
  110. <div class="am-input-group am-input-group-danger">
  111. <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
  112. <input type="text" class="am-form-field" placeholder="提示信息">
  113. </div>
  114. <div class="am-g">
  115. <div class="am-u-lg-6">
  116.   <div class="am-input-group am-input-group-danger">
  117.    <span class="am-input-group-label">
  118.     <input type="checkbox">
  119.    </span>
  120.    <input type="text" class="am-form-field">
  121.   </div>
  122. </div>
  123. <div class="am-u-lg-6">
  124.   <div class="am-input-group am-input-group-primary">
  125.    <span class="am-input-group-btn">
  126.     <button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button>
  127.    </span>
  128.    <input type="text" class="am-form-field">
  129.   </div>
  130. </div>
  131. </div>
  132. <!--[if (gte IE 9)|!(IE)]><!-->
  133. <script src="assets/js/jquery.min.js"></script>
  134. <!--<![endif]-->
  135. <!--[if lte IE 8 ]>
  136. <script src="assets/ie8/jquery.min.js"></script>
  137. <script src="assets/ie8/modernizr.js"></script>
  138. <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
  139. <![endif]-->
  140. <script src="assets/js/amazeui.min.js"></script>
  141. </body>
  142. </html>
复制代码
效果图：

到此这篇关于AmazeUI 输入框组的示例代码的文章就介绍到这了,更多相关AmazeUI 输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

编程业余爱好者

0

主题

29

回帖

59

积分

注册会员

积分
59
发表于 2024-6-19 11:51:18 | 显示全部楼层
我想了解更多
回复 支持 反对

使用道具 举报

灭天绝地潜水员

1

主题

57

回帖

135

积分

注册会员

积分
135
发表于 2024-6-26 04:43:50 | 显示全部楼层
我完全同意你的观点
回复 支持 反对

使用道具 举报

别送我2333

1

主题

76

回帖

166

积分

注册会员

积分
166
发表于 2024-7-9 11:03:00 | 显示全部楼层
我们一起努力，共同解决问题吧。
回复 支持 反对

使用道具 举报

心灵之光666

0

主题

43

回帖

87

积分

注册会员

积分
87
发表于 2024-7-24 04:23:49 | 显示全部楼层
我们一起努力，共同解决问题吧。
回复 支持 反对

使用道具 举报

13307196760
  • 打卡等级：初来乍到
  • 打卡总天数：5
  • 打卡月天数：0
  • 打卡总奖励：609
  • 最近打卡：2024-04-28 08:28:05

1

主题

85

回帖

862

积分

等待验证会员

积分
862
发表于 2024-8-3 17:02:16 | 显示全部楼层
友善的讨论氛围是非常重要的。
回复 支持 反对

使用道具 举报

Jacksun_0909

1

主题

68

回帖

160

积分

注册会员

积分
160
发表于 2024-8-23 21:30:09 | 显示全部楼层
太棒了！感谢分享这个信息！
回复 支持 反对

使用道具 举报

he577478737

1

主题

45

回帖

112

积分

注册会员

积分
112
发表于 2024-9-21 18:18:00 | 显示全部楼层
能给个链接吗？我想深入了解一下。
回复 支持 反对

使用道具 举报

用户9p0894m

0

主题

46

回帖

91

积分

注册会员

积分
91
发表于 2024-9-23 17:15:27 | 显示全部楼层
你的信息来源是？我想了解更多。
回复 支持 反对

使用道具 举报

灿烂阳光666

3

主题

48

回帖

164

积分

注册会员

积分
164
发表于 2024-9-30 04:07:30 | 显示全部楼层
顶一个，观点非常中肯！
回复 支持 反对

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 11:30 , Processed in 0.096471 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表