标准表单 必填项

标准表单

  • BrickPlus 表单会有标准的表单组件包裹结构，可以参考代码示范，这样能最好的呈现出表单的排列和控制表单的各种组合，但这种结构嵌套并不是必须的，也可以单独使用。
  • 表单标题能容纳的字符数无上限（过长字符串需自行用排版样式处理，例如：用 .fn-pb-xx 类增加 .form-group 层高度，因为表单标题是绝对定位的，它的高度延伸并不会影响 .form-group 层的高度，需要手动调整）
实例
            
<div class="form-group">
    <label class="form-control-label" for="...">
        <span>...</span> //填写表单标题
    </label>
    <div class="form-control-wrap"> //表单组件定位嵌套
        ...
    </div>
</div>

必填项

  • 通过给 .form-group 或 .form-control-label 这一层叠加 .form-required 类，使必填项标记出现。
  • 建议通过在 .form-group 层控制必填项标记。
实例
            
<div class="form-group form-required">
    <label class="form-control-label" for="...">
        <span>...</span> //填写表单标题
    </label>
    <div class="form-control-wrap"> //表单组件定位嵌套
        ...
    </div>
</div>
Keyin Select 模拟 Select 日期选择 模态窗表单 单选和多选 多个值展示 静态数据展示 特殊类型

Keyin

  • 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input type="text / password"> 元素都将被默认设置宽度属性为 width: 100%;。
实例
            
<div class="form-group">
    <label class="form-control-label" for="...">
        <span>...</span>
    </label>
    <div class="form-control-wrap">
        <input type="text / password / email / tel" class="form-control" id="..." placeholder="..."/>
        <textarea class="form-control"></textarea>
    </div>
</div>

Select

  • 同样，.form-control 类同样可以影响 select 元素，包括其中的几种展示模式。
实例
                        
<div class="form-group">
    <label class="form-control-label" for="...">
        <span>...</span>
    </label>
    <div class="form-control-wrap">
        <select class="form-control"/>
        </select>
    </div>
</div>

模拟 Select

  • 模拟 Select 表单组件有固定的 Dom 结构，详细请参考代码示范。
  • 注意 IE7 及以下版本 IE 浏览器的兼容，这里的解决方法是分别用人工给出现在页面的 模拟 Select 和 日期下拉 的 .form-group 层添加内联的 z-index 属性，先出现的层级最大，依次累减。
实例
请选择一个选项
  • option xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  • option one
  • option two
  • option three
  • option four
  • option five
  • 招商银行   |   尾号1234
  • 工商银行   |   尾号1234
  • 建设银行   |   尾号1234
  • 农业银行   |   尾号1234
  • 中国银行   |   尾号1234
  • 交通银行   |   尾号1234
  • 平安银行   |   尾号1234
  • 邮政银行   |   尾号1234
  • 上海银行   |   尾号1234
  • 温州银行   |   尾号1234
  • 浦发银行   |   尾号1234
  • 中信银行   |   尾号1234
  • 广发银行   |   尾号1234
  • 民生银行   |   尾号1234
  • 兴业银行   |   尾号1234
  • 光大银行   |   尾号1234
  • 上海农商银行   |   尾号1234
  • 北京银行   |   尾号1234
  • 北京农商银行   |   尾号1234
  • 深圳发展银行   |   尾号1234
  • 宁波银行   |   尾号1234
  • 杭州银行   |   尾号1234
  • 东莞银行   |   尾号1234
  • 汇丰银行   |   尾号1234
  • 东亚银行   |   尾号1234
  • 广州农商银行   |   尾号1234
  • 华夏银行   |   尾号1234
  • 华润银行   |   尾号1234
  • 兰州银行   |   尾号1234
  • 河北银行   |   尾号1234
  • 微商银行   |   尾号1234
  • 青岛银行   |   尾号1234
  • 尧都农商   |   尾号1234
  • 浙商银行   |   尾号1234
  • 南昌银行   |   尾号1234
  • 渤海银行   |   尾号1234
  • 恒丰银行   |   尾号1234
  • 天津银行   |   尾号1234
  • option xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  • option one
  • option two
  • option three
  • option four
  • option five
  • 深圳宏澳装饰工程有限公司分公司
  • 广东东田投资股份有限公司
  • 市远大融资担保有限公司
  • 万豪五金货架有限公司
  • 广东天恒地产集团有限公司
  • 中国平安人寿保险股份中心支公司
  • 广东华南顺通大宗商品交易中心
  • 东莞市浩瀚商贸有限公司
  • 高普（香港）有限公司东莞代表处
  • 香港葛天那中国有限公司
  • 市晶和实业集团有限公司
  • 南方报业传媒集团办事处
  • 深圳宏澳装饰工程有限公司分公司
  • 广东东田投资股份有限公司
  • 市远大融资担保有限公司
  • 万豪五金货架有限公司
  • 广东天恒地产集团有限公司
  • 中国平安人寿保险股份中心支公司
  • 广东华南顺通大宗商品交易中心
  • 东莞市浩瀚商贸有限公司
  • 高普（香港）有限公司东莞代表处
  • 香港葛天那中国有限公司
  • 市晶和实业集团有限公司
  • 南方报业传媒集团办事处 
                        
<div class="form-group" style="*z-index: *;">
    <label class="form-control-label" for="...">
        <span>模拟 Select</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-dropdown"/>
            <span class="form-control-dropdown-btn"/>
                <i/></i/>
            </span>
            <div class="form-control-dropdown-value" title="..."/>
                ...
            </div>
            <ul class="form-control-dropdown-menu"/>
                <li title="..."/>
                </li>
            </ul>
        </div>
    </div>
</div>


<div class="form-group" style="*z-index: *;">
    <label class="form-control-label" for="...">
        <span>银行类型 Select</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-dropdown"/>
            <span class="form-control-dropdown-btn"/>
                <i/></i/>
            </span>
            <div class="form-control-dropdown-value" title="..."/>
                <span class="bank-bg bank-***" title="..."/></span>
                <span class="form-control-bank-card">
                    ...
                </span>
            </div>
            <ul class="form-control-dropdown-menu"/>
                <li title="..."/>
                    <span class="bank-bg bank-***" title="..."/></span>
                    <span class="form-control-bank-card">
                        ...
                    </span>
                </li>
                ...
            </ul>
        </div>
    </div>
</div>


<div class="form-group" style="*z-index: *;">
    <label class="form-control-label" for="...">
        <span>模糊匹配 + Select</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-dropdown"/>
            <span class="form-control-dropdown-btn"/>
                <i/></i/>
            </span>
            <input class="form-control" type="text" data-toggle="dropdown" placeholder="..." id="..."/>
            <ul class="form-control-dropdown-menu"/>
                <li title="..."/>
                </li>
            </ul>
        </div>
    </div>
</div>

日期选择

实例
            
<div class="form-group">
    <label class="form-control-label">
        <span>日期选择</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-date"/>
            <span class="form-control-dropdown-btn"/>
                <i/></i/>
            </span>
            <input type="text" class="form-control" data-toggle="datetimepicker" readonly="readonly"/>
        </div>
    </div>
</div>

模态窗表单

实例
            
<div class="form-group">
    <label class="form-control-label">
        <span>模态窗表单</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-modal"/>
            <span class="form-control-modal-btn"/>
                <i/></i/>
            </span>
            <input type="text" class="form-control" data-toggle="modal" data-target="***" readonly="readonly"/>
        </div>
    </div>
</div>

单选和多选

实例
            
<div class="form-group">
    <label class="form-control-label">
        <span>单选和多选</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-check"/>
            <label>
              ...
              <input type="radio / checkbox"/>
            </label>
        </div>
    </div>
</div>

多个值展示

实例
daisiwei
chenshixing
shaojinhong
            
<div class="form-group">
    <label class="form-control-label">
        <span>多个值展示</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-modal-value"/>
              <div class="form-control-modal-ops"/></div>
              ...
        </div>
    </div>
</div>

静态数据展示

实例
展示静态表单数据 
            
<div class="form-group">
    <label class="form-control-label">
        <span>静态数据展示</span>
    </label>
    <div class="form-control-wrap">
        <div class="form-control-static"/>
              ...
        </div>
    </div>
</div>

特殊类型

  • BrickPlus 提供完全隐藏或单单是不显示表单标题的表单样式工具，用于特殊的表单排版需求，通过 .form-no-label（完全剔除表单标题） 和 .form-hide-label（不显示表单标题） 两个工具类控制样式的变化。
  • .form-no-label（完全剔除表单标题） 的表现效果为标题在排版中完全不占用页面宽度，但结构仍然存在；
    .form-hide-label（不显示表单标题） 的表现效果为标题在排版中占用宽度依然存在，标题文字在页面上不可见。
  • 这两个工具类只能影响单一个表单组件，但这样做能更好的适应混合排版类型的表单页面。
实例
            
<div class="form-group ( form-hide-label / form-no-label )">
    ...
</div>
表单校验 禁用状态 只读状态

表单校验

  • BrickPlus 对表单组件的校验状态，如 错误( .has-error )、警告( .has-warning ) 和 成功( .has-correct ) 状态，都定义了规范样式。对应的校验类叠加到到表单组件的父元素即可。任何包含在此元素之内的表单相关样式都将接受校验样式的重置。
  • BrickPlus 暂时未针对辅助工具进行表单验证状态的优化，如阅读器。
实例
表单校验成功
表单校验失败
表单校验警告 
            
<div class="form-group has-( correct / error / warning )">
    <label class="form-control-label">
        <span>表单校验</span>
    </label>
    <div class="form-control-wrap">
        ...
        <div class="form-notice"/>
              <i></i>
              ...
        </div>
    </div>
</div>

禁用状态

  • 为输入框设置 [disabled] 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。
  • BricksPlus 中的表单 [disabled] 属性暂没有对 <fieldset> 做任何样式定义。
实例
            
<div class="form-group">
    <label class="form-control-label">
        <span>禁用状态</span>
    </label>
    <div class="form-control-wrap">
        <input type="text / password / email / tel" class="form-control" id="..." placeholder="..." disabled/>
    </div>
</div>

只读状态

  • 为输入框设置 [readonly] 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态和焦点状态。
实例
            
<div class="form-group">
    <label class="form-control-label">
        <span>只读状态</span>
    </label>
    <div class="form-control-wrap">
        <input type="text / password / email / tel" class="form-control" id="..." placeholder="..." readonly/>
    </div>
</div>
  • 针对表单组件结构的“块（block）”级辅助文本，给 p 或其他块级元素引用 .from-tips 类，即可得到需要的辅助文本效果。
实例

辅助文本 

            
<div class="form-group">
    <label class="form-control-label">
        <span>辅助文本</span>
    </label>
    <div class="form-control-wrap">
        ...
        <p class="form-tips"/>
              ...
        </p>
    </div>
</div>
  • BrickPlus 的上传组件非常简单，通过元素 label 和 上传组件工具类 .uploader 为基础，包裹上传输入框；
  • 表单上传控件的样式有特定的结构，详细请参考代码示范。
  • 上传组件的展现样式可以完全由 .btn 系列样式控制，所以 .btn 能适应的结构组合，上传组件一样可以，一样继承 .btn 的扩展类。
实例
            
<label class="uploader btn primary">
    <input type="file"/>
</label>
水平排列 垂直排列

水平排列

  • 表单组件的默认排列样式就是水平排列
实例
            
<div class="form-group">
    <label class="form-control-label" for="...">
        <span>...</span>
    </label>
    <div class="form-control-wrap">
        ...
    </div>
</div>

垂直排列

  • 排版上，表单标题和表单组件各占一行，只需要在引用 .from-group 类的父元素上叠加 .has-vertical，就能实现。
  • 垂直排版的表单，标题并没有宽度限制，这样很好的适应某些特殊的UI需求
  • .has-vertical 只能改变单一组表单组件的排列，能适应混合类型排列的表单页面。
实例
            
<div class="form-group has-vertical">
    <label class="form-control-label" for="...">
        <span>...</span>
    </label>
    <div class="form-control-wrap">
        ...
    </div>
</div>
基本额外元素组合 额外按钮的拼接 混合组装

基本额外元素组合

  • 找到表单组件中的 .form-control-wrap 层，在外面再包一层块级元素并引用 .form-gs-box 前置类；
    BrickPlus 提供了在 .form-gs-box 中使用的额外元素工具类 .form-addon，用于在表单控件的左右两边加上文字，单选或多选框和超链接。
  • .form-addon 可以在控件两侧同时增加多个（只要你的容器宽度支持）；
    需要添加的 .form-addon 只要不是放在最左边或最右边，则需要因应其所处的一则（左或右），叠加 .child-left（左侧） 或 .child-right（右侧），获得正确的样式。
实例
@ 超链接
超链接 @ 
            
<div class="form-group">
  <label class="form-control-label" for="...">
    <span>...</span>
  </label>
  <div class="form-gs-box">
    <span class="form-addon ( child-left / right )"></span>
    <div class="form-control-wrap">
      ...
    </div>
  </div>
</div>

额外按钮的拼接

  • 同样的，找到表单组件中的 .form-control-wrap 层，在外面再包一层块级元素并引用 .form-gs-box 前置类；
    BrickPlus 提供了在 .form-gs-box 中使用的额外按钮拼接工具类 .form-addon-dom，用于在表单控件的左右两边加上按钮，按钮组或者按钮式下拉菜单。
  • .form-addon-dom 可以在控件两侧同时增加多个（只要你的容器宽度支持）；
    需要添加的 .form-addon-dom 只要不是放在最左边或最右边，则需要因应其所处的一则（左或右），叠加 .child-left（左侧） 或 .child-right（右侧），获得正确的样式。
  • .form-addon-dom，可以看做是一个拥有间隔样式的容器，能将按钮及按钮下拉菜单组件有条理的拼接好，类似于 .plural-btns 和 .btn-group-box 的功能。
实例
按钮拼接
按钮组的拼接
按钮式下拉菜单的拼接
            
<div class="form-group">
  <label class="form-control-label" for="...">
    <span>...</span>
  </label>
  <div class="form-gs-box">
    <span class="form-addon-dom ( child-left / right )"></span>
    <div class="form-control-wrap">
      ...
    </div>
  </div>
</div>

混合组装

  • 这里列出了部分比较常用的组合范例，如有需要可自行组装适应需求变化的组合，顺便告诉 我们 有哪些组合不能实现。
实例
A
B
C
C
B
A
  • 将栅格系统应用到表单结构里面的能组合出更复杂的表单页面；
    需要将栅格系统嵌进表单的时候，要给表单的定义元素 <form> 引用 .form-grid 前置类。
  • 系统在表单内的应用大致上和独立使用的效果是一样的，只是为了适应某些表单特有的排版效果，在结合表单的时候会再重新定义一些样式，例如表单标题的宽度和排版，row 和 col 的内外间距；
    所以在你需要用到栅格去构建表单的时候，请考虑到这些变化会否对原有设计产生影响。
  • BrickPlus 也允许在套有栅格系统的表单当中插入有排版的字符串（暂时只支持行内结构的流元素），只要将栅格系统结合叠加类 .form-grid-addon 使用，详细可参考代码示范；
    往后仍会继续完善这小工具。
实例
典型的表单栅格应用
特殊的表单栅应用
支持栅格插入字符串
            
<div class="container-fluid ( container )">
  <div class="row">
    <div class="col-xx-xx">
      ...
    </div>
  </div>
</div>
  • BrickPlus 提供了四种不同的表单尺寸，以备适应不同的页面设计，其中三种非常规尺寸需通过叠加类 .form-large / .form-small / .form-smaller 展示。
  • 表单的尺寸控制类和按钮的尺寸控制类不同，能作为全局控制样式使用，也就是说，可以只在表单最外围一层引用，然后对内里的表单组件产生效果；
    而引用在单个表单组件的 .form-control 一层，就只影响单个组件。
实例
            
<div class="form-( large / small / smaller )">
  ...
</div>
表单题目 表单居中

表单题目

  • BrickPlus 并没有定义表单标题的字符尺寸，将 .form-title 类引用到 <h> 系列元素能更快的得到一个表单的题目。
  • 其实它是独立的，能用在任何地方，看你的需要咯。
实例

表单题目
题目下的 <small> 元素被定义成副标题的样式

表单题目 题目下的 <small> 元素被定义成副标题的样式 

            
<h1 class="form-title">
  ...
  <small>...</small>
</h1>

表单居中

  • BrickPlus 提供简单的表单居中样式结构套合，只需在表单的最外层引用 .form-in-center 类，重新定义其下的元素所使用的栅格样式（对，没错，我们又用到了栅格工具，因为好用），因为栅格工具能方便的决定居中表单在不同视口的情况下所占的宽度比例，确保效果；
    给引用栅格工具样式的元素叠加 .form-center-box 类（处理掉表单组件的标题宽度，让组件的主题体在页面上看起来是居中的），然后在栅格元素下再套合表单结构。
  • 表单居中需要谨慎考虑装载表单的容器的实际有效宽度，避免出现内容在页面上溢出容器的错位效果。
实例

表单居中 表单居中的展现需要结合栅格工具

请选择一个选项
  • option xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  • option one
  • option two
  • option three
  • option four
  • option five
  • 招商银行   |   尾号1234
  • 工商银行   |   尾号1234
  • 建设银行   |   尾号1234
  • 农业银行   |   尾号1234
  • 中国银行   |   尾号1234
  • 交通银行   |   尾号1234
  • 平安银行   |   尾号1234
  • 邮政银行   |   尾号1234
  • 上海银行   |   尾号1234
  • 温州银行   |   尾号1234
  • 浦发银行   |   尾号1234
  • 中信银行   |   尾号1234
  • 广发银行   |   尾号1234
  • 民生银行   |   尾号1234
  • 兴业银行   |   尾号1234
  • 光大银行   |   尾号1234
  • 上海农商银行   |   尾号1234
  • 北京银行   |   尾号1234
  • 北京农商银行   |   尾号1234
  • 深圳发展银行   |   尾号1234
  • 宁波银行   |   尾号1234
  • 杭州银行   |   尾号1234
  • 东莞银行   |   尾号1234
  • 汇丰银行   |   尾号1234
  • 东亚银行   |   尾号1234
  • 广州农商银行   |   尾号1234
  • 华夏银行   |   尾号1234
  • 华润银行   |   尾号1234
  • 兰州银行   |   尾号1234
  • 河北银行   |   尾号1234
  • 微商银行   |   尾号1234
  • 青岛银行   |   尾号1234
  • 尧都农商   |   尾号1234
  • 浙商银行   |   尾号1234
  • 南昌银行   |   尾号1234
  • 渤海银行   |   尾号1234
  • 恒丰银行   |   尾号1234
  • 天津银行   |   尾号1234
  • option xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  • option one
  • option two
  • option three
  • option four
  • option five
  • 深圳宏澳装饰工程有限公司分公司
  • 广东东田投资股份有限公司
  • 市远大融资担保有限公司
  • 万豪五金货架有限公司
  • 广东天恒地产集团有限公司
  • 中国平安人寿保险股份中心支公司
  • 广东华南顺通大宗商品交易中心
  • 东莞市浩瀚商贸有限公司
  • 高普（香港）有限公司东莞代表处
  • 香港葛天那中国有限公司
  • 市晶和实业集团有限公司
  • 南方报业传媒集团办事处
  • 深圳宏澳装饰工程有限公司分公司
  • 广东东田投资股份有限公司
  • 市远大融资担保有限公司
  • 万豪五金货架有限公司
  • 广东天恒地产集团有限公司
  • 中国平安人寿保险股份中心支公司
  • 广东华南顺通大宗商品交易中心
  • 东莞市浩瀚商贸有限公司
  • 高普（香港）有限公司东莞代表处
  • 香港葛天那中国有限公司
  • 市晶和实业集团有限公司
  • 南方报业传媒集团办事处
展示静态表单数据

辅助文本

A
B
C
C
B
A 
            
<div class="form-in-center">
  <div class="col-xx-xx form-center-box">
    <form>
      ...
    </form>
  </div>
</div>