Input 表单基础

使用方法

整体用ax-form-group样式包裹,输入部分用ax-form-con包裹,ax-form-con中的输入控件是按100%显示,通过定义ax-form-input的宽度来确定输入控件的宽度;表头用ax-form-label包裹,框架设定其宽度是160px,用户根据需要自行修改。基本格式如下:

                             <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="text"></div>
                                        </div>
                                    </div>
                                </div>
                        
姓名:
评论内容:

考虑到一些特殊行业的特殊字段,表头可以一行,也可以两行显示。

您十年前在深圳的曾用名是什么:
IE11下有BUG,暂时没有解决方法。

禁止录入

对输入控件inputtextarea填入readonly="即可。

姓名:
评论内容:

文件选择

原始的file控件显示效果比较差,而且不同浏览器显示结果不同,故使用原生js设计了本文件上传控件,美观实用。更多文件域使用方法详见这里

选择文件:
                                <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>
                        

扩展一:右侧显示结果

ax-form-con之后使用ax-form-txt样式,配合使用图标即可实现。请观摩效果演示。

姓名:
姓名:
姓名:
你错了
                             <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="text"></div>
                                        </div>
                                        <div class="ax-form-txt ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 文字</div>
                                    </div>
                                </div>
                        

扩展二:右侧添加清除按钮

在输入控件input和textarea后添加ax-pos-right样式,对图标使用ax-val-none即可,请观摩效果演示。

姓名:
评论内容:
                             <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="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                        </div>
                                    </div>
                                </div>
                        

除了添加清除图标之外,同理还可以添加其他图标,想让图标具备什么功能用户可通过自行编写js实现。

姓名:
评论内容:

扩展三:右侧按钮

表单中经常在右侧放置按钮用来跳转或者打开窗口,本框架使用ax-form-btn表示表单右侧按钮。以下以手机验证码为例进行效果演示。更多按钮用法见按钮

手机验证码:
获取验证码
手机验证码:
获取验证码
手机验证码:
52s后重新获取
手机验证码:
手机验证码:
                             <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="text"></div>
                                        </div>
                                        <a href="###" class="ax-form-btn ax-btn">文字</a>
                                    </div>
                                </div>
                        

扩展四:一行输入多个值

在某些行业中,多个字段是关联的,所以需要在一行录入相关联的字段,比如省市县、房源等。在ax-form-input中使用均分或者非均分布局方法实现,本框架设计了两种效果,请观摩效果演示。

选择房子:
所在位置:
县/区
病症:
疾病
症状
                                <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 type="text"></div>
                                                    <span class="ax-bunch-txt">文字</span>
                                                    <div class="ax-col ax-col-8"><input type="text"></div>
                                                    <span class="ax-bunch-txt">文字</span>
                                                    <div class="ax-col ax-col-8"><input type="text"></div>
                                                    <span class="ax-bunch-txt">文字</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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 type="text"><span class="ax-pos-right">文字</span></div>
                                                    <span class="ax-gutter-md"></span>
                                                    <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                                    <span class="ax-gutter-md"></span>
                                                    <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        

扩展五:右侧显示文字或图片

框架定义了ax-form-txtax-form-headax-form-img,用来显示文字和图片。请观摩演示效果

单价:
单位(元)
带头像:
李创江
带图片:
李创江
验证码:
显示验证码
                                <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>
                                        <span class="ax-form-txt ax-color-ignore">单位(元)</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 name="username" placeholder="输入登录名称" value="" type="text"></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"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                        </div>
                                        <a href="###" class="ax-form-img"><img src="https://src.axui.cn/examples/images/image-1.jpg"></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"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                        </div>
                                        <span class="ax-form-img"><a href="###">显示验证码</a></span>
                                    </div>
                                </div>
                        

基础效果预览

姓名:
姓名:
姓名:
你错了
姓名:
姓名:
您十年前在深圳的曾用名是什么:
选择房子:
选择房子:
手机验证码:
获取验证码
手机验证码:
获取验证码
手机验证码:
52s后重新获取
单价:
单位(元)
名称(头像):
李创江
名称(图片):
李创江
选择文件:
评论:
评论(只读):
                                <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"><input name="username" placeholder="输入登录名称"  type="text"></div>
                                        </div>
                                        <span class="ax-form-txt ax-color-danger ax-iconfont ax-icon-close-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"><input name="username" placeholder="输入登录名称"  type="text"></div>
                                        </div>
                                        <div class="ax-form-txt ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 你错了</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="只读的input" readonly 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="输入登录名称" value="李畅" type="text"><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-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>
                                        <a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-fill"></span></a><a href="###" class="ax-form-btn ax-btn ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-fill"></span></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">
                                                <div class="ax-row">
                                                    <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"></div>
                                                    <span class="ax-bunch-txt">室</span>
                                                    <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"></div>
                                                    <span class="ax-bunch-txt">厅</span>
                                                    <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"></div>
                                                    <span class="ax-bunch-txt">卫</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"><input name="username" placeholder="输入验证码" value="" type="text"></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"></div>
                                        </div>
                                        <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-label">手机验证码:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                        </div>
                                       <span class="ax-form-btn ax-btn ax-forbid">52s后重新获取</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 name="username" placeholder="输入商品单价" value="" type="text"></div>
                                        </div>
                                        <span class="ax-form-txt ax-color-ignore">单位(元)</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 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"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                        </div>
                                        <a href="###" class="ax-form-img"><img src="https://src.axui.cn/examples/images/image-1.jpg"></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-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"><textarea name="" cols="" rows="" placeholder="写评论" readonly=""></textarea></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>
                        

在线调试请点击这里

直角风格

框架表单风格是3px的圆角风格,对input、teatarea、selet使用ax-square类即可。

姓名:
选择房子:
手机验证码:
获取验证码
名称(头像):
李创江
选择文件:
评论:
选择城市:
                                <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" class="ax-square"></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" class="ax-square"><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" class="ax-square"><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" class="ax-square"><span class="ax-pos-right">卫</span></div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-square"><span class="ax-iconfont ax-icon-trash-alt-fill"></span></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" class="ax-square"></div>
                                        </div>
                                        <a href="###" class="ax-form-btn ax-btn ax-primary ax-square">获取验证码</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" class="ax-square"><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 ax-square" 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-flex-block">
                                            <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" class="ax-square"></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-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-square">
                                                    <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-flex-block">
                                            <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full ax-square">提交button</button></div>
                                        </div>
                                    </div>
                                </div>
                        

圆形风格

框架表单风格是3px的圆角风格,对input、textarea、select使用ax-round类即可。

姓名:
选择房子:
手机验证码:
获取验证码
名称(头像):
李创江
选择文件:
评论:
选择城市:
                                <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" class="ax-round"></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" class="ax-round"><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" class="ax-round"><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" class="ax-round"><span class="ax-pos-right">卫</span></div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-fill"></span></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" class="ax-round"></div>
                                        </div>
                                        <a href="###" class="ax-form-btn ax-btn ax-primary ax-round">获取验证码</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" class="ax-round"><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 ax-round" 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-flex-block">
                                            <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" class="ax-round"></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-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-round">
                                                    <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-flex-block">
                                            <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full ax-round">提交button</button></div>
                                        </div>
                                    </div>
                                </div>

                        

标题避让 JS

这种用法暂时叫做“避让”,顾名思义当表单控件成为焦点的时候,指示标题缩小至左上方,既能输入内容又可告知当前输入字段,比表单控件自带的placeholder属性好用。为了实现该效果写了一小段JS,具体用法是对input和textarea控件的父层追加ax-dodge即可。目前看来避让效果只是对input和textarea使用比较合适。另外该效果只对常规尺寸和ax-lg尺寸良好,不建议对ax-smax-xs尺寸使用。

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-con">
                                            <div class="ax-form-input ax-dodge"><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-flex-block">
                                            <div class="ax-form-input ax-dodge"><textarea name="" cols="" rows="" placeholder="请写下你的评论" ></textarea></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 ax-dodge"><input name="username" placeholder="请输入姓名"  type="text" class="ax-lg"></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-form-input ax-dodge"><textarea name="" cols="" rows="" placeholder="请写下你的评论" class="ax-lg"></textarea></div>
                                        </div>
                                    </div>
                                </div>

                        

不同尺寸

本框架input默认高度是38px,用户可以对input和textarea追加尺寸类实现不同大小,包括:高22px的ax-xs尺寸、高28px的ax-sm尺寸和高48px的ax-lg尺寸。如果是组合表单,那么除了给input和textarea追加尺寸类之外还需要给ax-form-group追加尺寸类。

高22px的ax-xs。

名称(头像):
李创江
                                <input name="username" placeholder="输入登录名称"  type="text" class="ax-xs">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论"  class="ax-xs"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-xs">
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-xs">
                                    <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="" class="ax-xs" 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>
                        

高28px的ax-sm。

名称(头像):
李创江
                                <input name="username" placeholder="输入登录名称"  type="text" class="ax-sm">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论"  class="ax-sm"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-sm">
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-sm">
                                    <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="" class="ax-sm" 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>
                        

高48px的ax-lg。

名称(头像):
李创江
                                <input name="username" placeholder="输入登录名称"  type="text" class="ax-lg">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论"  class="ax-lg"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-lg">
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-lg">
                                    <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="" class="ax-lg" 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>
                        

移动端自适应

本框架默认在PC下使用,如果需要在移动端实现自适应效果请在ax.css之后加载ax-response.css。自适应效果请详见:基础表单