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-fill"></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-fill"></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 ax-val-none"></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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a><span class="ax-form-txt ax-color-des">李创江</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-file" data-placeholder="点击选择头像" data-text="选择文件">
<input type="file">
</div>
</div>
</div>
<a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></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">
<select class="ax-select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆" selected="">重庆</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"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><span>其他</span></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"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></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-increase"><input name="username" placeholder="数量" value="2" type="text"><a href="###" class="ax-minus"><i class="ax-iconfont ax-icon-minus"></i></a><a href="###" class="ax-plus"><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 ax-val-none"></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-fill"></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">
<div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
<input type="file">
</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">
<select class="ax-select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆" selected="">重庆</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 ax-val-none"></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">
<div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
<input type="file">
</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">
<select class="ax-select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆" selected="">重庆</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 ax-val-none"></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-fill"></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-fill"></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>
表单结构变体二 JS
在输入控件前方使用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-fill"></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-fill"></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 ax-val-none"></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"><span>永久保存账密</span></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-fill 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-fill"></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-fill 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-fill 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-fill 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-fill"></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-fill 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 ax-val-none"></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"><span>永久保存账密</span></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-fill"></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 ax-val-none"></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"><span>永久保存账密</span></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>
表单结构变体三 JS
针对input输入框可使用变体组合，外围使用ax-input-group包裹。共ax-title（头），ax-title-select（头下拉），ax-operate（按钮），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 ax-input-group-">
<span class="ax-title ax-btn">姓名</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入登录名称" type="text">
</div>
<a href="###" class="ax-operate 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">
<input name="username" placeholder="输入登录名称" type="text">
</div>
<a href="###" class="ax-operate 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-title ax-btn">姓名</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-title ax-btn">文件</span>
<div class="ax-flex-block">
<div class="ax-file" data-placeholder="点击选择上传" data-text="选择文件">
<input type="file">
</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">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn">价格</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入价格" type="text">
</div>
<span class="ax-suffix ax-btn">元</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">
<input name="username" placeholder="输入邮件地址" type="text">
</div>
<span class="ax-suffix ax-btn">@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-title ax-btn">邮箱</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入邮箱" type="text">
</div>
<select class="ax-select ax-suffix-select" >
<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 class="ax-select ax-title-select">
<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-title ax-btn">城市</span>
<div class="ax-flex-block">
<select class="ax-select">
<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-title ax-btn">读书</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"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" type="checkbox"><span>娱乐类</span></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-title ax-btn">关键字</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-operate 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">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-operate 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-title ax-btn">姓名</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-title ax-btn ax-icon"><span class="ax-iconfont ax-icon-search"></span></span>
<div class="ax-flex-block">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-operate 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-title ax-btn">关键字</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-operate 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">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-operate 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-title ax-btn">姓名</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-title ax-btn ax-icon"><span class="ax-iconfont ax-icon-search"></span></span>
<div class="ax-flex-block">
<input name="username" placeholder="输入关键字" type="text">
</div>
<a href="###" class="ax-operate ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
-
省份
-
城市
-
街道
-
关键字
- 检索
-
城市
-
读书
<div class="ax-grid ax-space ax-split">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn">省份</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入省份" type="text">
</div>
</div>
</li>
<li class="ax-grid-block ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn">城市</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入城市" type="text">
</div>
</div>
</li>
<li class="ax-grid-block ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn">街道</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入街道" type="text">
</div>
</div>
</li>
<li class="ax-grid-block ax-col-5">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn">关键字</span>
<div class="ax-flex-block">
<input name="username" placeholder="输入关键字" type="text">
</div>
</div>
</li>
<li class="ax-grid-block ax-col-4">
<a href="###" class="ax-btn ax-primary ax-full">检索</a>
</li>
<li class="ax-grid-block ax-col-10">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn">城市</span>
<div class="ax-flex-block">
<select class="ax-select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-10">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn">读书</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"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" type="checkbox"><span>娱乐类</span></label></div>
</div>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-4">
</li>
</ul>
</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-fill"></span>
</div>
</div>
<div class="ax-break-line"></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-line"></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-fill"></span>填写完成</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-break-md"></div>
<button type="button" class="ax-btn ax-primary ax-full ax-margin-lr">提交</button>
<div class="ax-break-md"></div>
</div>