安信娱乐谁是老板

拼图开发文档

表单

将输入框组、表单按钮及相关元素组合,形成表单,用.form样式定义。

基本结构

表单由单行输入框、多行输入框、单选、多选、文件等组成,本章节定义的输入框、美化输入框、内联输入框、搜索框、输入框组等,均为表单组成的要素,用form标签包含;.form定义样式。

输入框提示信息
单选提示信息
未选择文件 浏览 ...
    <form class="form">
      <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>
      <div class="input-group">
        <label>单选</label>
        <div class="input-block input-check">
          <label><input type="radio" name="radio" /><i></i> 单选1</label>
          <label><input type="radio" name="radio" /><i></i> 单选2</label>
          <label><input type="radio" name="radio" /><i></i> 单选3</label>
          <div class="input-help">单选提示信息</div>
        </div>
      </div>
      <div class="input-group">
        <label>复选</label>
        <div class="input-block input-check input-check-inline">
          <label><input type="checkbox" name="checkbox" /><i></i> 复选1</label>
          <label><input type="checkbox" name="checkbox" /><i></i> 复选2</label>
          <label><input type="checkbox" name="checkbox" /><i></i> 复选3</label>
        </div>
      </div>
      <div class="input-group">
        <label>下拉菜单</label>
        <div class="input-block">
          <select class="input">
            <option>下拉菜单</option>
            <option>下拉菜单</option>
            <option>下拉菜单</option>
          </select>
        </div>
      </div>
      <div class="input-group">
        <label>浏览文件</label>
        <div class="input-block input-upfile input-upfile-block">
          <span>未选择文件</span>
          <a class="button text" href="javascript:;"><input type="file" data-form="upfile" data-upload='{"ext":"jpeg,jpg,png,gif","ext_err":"格式错误","size":2,"size_err":"大小超过限制"}' />浏览 ...</a>
        </div>
      </div>
      <div class="input-group">
        <label>浏览图片</label>
        <div class="input-block">
          <div class="input-image">
            <a href="javascript:;">
              <input type="file" data-form="upimage" data-size="2" data-ext="jpg,png,gif" data-upload='{"ext":"jpeg,jpg,png,gif","ext_err":"格式错误","size":2,"size_err":"大小超过限制"}' />
            </a>
            <span></span>
            <img name="image" />
          </div>
        </div>
      </div>
      <div class="input-group">
        <label>开关</label>
        <div class="input-block">
          <label class="input-switch"><input type="checkbox" name="switch" /><i></i></label>
        </div>
      </div>
      <div class="input-group">
        <label>多行输入框</label>
        <div class="input-block">
          <textarea class="input" rows="3" placeholder="多行输入框"></textarea>
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

表单分组

在输入框组较多的情况下,可使用fieldset标签分组,分组名称为legend标签。

分组名称
输入框提示信息
    <form class="form">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <fieldset>
        <legend>分组名称</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </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>
      </fieldset>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

分组水平线样式

除上述的分组样式外,框架还定义了水平线样式的分组,给fieldset添加.fieldset样式即可实现:

分组一
分组二
输入框提示信息
    <form class="form">
      <fieldset class="fieldset">
        <legend>分组一</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block input-inline">
            <input class="input" type="text" placeholder="输入框" />
            <div class="addon"><span class="bg">中</span></div>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </div>
      </fieldset>
      <fieldset class="fieldset">
        <legend>分组二</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block input-icon">
            <span><em class="icon-icon"><i></i></em></span>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </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>
      </fieldset>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

横向内联表单

表单叠加.form-x样式,使label.input-block在水平方向上一行内内联显示。

分组
输入框提示信息
    <form class="form form-x">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block input-inline">
          <input class="input" type="text" placeholder="输入框" />
          <div class="addon"><span class="bg">中</span></div>
          <input class="input" type="text" placeholder="输入框" />
        </div>
      </div>
      <fieldset class="fieldset">
        <legend>分组</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block input-icon">
            <span><em class="icon-icon"><i></i></em></span>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </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>
      </fieldset>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

label文字对齐

默认的label为左对齐,在文字数量不一的情况可使用居中或右对齐,居中样式.form-label-center,右对齐为.form-label-right

分组
    <form class="form form-x form-label-right">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <fieldset class="fieldset">
        <legend>分组</legend>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block input-icon">
            <span><em class="icon-icon"><i></i></em></span>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </div>
      </fieldset>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

自由宽度

表单的输入框按自由宽度显示方式有2种,第一种中直接在所有.input上叠加.input-auto样式;第二种是在.form上叠加.form-auto样式,即可使用所有的输入框按自由宽度显示。

单独自动宽

单独自动宽为在需要设置自动宽的.input叠加.input-auto样式:

分组
输入框提示信息
    <form class="form">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input input-auto" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block input-inline">
          <input class="input input-auto" type="text" placeholder="输入框" />
          <div class="addon"><span class="bg">中</span></div>
          <input class="input" type="text" placeholder="输入框" />
        </div>
      </div>
      <fieldset class="fieldset form-x">
        <legend>分组</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block input-icon">
            <span><em class="icon-icon"><i></i></em></span>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </div>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input input-auto" placeholder="输入框" type="text" />
            <div class="input-help">输入框提示信息</div>
          </div>
        </div>
      </fieldset>
      <div class="form-button form-button-2">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

全局自动宽

全局自动宽为在表单.form上叠加.form-auto样式,使全部.input按自动宽处理:

分组
输入框提示信息
    <form class="form form-x form-auto">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block input-inline">
          <input class="input" type="text" placeholder="输入框" />
          <div class="addon"><span class="bg">中</span></div>
          <input class="input" type="text" placeholder="输入框" />
        </div>
      </div>
      <fieldset class="fieldset">
        <legend>分组</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block input-icon">
            <span><em class="icon-icon"><i></i></em></span>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </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>
      </fieldset>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

表单尺寸

调整表单的尺寸同样有两种方式,第一种中直接在需要改变的.input上叠加.input-small小输入框或.input-big大输入框样式;第二种是在.form上叠加.form-small小表单或.form-big大表单样式。

单独尺寸

单独尺寸为在需要调整尺寸的.input叠加.input-small.input-big样式:

输入框提示信息
    <form class="form">
      <div class="input-group">
        <label>小输入框</label>
        <div class="input-block">
          <input class="input input-small" placeholder="小输入框" type="text" />
        </div>
      </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>
      <div class="input-group">
        <label class="input-required">大输入框</label>
        <div class="input-block input-inline">
          <input class="input input-big" type="text" placeholder="大输入框" />
          <div class="addon"><span class="bg">中</span></div>
          <input class="input" type="text" placeholder="大输入框" />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button button-big">提交</button>
      </div>
    </form>
  

全局尺寸

全局自动宽为在表单.form上叠加小表单.form-small或大表单.form-big样式,改变表单的大小:

小表单

分组
输入框提示信息
    <form class="form form-small">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block input-inline">
          <input class="input" type="text" placeholder="输入框" />
          <div class="addon"><span class="bg">中</span></div>
          <input class="input" type="text" placeholder="输入框" />
        </div>
      </div>
      <fieldset class="fieldset">
        <legend>分组</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block input-icon">
            <span><em class="icon-icon"><i></i></em></span>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </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>
      </fieldset>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

大表单

分组
输入框提示信息
    <form class="form form-big">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block input-inline">
          <input class="input" type="text" placeholder="输入框" />
          <div class="addon"><span class="bg">中</span></div>
          <input class="input" type="text" placeholder="输入框" />
        </div>
      </div>
      <fieldset class="fieldset">
        <legend>分组</legend>
        <div class="input-group">
          <label>名称</label>
          <div class="input-block input-icon">
            <span><em class="icon-icon"><i></i></em></span>
            <input class="input" type="text" placeholder="输入框" />
          </div>
        </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>
      </fieldset>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

内联排列

在输入框组较少的情况下,可以使用内联排列方式.form-inline将输入框组在一行内显示。

内联显示

    <form class="form form-inline">
      <div class="input-group">
        <label>名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

去除label

在不需要label情况下的显示效果:

    <form class="form form-inline">
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

无缝连接

叠加.form-nowrap将表单的输入框无缝连接在一起。

默认无缝显示

    <form class="form form-nowrap">
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

纵向无缝显示:

当叠加.form-nowrap-y时,表单内的输入框则纵向排列:

    <form class="form form-nowrap-y">
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

内嵌表单

表单叠加.form-inset安信娱乐谁是老板样式,可使表单内的输入框标题显示在输入框内部:

分组名称
    <form class="form form-inset">
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <div class="input-group">
        <label class="input-required">名称</label>
        <div class="input-block">
          <input class="input" placeholder="输入框" type="text" />
        </div>
      </div>
      <fieldset class="fieldset">
        <legend>分组名称</legend>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
      </fieldset>
      <div class="form-button" align="center">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

内嵌分组

安信娱乐谁是老板内嵌效果时输入框分组的情况下显示效果:

分组名称
分组名称
    <form class="form form-inset form-inset-group">
      <fieldset>
        <legend>分组名称</legend>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>分组名称</legend>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
        <div class="input-group">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
      </fieldset>
      <div class="form-button" align="center">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
  

网格布局

安信娱乐谁是老板输入框的布局,同时可以配置网格系统使用,也可使用响应式灵活使用:

    <div class="grid-middle">
      <form class="form grid">
        <div class="input-group x6">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
        <div class="input-group x6">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
        <div class="input-group x5">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
        <div class="input-group x4">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
        <div class="input-group x3">
          <label class="input-required">名称</label>
          <div class="input-block">
            <input class="input" placeholder="输入框" type="text" />
          </div>
        </div>
      </form>
    </div>