表单样式美化

默认样式

因input的radio、checkbox、file不适用.input样式，因些我们需要针对性的美化，默认效果如下：

单选

单选为多个选项中，只能选择其中一个。

    <div class="input-check">
      <label><input type="radio" name="radio" /><i></i> 单选1</label>
      <label><input type="radio" name="radio" checked="checked" /><i></i> 单选2</label>
      <label><input type="radio" name="radio" disabled /><i></i> 单选3(禁用)</label>
    </div>
  

内联显示

内联显示，则叠加样式.input-check-inline：

    <div class="input-check input-check-inline">
      <label><input type="radio" name="radio" /><i></i> 单选1</label>
      <label><input type="radio" name="radio" checked="checked" /><i></i> 单选2</label>
      <label><input type="radio" name="radio" disabled /><i></i> 单选3(禁用)</label>
    </div>
  

复选

复选为多个选项中，可选择一个及以上选项的。

    <div class="input-check">
      <label><input type="checkbox" name="checkbox" /><i></i> 复选1</label>
      <label><input type="checkbox" name="checkbox" checked="checked" /><i></i> 复选2</label>
      <label><input type="checkbox" name="checkbox" disabled /><i></i> 复选3(禁用)</label>
    </div>
  

内联显示

内联显示，同样，叠加样式.input-check-inline：

    <div class="input-check input-check-inline">
      <label><input type="checkbox" name="checkbox" /><i></i> 复选1</label>
      <label><input type="checkbox" name="checkbox" checked="checked" /><i></i> 复选2</label>
      <label><input type="checkbox" name="checkbox" disabled /><i></i> 复选3(禁用)</label>
    </div>
  

开关

开关为单个复选框勾选及未勾选时的效果。

    <form>
      <label class="input-switch"><input type="checkbox" name="switch" /><i></i> 开关</label>
      <label class="input-switch"><input type="checkbox" name="switch" checked="checked" /><i></i> 开关</label>
      <label class="input-switch"><input type="checkbox" name="switch" disabled /><i></i> 开关(禁用)</label>
    </form>
  

下拉菜单

当数量比较多的单选或复选时，使用下拉菜单选项。

    <form>
      <div class="input-select drop drop-toggle" data-form="select">
        <select class="input">
          <option value="1">下拉菜单1</option>
          <option value="2">下拉菜单2</option>
          <option value="3">下拉菜单3</option>
        </select>
        <div class="input input-text"></div>
        <div class="dropdown">
          <ul class="list-group list-box bg-white"></ul>
        </div>
      </div>
    </form>
  

验证框

密码或验证码输入分隔显示框，需要设置输入框属性data-form="verify"，同时也需设置最大长度值maxlength；同时支持密码输入。

    <form>
      <div class="input-verify" data-form="verify">
        <input type="text" maxlength="6" class="input" />
        <ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
      </div>
    </form>
  

浏览文件

上传文件，显示上传文件名称，同时可对上传文件的后缀、大小做验证。

    <form class="demo-div">
      <div class="input-upfile">
        <a class="button border" href="javascript:;"><input type="file" data-form="upfile" data-validate='{"file":{"ext":"doc,docx","size":"<1024"},"invalid":"请上传1M以内的doc文件"}' />浏览 ...</a>
        <span>未选择文件</span>
      </div>
      <div class="input-upfile input-upfile-block">
        <span>未选择文件</span>
        <a class="button text" href="javascript:;"><input type="file" data-form="upfile" data-validate='{"file":{"ext":"doc,docx","size":"<1024"},"invalid":"请上传1M以内的doc文件"}' />浏览 ...</a>
      </div>
      <div class="input-upfile">
        <a class="button border" disabled href="javascript:;"><input type="file" />浏览(禁用) ...</a>
        <span>未选择文件</span>
      </div>
    </form>
  

提示：data-validate为表单验证属性，值为JSON格式数据，包含文件验证file及错误提示invalid；其中file包含后缀ext及文件大小size。

浏览图片

上传图片，可预览图片，同时可对上传图片的后缀、大小做验证，验证方式与上传文件相同；如需改变图片框的尺寸，直接在.input-upimage元素上定义尺寸大小即可。

提示

    <form>
      <div class="input-upimage">
        <a href="javascript:;">
          <input type="file" data-form="upimage" data-validate='{"file":{"ext":"jpg,jpeg,png,gif","size":"<2048"},"invalid":"请上传2M以内的图片"}' />
        </a>
        <span></span>
        <img name="image" />
      </div>
      <div class="input-upimage">
        <a href="javascript:;" disabled><input type="file" data-form="upimage" /></a>
        <span></span>
        <img name="image" />
      </div>
      <div class="input-upimage input-imgnote" style="width:150px;height:120px;">
        <a href="javascript:;"><input type="file" data-form="upimage" /></a>
        <span>提示</span>
        <img name="image" />
        <i data-dismiss="upimage"></i>
      </div>
    </form>
  

开发提示：文件浏览及图片浏览均为前端效果展示，未执行文件上传，上传需要异步或提交后端处理，建议在后端再次对文件格式及文件大小判断。

提示样式，在异步操作时，可显示上传百分比或其他信息。

在部份浏览器中，需要在input上添加accept限制文件类似属性，值为image/gif,image/jpeg等才能正常使用。