form表单

  • 使用.vus-form类作为<form>标签样式,将各种表单项包裹。
  • 使用.vus-form-item类作为表单项目。
  • 使用.vus-form-label类作为表单标签。
  • 使用.vus-form-content类作为表单内容。

典型表单

结合网格系统样式来排列表单效果更佳。

<!-- 基础用法 -->
<form class="vus-form">
  <div class="vus-form-item">
     <label class="vus-form-label">用户名</label>
     <div class="vus-form-content">
        <input type="text" class="vus-input" placeholder="请输入用户名">
     </div>
  </div>
  <div class="vus-form-item">
     <label class="vus-form-label">密码</label>
     <div class="vus-form-content">
        <input type="password" class="vus-input" placeholder="请输入密码">
     </div>
  </div>
  <div class="vus-form-item">
     <label class="vus-form-label">性别</label>
     <div class="vus-form-content">
        <label class="vus-radio-btn check">
           <input type="radio" name="sex" checked>
           <span class="text">
              <i class="icon"></i>
              男士
           </span>
        </label>
     </div>
  </div>
  ...
</form>

内联表单

.vus-form类添加.inline类可以在一行内放置表单。

<!-- 内联表单 -->
<form class="vus-form inline">
   <div class="vus-form-item">
      <label class="vus-form-label">用户名</label>
      <div class="vus-form-content">
         <input type="text" class="vus-input" placeholder="请输入用户名">
      </div>
   </div>
   <div class="vus-form-item">
      <label class="vus-form-label">密码</label>
      <div class="vus-form-content">
         <input type="password" class="vus-input" placeholder="请输入密码">
      </div>
   </div>
   <div class="vus-form-item">
      <div class="vus-form-content">
         <button type="button" class="vus-btn primary">登录</button>
         <button type="button" class="vus-btn">注册</button>
      </div>
   </div>
</form>

对齐方式

  • .vus-form类添加对齐方式。
  • .label-left:标签左对齐。
  • .label-top:标签顶部对齐。
默认对齐
左对齐
顶部对齐
<!-- 左对齐 -->
<form class="vus-form label-left">
   <div class="vus-form-item">
      <label class="vus-form-label">用户名</label>
      <div class="vus-form-content">
         <input type="text" class="vus-input" placeholder="请输入用户名">
      </div>
   </div>
   <div class="vus-form-item">
      <label class="vus-form-label">密码</label>
      <div class="vus-form-content">
         <input type="password" class="vus-input" placeholder="请输入密码">
      </div>
   </div>
   <div class="vus-form-item">
      <div class="vus-form-content">
         <button type="button" class="vus-btn primary">登录</button>
         <button type="button" class="vus-btn">注册</button>
      </div>
   </div>
</form>

<!-- 顶部对齐 -->
<form class="vus-form label-top">
   <div class="vus-form-item">
      <label class="vus-form-label">用户名</label>
      <div class="vus-form-content">
         <input type="text" class="vus-input" placeholder="请输入用户名">
      </div>
   </div>
   <div class="vus-form-item">
      <label class="vus-form-label">密码</label>
      <div class="vus-form-content">
         <input type="password" class="vus-input" placeholder="请输入密码">
      </div>
   </div>
   <div class="vus-form-item">
      <div class="vus-form-content">
         <button type="button" class="vus-btn primary">登录</button>
         <button type="button" class="vus-btn">注册</button>
      </div>
   </div>
</form>

输入框组

添加.group类,嵌套一系列<input>元素。

<form class="vus-form group">
   <div class="vus-form-item">
      <input type="text" class="vus-input" placeholder="用户名">
      <input type="password" class="vus-input" placeholder="密码">
      <input type="password" class="vus-input" placeholder="确认密码">
      <input type="text" class="vus-input" placeholder="邮箱">
      <input type="text" class="vus-input" placeholder="网址">
   </div>
   <div class="vus-form-item">
      <button type="button" class="vus-btn primary vus-fluid">注册</button>
   </div>
</form>

响应式表单

所有.vus-form类会在分辨率小于768px时内部<label>标签呈顶部对齐状态。

<!-- 响应式表单 -->
<form class="vus-form">
   <div class="vus-form-item">
      <label class="vus-form-label">用户名</label>
      <div class="vus-form-content">
         <input type="text" class="vus-input" placeholder="请输入用户名">
      </div>
   </div>
   <div class="vus-form-item">
      <label class="vus-form-label">密码</label>
      <div class="vus-form-content">
         <input type="password" class="vus-input" placeholder="请输入密码">
      </div>
   </div>
   <div class="vus-form-item">
      <div class="vus-form-content">
         <button type="button" class="vus-btn primary">登录</button>
         <button type="button" class="vus-btn">注册</button>
      </div>
   </div>
</form>