专栏首页网页开发/美化AntUI常规Forms表单

AntUI常规Forms表单

<div class="am-list am-list-form">
  <div class="am-list-header">常规类</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-1">标签文本</div>
      <div class="am-list-control">
        <input id="demo-input-1" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-1">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-1">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>
<div class="am-list am-list-form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-2">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-2" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-2">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-2">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-3">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-3" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-3">
    </div>
    <div class=
    "am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-3">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
</div>
<div class="am-list am-list-form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-4">标签</div>
    <div class="am-list-control">
      <input id="demo-input-4" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-4">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-4">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
</div>
<div class="am-list am-list-form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-5">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-5" type="text" placeholder="内容内容" value="支付宝" aria-labelledby="list-label-5">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-5">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-6">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-6" type="text" placeholder="内容内容" aria-labelledby="list-label-6">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-6">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AntUI文字书写范例(util/writing)

    爱知汇
  • AntUI卡片Cards

    爱知汇
  • html+js开发模拟考试在线评分系统

    爱知汇
  • <form method="post">功能无效求高手帮忙

    用户2457486
  • AntUI卡片Cards

    爱知汇
  • CSS,注意点!!!!!!!

    4、用css给body标签加个 margin:0(用于消除body边框和浏览器间的空白部分)

    Wyc
  • Todo List: 待办事项自定义分组 – 第三章

    有了前面2章节的内容,相信小伙伴们自己也可以试着写写了,动手后的你们是不是发现很简单了?现在我们继续下一章节的内容,自定义任务分组。

    Javanx
  • jQueryEasyUI 的入门

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI拖动效果</title> <...

    用户5927264
  • 详解: :not 11三种写方式

    核心是表单用最后一种方式,其他的用第一第二种方式哈 问题?为什么表单用的是最后一种方式,因为他有类型哈,因为表单有很多类型·,如果只设一种类型css语法,就t...

    用户7873631
  • web完全响应式布局 原

    在页面布局中响应式布局优势很明显,能适应不同的屏幕,现在很多的网站系统也都是响应式布局

    tianyawhl

扫码关注云+社区

领取腾讯云代金券