## Form表单

![](http://res.winbaoxian.com/autoUpload/common/form1_a86cf6401ad5c3b.png)
1. 标题(四个字及以下)、暗提示
```html
<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-label">标题</div>
    <div class="bx-cell-input">
      <input type="text" placeholder="暗提示内容"/>
    </div>
  </div>
</div>
```
2. 标题(四个字以上下)、暗提示

![](http://res.winbaoxian.com/autoUpload/common/form2_c87caf7d0487548.png)
```html
<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-label bx-cell-label--lg">标题标题标</div>
    <div class="bx-cell-input">
      <input type="text" placeholder="暗提示内容"/>
    </div>
  </div>
</div>
```
3. 右侧图标、图片、按钮

![](http://res.winbaoxian.com/autoUpload/common/form3_9ba18c89d4647fc.png)
```html
<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-label">标题</div>
    <div class="bx-cell-input">
      <input type="text" placeholder="暗提示内容"/>
    </div>
    <div class="bx-cell-extra">
      <i class="bx-icon bx-icon-arrows-right"></i>
    </div>
  </div>
</div>
```
4. 标题展开、折叠

![](http://res.winbaoxian.com/autoUpload/common/form4_b619c6c1701e254.png)
```html
<div class="bx-accordion-cells bx-accordion-active">
  <div class="bx-accordion-header">
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
        <div class="bx-cell-extra">
          <i class="bx-icon"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="bx-accordion-body">
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
        <div class="bx-cell-extra">
          <i class="bx-icon bx-icon-arrows-right"></i>
        </div>
      </div>
    </div>
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
      </div>
    </div>
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
      </div>
    </div>
  </div>
</div>
```
5. 单项选择

![](http://res.winbaoxian.com/autoUpload/common/form5_6924547e4ac0dbd.png)
```html
<div class="bx-radio-cells">
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-radio">
        <input type="radio" class="bx-cell-input" name="radio-cells"/>
        <i class="bx-icon bx-icon-choose-none-line"></i>
      </div>
      <div class="bx-cell-title">单项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-radio">
        <input type="radio" class="bx-cell-input" name="radio-cells"/>
        <i class="bx-icon bx-icon-choose-none-line"></i>
      </div>
      <div class="bx-cell-title">单项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-radio">
        <input type="radio" class="bx-cell-input" name="radio-cells"/>
        <i class="bx-icon bx-icon-choose-none-line"></i>
      </div>
      <div class="bx-cell-title">单项选择</div>
    </label>
  </div>
</div>
```
6. 多项选择

![](http://res.winbaoxian.com/autoUpload/common/form6_691c5ef0cc6ab76.png)
```html
<div class="bx-checkbox-cells">
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-checkbox">
        <input type="checkbox" class="bx-cell-input" name="checkbox-cells"/>
        <i class="bx-icon"></i>
      </div>
      <div class="bx-cell-title">多项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-checkbox">
        <input type="checkbox" class="bx-cell-input" name="checkbox-cells"/>
        <i class="bx-icon"></i>
      </div>
      <div class="bx-cell-title">多项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-checkbox">
        <input type="checkbox" class="bx-cell-input" name="checkbox-cells"/>
        <i class="bx-icon"></i>
      </div>
      <div class="bx-cell-title">多项选择</div>
    </label>
  </div>
</div>
```
7. 带开关

![](http://res.winbaoxian.com/autoUpload/common/form7_3ccd04248cf9ef7.png)
```html
<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-title">开启(left)</div>
    <div class="bx-cell-extra">
      <input type="checkbox" class="bx-switch" checked="checked"/>
    </div>
  </div>
</div>
```
8. 数量

![](http://res.winbaoxian.com/autoUpload/common/form8_1eccd849a19bc33.png)
```html
<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-title">数量>1</div>
    <div class="bx-cell-extra">
      <div class="bx-number-control">
        <div class="bx-number-minus"></div>
        <input type="text" class="bx-number-input" value="1"/>
        <div class="bx-number-plus"></div>
      </div>
    </div>
  </div>
</div>
```