Form 表单组合
常用表单结构
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择房子：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">手机验证码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span>填写完成</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称(头像)：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
</div>
<a href="###" class="ax-form-head" style="background-image:url(
https://src.axui.cn/v2.0/public/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择文件：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="file" axUpload>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择城市：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select axSelect>
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="0" checked="" type="radio"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">数量：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount>
<input name="username" placeholder="数量" value="2" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">评论：</div>
<div class="ax-flex-block">
<div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交button</button></div>
</div>
</div>
</div>
表单结构变体一
保留ax-form-label样式，可以与常规格式表单对齐。
您的姓名
还可以输入78个文字
姓名：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">您的姓名</div><span class="ax-color-ignore">还可以输入<i class="ax-color-warning">78</i>个文字</span></div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
</div>
</div>
去掉ax-form-label样式，使用该变体制作表单。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">您的姓名</div><span class="ax-color-ignore">还可以输入<i class="ax-color-warning">78</i>个文字</span></div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">所在位置</div></div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="username" placeholder="省份" value="" type="text"><span class="ax-pos-right">省</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="城市" value="" type="text"><span class="ax-pos-right">市</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="县城/城区" value="" type="text"><span class="ax-pos-right">县/区</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">选择文件</div></div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<input type="file" axUpload>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">所在城市</div></div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<select axSelect>
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">所在城市</div></div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交button</button></div>
</div>
</div>
</div>
稍微调整结构，外围使用ax-flex-block样式包裹，可占满宽度。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">您的姓名</div><span class="ax-color-ignore">还可以输入<i class="ax-color-warning">78</i>个文字</span></div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-flex-block">
<input name="username" placeholder="输入登录名称" type="text">
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">所在位置</div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="username" placeholder="省份" value="" type="text"><span class="ax-pos-right">省</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="城市" value="" type="text"><span class="ax-pos-right">市</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="县城/城区" value="" type="text"><span class="ax-pos-right">县/区</span></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">选择文件</div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-flex-block">
<input type="file" axUpload>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">所在城市</div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-flex-block">
<select axSelect>
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">所在城市</div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-flex-block"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block"><button type="button" class="ax-btn ax-primary ax-full">提交button</button>
</div>
</div>
</div>
变体一更多用法
比如添加图标，添加按钮等；请观摩效果演示。
<div class="ax-form-group">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><span class="ax-iconfont ax-icon-me ax-icon"></span><div class="ax-flex-block ax-title">您的姓名</div><span class="ax-color-ignore">还可以输入<i class="ax-color-warning">78</i>个文字</span></div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><span class="ax-iconfont ax-icon-me ax-icon"></span><div class="ax-flex-block ax-title">您的姓名</div><a href="###" class="ax-txt-btn"><span class="ax-iconfont ax-icon-refresh"></span> 更新</a></div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin"><span class="ax-iconfont ax-icon-me ax-icon"></span><div class="ax-flex-block ax-title">您的姓名</div><a href="###" class="ax-btn ax-primary ax-sm">从列表选填</a></div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
<div class="ax-valid ax-color-ignore">比如：李四</div>
</div>
</div>
</div>
表单结构变体二
在输入控件前方使用ax-pos-left样式，并对样式定义宽度，通过一小段js会将ax-pos-left的宽度值赋予input作为他的padding-left值。
可为了保持整齐划一可对ax-pos-left定义width样式，比如：style="width:64px;"。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left">账号：</span><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left">密码：</span><input name="password" placeholder="输入密码" type="password"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-flex-block">
<span class="ax-pos-left">手机号：</span><input name="phone" placeholder="输入手机号" value="" type="text">
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left">验证码：</span><input name="username" placeholder="输入验证码" value="" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span>填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left">评论：</span><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><u></u><i>永久保存账密</i></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交button</button></div>
</div>
</div>
</div>
input头部除了使用文字之外也经常使用图标以表字段提示，请观摩演示例子。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left ax-iconfont ax-icon-me-f ax-color-ignore" style="width:20px"></span><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left ax-iconfont ax-icon-lock-f ax-color-ignore" style="width:20px"></span><input name="password" placeholder="输入密码" type="password"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-flex-block">
<span class="ax-pos-left ax-iconfont ax-icon-telephone-f ax-color-ignore" style="width:20px"></span><input name="phone" placeholder="输入手机号" value="" type="text">
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left ax-iconfont ax-icon-shield-f ax-color-ignore" style="width:20px"></span><input name="username" placeholder="输入验证码" value="" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span>填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left ax-iconfont ax-icon-message-s-f ax-color-ignore" style="width:20px"></span><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><u></u><i>永久保存账密</i></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交button</button></div>
</div>
</div>
</div>
稍微调整结构，外围使用ax-flex-block样式包裹，可占满宽度。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<span class="ax-pos-left" style="width: 64px;">账号：</span><input name="username" placeholder="输入登录名称" type="text">
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<span class="ax-pos-left" style="width: 64px;">密码：</span><input name="password" placeholder="输入密码" type="password">
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-flex-block">
<span class="ax-pos-left" style="width:64px;">手机号：</span><input name="phone" placeholder="输入手机号" value="" type="text">
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<span class="ax-pos-left" style="width:64px;">验证码：</span><input name="username" placeholder="输入验证码" value="" type="text">
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span>填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<span class="ax-pos-left" style="width:64px;">评论：</span><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><u></u><i>永久保存账密</i></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<button type="button" class="ax-btn ax-primary ax-full">提交button</button>
</div>
</div>
</div>
表单结构变体三
针对input输入框可使用变体组合，外围使用ax-input-group包裹。共ax-prefix（头），ax-prefix-select（头下拉），ax-with-suffix（有尾input）， ax-suffix ax-btn（按钮），ax-suffix（尾）,ax-suffix-select（尾下拉）多个样式使用。同理下拉菜单和复选也可以使用变体三。请观摩效果演示。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">姓名</span>
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入登录名称" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入登录名称" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">姓名</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入登录名称" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">文件</span>
<div class="ax-flex-block">
<input type="file" axUpload>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">价格</span>
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入价格" type="text">
</div>
<span class="ax-suffix">元</span>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入邮件地址" type="text">
</div>
<span class="ax-suffix">@hotmail.com</span>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">邮箱</span>
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入邮箱" type="text">
</div>
<select axSelect='className:"ax-suffix-select",width:"150px"'>
<option value="@hotmail.com">@hotmail.com</option>
<option value="@qq.com">@qq.com</option>
<option value="@gmail.com">@gmail.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<select axSelect='className:"ax-prefix-select",width:"100px"'>
<option value="86">+86</option>
<option value="81">+81</option>
<option value="82">+82</option>
</select>
<div class="ax-flex-block">
<input name="username" placeholder="输入手机号码" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">城市</span>
<div class="ax-flex-block">
<select axSelect='className:"ax-suffix-select"'>
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">读书</span>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" type="checkbox"><u></u><i>娱乐类</i></label></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
</div>
</div>
去掉ax-form-label样式，使用该变体制作表单。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">关键字</span>
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix">姓名</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入真实姓名" type="text">
</div>
</div>
</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">搜索</a><a href="###" class="ax-form-btn ax-btn ">重置</a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-prefix"><span class="ax-iconfont ax-icon-search"></span></span>
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
</div>
稍微调整结构，外围使用ax-flex-block样式包裹，可占满宽度。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row ax-input-group">
<span class="ax-prefix">关键字</span>
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row ax-input-group">
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row ax-input-group">
<span class="ax-prefix">姓名</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入真实姓名" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row ax-input-group">
<span class="ax-prefix"><span class="ax-iconfont ax-icon-search"></span></span>
<div class="ax-flex-block ax-with-suffix">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
城市
读书
<div class="ax-row">
<div class="ax-col ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-prefix">省份</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入省份" type="text">
</div>
</div>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-prefix">城市</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入城市" type="text">
</div>
</div>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-prefix">街道</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入街道" type="text">
</div>
</div>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-prefix">关键字</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入关键字" type="text">
</div>
</div>
</div>
<span class="ax-gutter"></span>
<div class="aax-col ax-col-4">
<a href="###" class="ax-btn ax-primary ax-full">检索</a>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-row">
<div class="ax-col ax-col-12">
<div class="ax-row ax-input-group">
<span class="ax-prefix">城市</span>
<div class="ax-flex-block">
<select axSelect='className:"ax-suffix-select"'>
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-12">
<div class="ax-row ax-input-group">
<span class="ax-prefix">读书</span>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" type="checkbox"><u></u><i>娱乐类</i></label></div>
</div>
</div>
</div>
</div>
</div>
PC端模拟手机
有时候需要在PC端紧凑显示表单，可以对表单追加ax-emulate类模拟手机效果。更多请点击这里
<div class="ax-emulate">
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
</div>
</div>
<hr/>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择房子：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">验证码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span>填写完成</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
<hr/>
<div class="ax-break-md"></div>
<button type="button" class="ax-btn ax-primary ax-margin-lr">提交</button>
<div class="ax-break-md"></div>
</div>