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/examples/images/head01.jpg),url(https://src.axui.cn/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/examples/images/head01.jpg),url(https://src.axui.cn/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样式,使用该变体制作表单。

您的姓名
还可以输入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-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样式包裹,可占满宽度。

您的姓名
还可以输入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">
                                            <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>
                        

变体一更多用法

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

您的姓名
还可以输入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-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(尾下拉)多个样式使用。同理下拉菜单和复选也可以使用变体三。请观摩效果演示。

姓名
搜索
姓名
文件
价格
@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 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>
                        

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

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