输入框组

基本结构

基本的输入框组包含label、.input、.input-block元素、.input-help，其中.input-block内可放置前文提到的输入框、美化输入框、内联输入框、搜索框等信息。

    <form>
      <div class="input-group">
      <label>名称</label>
        <input class="input" placeholder="输入框" type="text" />
      </div>

      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
          <div class="input-help">输入框提示信息</div>
        </div>
      </div>
    </form>
  

必填项目，可在label添加.input-required样式。

内联显示

叠加样式.input-group-inline可使label与.input或.input-block在一行内显示。

    <form>
      <div class="input-group input-group-inline">
        <label>名称</label>
        <input class="input" placeholder="输入框" type="text" />
      </div>

      <div class="input-group input-group-inline">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
          <div class="input-help">输入框提示信息</div>
        </div>
      </div>
    </form>
  

自动宽

给.input叠加.input-auto样式，输入宽按size属性显示宽度。

    <form>
      <div class="input-group input-group-inline">
        <label>名称</label>
        <input class="input input-auto" placeholder="输入框" type="text" />
      </div>

      <div class="input-group input-group-inline">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input input-auto" placeholder="输入框" type="text" />
          <div class="input-help">输入框提示信息</div>
        </div>
      </div>
    </form>
  

输入框对齐

因label内的文字数量不等，导致输入框的位置偏移，可通过 “排版辅助-宽度” 固定或响应label的宽度：

    <form>
      <div class="input-group input-group-inline">
        <label class="w3 mini-w2 big-w1">名称</label>
        <input class="input" placeholder="输入框" type="text" />
      </div>

      <div class="input-group input-group-inline">
        <label class="w3 mini-w2 big-w1 input-required">名称</label>
        <div class="input-block">
          <input class="input input-auto" placeholder="输入框" type="text" />
          <div class="input-help">输入框提示信息</div>
        </div>
      </div>
    </form>
  

label固定宽度

除上述方法外，还可以通过固定em1-12的字符宽度，使label对齐：

    <form>
      <div class="input-group input-group-inline">
        <label class="em3">名称</label>
        <input class="input" placeholder="输入框" type="text" />
      </div>

      <div class="input-group input-group-inline">
        <label class="em3 input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
          <div class="input-help">输入框提示信息</div>
        </div>
      </div>
    </form>
  

label文字对齐

默认的label为左对齐，也可叠加居中对齐.label-center或右对齐.label-right样式：

    <form>
      <div class="input-group input-group-inline">
        <label class="em3 label-right">名称</label>
        <input class="input" placeholder="输入框" type="text" />
      </div>

      <div class="input-group input-group-inline">
        <label class="em3 input-required label-right">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
          <div class="input-help">输入框提示信息</div>
        </div>
      </div>
    </form>
  

内嵌结构

名称在输入框的内部显示，此时文本在右侧输入：

    <form>
      <div class="input-group input-group-inset">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
          <div class="input-help">输入框提示信息</div>
        </div>
      </div>
    </form>
  

帮助提示

在不使用内联显示的状态下，帮助信息除上文提到的位置外，还可以显示在label的右侧，此时需要在.input-help叠加样式.input-help-right：

    <form>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
          <div class="input-help input-help-right">输入框提示信息</div>
        </div>
      </div>
    </form>
  

验证提示

在表单验证时，信息提示显示效果，包含验证通过.input-valid、验证失败.input-invalid两个状态：

验证通过

输入框组.input-block叠加.input-valid样式，定义为输入内容通过验证。

    <form>
      <div class="input-group">
        <label>名称</label>
        <div class="input-block input-valid">
          <input class="input" placeholder="输入框" type="text" />
          <div class="input-help input-help-right">输入框提示信息</div>
          <div class="input-validate">验证通过提示</div>
        </div>
      </div>
    </form>
  

验证失败

输入框组.input-group叠加.input-invalid样式，定义为输入内容验证失败，检测不通过。

    <form>
      <div class="input-group">
        <label>名称</label>
        <div class="input-block input-invalid">
          <input class="input" required placeholder="输入框" type="text" />
          <div class="input-help input-help-right">输入框提示信息</div>
          <div class="input-validate">验证失败提示</div>
        </div>
      </div>
    </form>