表单
将输入框组、表单按钮及相关元素组合，形成表单，用.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>