AntUI常规Forms表单

时间:2022-07-26
本文章向大家介绍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>