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样式,使用该变体制作表单。

您的姓名
还可以输入78个文字
所在位置
县/区
选择文件
所在城市
所在城市
                                <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样式包裹,可占满宽度。

您的姓名
还可以输入78个文字
所在位置
县/区
选择文件
所在城市
所在城市
                                <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>
                            

变体一更多用法

比如添加图标,添加按钮等;请观摩效果演示。

您的姓名
还可以输入78个文字
您的姓名
更新
您的姓名
从列表选填
比如:李四
                                <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(尾下拉)多个样式使用。同理下拉菜单和复选也可以使用变体三。请观摩效果演示。

姓名
搜索
姓名
文件
价格
@hotmail.com
邮箱
城市
读书
姓名:
                                <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>
                            

如果需要横向显示多个输入控件,可以使用layout布局或者grid方格进行排列。layout布局见布局,grid方格见方格

省份
城市
街道
关键字
城市
读书
                            <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>